郑州短视频代运营,网站访问速度优化工具,企业网络规划设计,做mod游戏下载网站版本#xff1a; 3.4.0
语言#xff1a; TypeScript
环境#xff1a; Mac 简介 在CocosCreator 3.x版本后#xff0c; Tween缓动系统代替了原有的Action动作。官方使用缓动系统的主要目的之一是用于解决离线动画无法满足需求时的动态动画问题。
简单的示例#xff1a; …版本 3.4.0
语言 TypeScript
环境 Mac 简介 在CocosCreator 3.x版本后 Tween缓动系统代替了原有的Action动作。官方使用缓动系统的主要目的之一是用于解决离线动画无法满足需求时的动态动画问题。
简单的示例
let duration 2;
tween(this.tipNode)// 延迟两秒.delay(duration)// 2秒钟移动到(0, 300, 0)的位置并缩放由1为0.to(duration, {position: new Vec3(0, 300, 0)})// 执行回调.call(() {console.log(运行结束);})// 开始运行当前缓动对象.start();使用缓动主要通过tween函数来构建Tween实例化对象。它非Tween成员
// tween 是一个工具函数帮助实例化Tween实例target用于设置缓动的目标
export function tweenT(target?: T): TweenT;在缓动中主要通过by和to修改某些属性 其中
by 使用 相对值 修改属性to 使用 绝对值 修改属性
Tween提供的大部分接口返回的对象是this 或者一个新的Tween对象 因此可以使用 链式调用。
上面的示例等同于
// tweenObj 对象就是新生成的Tween实例化对象
let duration 2;
let tweenObj_1 tween(this.tipNode);
let tweenObj_2 tweenObj_1.delay(duration);
let tweenObj_3 tweenObj_2.to(duration, {position: new Vec3(0, 300, 0)});
let tweenObj_4 tweenObj_3.call(() {console.log(运行结束);
});
let tweenObj_5 tweenObj_4.start();
console.log(typeof(tweenObj_5), tweenObj_5);本篇文章主要讲述下关于缓动系统的使用理解可能有误欢迎您的指出。 常用接口 Tween类的基本使用
// 声明的tween函数用于实例化Tween对象
export function tweenT(target?: T): TweenT;
// 构造函数相关关于target可以通过构造函数或target方法设置缓动目标
export class TweenT {constructor(target?: T | null);target(target: T): TweenT | undefined;
}创建缓动的简单示例
let duration 2;
// 使用构造函数
tween(this.node).to(duration, {position:new Vec3(0, 10, 0)}).start();
// 使用target
tween().target(this.node).to(duration, {position:new Vec3(0, 10, 0), scale: new Vec3(0, 0, 0)}).start();注意 Tween 支持同时修改目标的多个属性并非仅一个 Tween提供的接口较多为了方便查看主要为了如下几类
静态接口基础接口队列接口 主要用于顺序执行并列执行 执行重复次数等复杂动作
静态接口
接口说明stopAll(): void停止所有缓动stopAllByTag(tag: number, target?: object): void停止所有指定标签的缓动stopAllByTarget(target?: object): void停止所有指定对象的缓动
简单示例
tween(this.node).tag(1000).to(duration, {position:new Vec3(0, 10, 0)}).call(() {// 三种方式任一即可Tween.stopAllByTarget(this.tipNode);Tween.stopAllByTag(1000);Tween.stopAll();}).start();基础接口
接口说明tag(tag: number): this设置缓动的标签target(target: T): TweenT添加一个 直接设置缓动目标 的瞬时动作start(): TweenT运行当前缓动stop(): TweenT停止当前缓动clone(target: T): TweenT克隆当前缓动to(duration, props, opts): TweenT添加一个对属性进行 相对值 计算的间隔动作by(duration, props, opts): TweenT添加一个对属性进行 绝对值 计算的间隔动作set(props): TweenT添加一个 直接设置目标属性 的瞬时动作delay(duration: number): TweenT添加一个延时 actioncall(callback: Function): TweenT添加一个回调 actionshow(): TweenT添加一个显示action只适用target 是节点类型hide(): TweenT添加一个隐藏 action只适用target 是节点类型removeSelf(): TweenT添加一个移除自己 action只适用target是节点类型
简单示例
let duration 2;
// 示例1: 显示和隐藏节点
tween(this.node) .hide() .delay(1.0).show().start();
// 示例2: 移除节点
tween(this.node) .delay(1.0).removeSelf() .start();
// 示例3: 设置目标属性、可选选项及销毁缓动
tween().tag(1000).target(this.tipNode).set({position: new Vec3(0, 0, 0), scale: new Vec3(1, 1, 1)}).delay(duration)// 设置位置属性及缓动的可选选项.to(duration, {position: new Vec3(0, 300, 0), scale: new Vec3(0, 0, 0)}, {// 设置缓动方式easing: smooth,onComplete: (target) {console.log(当缓动动作完成时触发);},}).call(() {Tween.stopAllByTarget(this.tipNode);}).start();队列接口
接口说明union(): TweenT将之前所有的 action 整合为一个 actionthen(other: TweenT): TweenT插入一个 tween 到队列中sequence(...args: TweenT[]): TweenT添加一个顺序执行的缓动parallel(...args: TweenT[]): TweenT添加一个同时进行的缓动repeat(repeatTimes, embedTween?): TweenT执行几次repeatForever(embedTween?): TweenT一直重复执行
简单的示例
let duration: number 1.0;// 整合
tween(this.node).to(duration, {position:new Vec3(0, 10, 0)})// 此时 Tween 内的动作数量为 2.to(duration, {position:new Vec3(0, -10, 0)})// 这里会将上述的两个缓动整合成一个此时 Tween 内的动作数量为 1.union().start(); // 插入
let t2 tween(this.node).to(duration, { position: new Vec3(0, -10, 0) })tween(this.node).by(duration, { position: new Vec3(0, 10, 0) }).then(t2).start();// 使用sequence按照顺序执行
let t1 tween(this.node).to(duration, {position: new Vec3(0, 10, 0)})
let t2 tween(this.node).to(duration, {position: new Vec3(0, -10, 0)})
tween(this.node).sequence(t1, t2).start();// 使用parallel同时执行
let t1 tween(this.node).to(duration, {position: new Vec3(0, 10, 0)})
let t2 tween(this.node).to(duration, {position: new Vec3(0, -10, 0)})
tween(this.node).parallel(t1, t2).start();// 重复执行
// 方式1:
let tweenDuration: number 1.0;
tween(this.node).to(tweenDuration, { position: new Vec3(0, 10, 0) }).by(tweenDuration, { position: new Vec3(0, -10, 0) }).repeat(3) // 注意这里会重复 by 这个缓动 3 次.start()
// 方式2:
let embedTween tween(this.node).by(tweenDuration, {position: new Vec3(0, -10, 0)})tween(this.node).to(tweenDuration, {position: new Vec3(0, 10, 0)}).repeat(3, embedTween) // 这里会重复 embedTween.start();ITweenOption 缓动选项 ITweenOption主要应用于Tween的 to和by方法中 它作为可选参数用于设定缓动的方式和回调相关。
export class TweenT {// 添加相对值属性to(duration: number, props: __private.cocos_tween_tween_ConstructorTypeT, opts?: ITweenOption): TweenT;// 添加绝对值属性by(duration: number, props: __private.cocos_tween_tween_ConstructorTypeT, opts?: ITweenOption): TweenT;
}这样可以更灵活的控制或修改目标的属性 主要定义如下
// 缓动方式
export type TweenEasing
linear | smooth | fade | constant |
quadIn | quadOut | quadInOut | quadOutIn |
cubicIn | cubicOut | cubicInOut | cubicOutIn |
quartIn | quartOut | quartInOut | quartOutIn |
quintIn | quintOut | quintInOut | quintOutIn |
sineIn | sineOut | sineInOut | sineOutIn |
expoIn | expoOut | expoInOut | expoOutIn |
circIn | circOut | circInOut | circOutIn |
elasticIn | elasticOut | elasticInOut | elasticOutIn |
backIn | backOut | backInOut | backOutIn |
bounceIn | bounceOut | bounceInOut | bounceOutIn;// 缓动选项
export interface ITweenOption {// 设置缓动方式easing?: TweenEasing | ((k: number) number);// 插值函数参数的意义 start:起始值end:目标值current:当前值ratio:当前进度progress?: (start: number, end: number, current: number, ratio: number) number;// 回调当缓动动作启动时触发onStart?: (target?: object) void;// 回调当缓动动作更新时触发onUpdate?: (target?: object, ratio?: number) void;// 回调当缓动动作完成时触发onComplete?: (target?: object) void;
}官方提供的示例
let duration: number 1.0;
tween(this.node).to(duration, {position: new Vec3(0, 10, 0)}, {// 设置缓动函数easing: backIn,onStart: (target?: object) {console.log(缓动动作启动时触发);},onUpdate: (target: Vec3, ratio: number) {console.log(当缓动动作更新时触发, 进度:, ratio);// 将缓动系统计算出的结果赋予 node 的位置this.node.position target; },onComplete: (target?: object) {console.log(当缓动动作完成时触发);},progress: (start, end, current, ratio): number {// 返回自定义插值进度return 0.0;}}).start(); 这里做下延伸在CocosCreator 3.x以后节点透明度的参数opacity修改为了组件: UIOpactiy
节点的基本属性仅包含 位置、缩放和旋转。
如果想实现一个提示功能在节点上移的过程中逐渐透明, UI如下
代码如下
let duration 2;
let tweenObj tween(this.tipNode).tag(1000).delay(duration).to(duration, {position: new Vec3(0, 300, 0)}, {easing: smooth,onUpdate: (target, ratio) {// 更新时触发的回调使用进度修改透明度let uiOpacity this.tipNode.getComponent(UIOpacity);uiOpacity.opacity (1 - ratio) * 255;},}).removeSelf().start();
console.log(tweenObj:, tweenObj);最后看下tween对象的构成
主要组成部分
_actions 用于创建一组对象的缓冲_finalAction 最终使用的Action对象_tag 标记_target 目标 至此结束。
