Cocos Creator 在 v2.0.9 提供了一套新的 API —— cc.tween。cc.tween 能够对对象的任意属性进行缓动,功能类似于 cc.Action(动作系统)。但是 cc.tween 会比 cc.Action 更加简洁易用,因为 cc.tween 提供了链式创建的方法,可以对任何对象进行操作,并且可以对对象的任意属性进行缓动。
但类型定义文件不完善~等官方修复不知道要什么时候,毕竟排期可能不是特别优先
问题及解决方法
为了支持Typescript以及高效开发,cocos有类型定义文件creator.d.ts,但是只有类的声明,所以直接用其中的方法tween(target?: any): Tween;
会报错,所以需要修改一下d.ts文件,或者新建一个d.ts从模块出导出该方法便可以使用
1、tween无法找到 :属性“tween”在类型“typeof cc”上不存在
- 添加
export function tween(target?: any): Tween;
2、调用to方法:An argument for ‘opts’ was not provided
- 这个虽然会报错,但能运行,嫌提示烦可以改为可选参数,建议类似的方法里面的参数除了必要的其余全都改为可选参数
to(duration: number, props?: any, opts?: {progress: Function; easing: Function|string; }): Tween;
3、类型“{ easing: string; }”的参数不能赋给类型“{ progress: Function; easing: string | Function; }”的参数。 Property ‘progress’ is missing in type ‘{ easing: string; }’ but required in type ‘{ progress: Function; easing: string | Function; }’.
- 和上面一样,报错,但能运行,建议使用type来列出所需要使用的参数,例如:
type Ease="cubicOut" | "quintInOut"
- 然后替换
to(duration: number, props: any, opts: {progress: Function; easing: Function|Ease; }): Tween;
下面是creator.d.ts中修改后的Tween及其中的方法(直接复制替换完事):
/** !#en
Tween provide a simple and flexible way to create action.
Tween's api is more flexible than cc.Action:
- Support creating an action sequence in chained api,
- Support animate any objects' any properties, not limited to node's properties.
By contrast, cc.Action needs to create a new action class to support new node property.
- Support working with cc.Action,
- Support easing and progress function.
!#zh
Tween 提供了一个简单灵活的方法来创建 action。
相对于 Cocos 传统的 cc.Action,cc.Tween 在创建动画上要灵活非常多:
- 支持以链式结构的方式创建一个动画序列。
- 支持对任意对象的任意属性进行缓动,不再局限于节点上的属性,而 cc.Action 添加一个属性的支持时还需要添加一个新的 action 类型。
- 支持与 cc.Action 混用
- 支持设置 {{#crossLink "Easing"}}{{/crossLink}} 或者 progress 函数 */
export class Tween {
/**
!#en
Insert an action or tween to this sequence
!#zh
插入一个 action 或者 tween 到队列中
@param other other
*/
then(other: Action|Tween): Tween;
/**
!#en
Set tween target
!#zh
设置 tween 的 target
@param target target
*/
target(target: any): Tween;
/**
!#en
Start this tween
!#zh
运行当前 tween
*/
start(): Tween;
/**
!#en
Stop this tween
!#zh
停止当前 tween
*/
stop(): Tween;
/**
!#en
Clone a tween
!#zh
克隆当前 tween
@param target target
*/
clone(target?: any): Tween;
/**
!#en
Add an action which calculate with absolute value
!#zh
添加一个对属性进行绝对值计算的 action
@param duration duration
@param props {scale: 2, position: cc.v3(100, 100, 100)}
@param opts opts
*/
to(duration: number, props?: any, opts?: tweenOpts): Tween;
/**
!#en
Add an action which calculate with relative value
!#zh
添加一个对属性进行相对值计算的 action
@param duration duration
@param props {scale: 2, position: cc.v3(100, 100, 100)}
@param opts opts
*/
by(duration: number, props?: any, opts?: tweenOpts): Tween;
/**
!#en
Directly set target properties
!#zh
直接设置 target 的属性
@param props props
*/
set(props: any): Tween;
/**
!#en
Add an delay action
!#zh
添加一个延时 action
@param duration duration
*/
delay(duration: number): Tween;
/**
!#en
Add an callback action
!#zh
添加一个回调 action
@param callback callback
*/
call(callback: Function): Tween;
/**
!#en
Add an hide action
!#zh
添加一个隐藏 action
*/
hide(): Tween;
/**
!#en
Add an show action
!#zh
添加一个显示 action
*/
show(): Tween;
/**
!#en
Add an removeSelf action
!#zh
添加一个移除自己 action
*/
removeSelf(): Tween;
/**
!#en
Add an sequence action
!#zh
添加一个队列 action
@param actions actions
*/
sequence(actions: [Action|Tween]): Tween;
/**
!#en
Add an parallel action
!#zh
添加一个并行 action
@param actions actions
*/
parallel(actions: [Action|Tween]): Tween;
/**
!#en
Add an repeat action.
This action will integrate before actions to a sequence action as their parameters.
!#zh
添加一个重复 action,这个 action 会将前一个动作作为他的参数。
@param repeatTimes repeatTimes
@param action action
*/
repeat(repeatTimes: number, action?: Action|Tween): Tween;
/**
!#en
Add an repeat forever action
This action will integrate before actions to a sequence action as their parameters.
!#zh
添加一个永久重复 action,这个 action 会将前一个动作作为他的参数。
@param action action
*/
repeatForever(action?: Action|Tween): Tween;
/**
!#en
Add an reverse time action.
This action will integrate before actions to a sequence action as their parameters.
!#zh
添加一个倒置时间 action,这个 action 会将前一个动作作为他的参数。
@param action action
*/
reverseTime(action?: Action|Tween): Tween;
/**
@param target the target to animate
*/
tween(target?: any): Tween;
}
/**
*
*导出 tween方法
*
* */
export function tween(target?: any): Tween;
type Ease = "linear" | "fade" |
"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";
type tweenOpts = {
progress?: Function;
easing?: Function | Ease;
}