cocos creator typescript中使用Tween缓动方法报错解决方法

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;
    }

---

---