贡献一个简单可用的cc.tween的d.ts定义

Creator 2.x
#1

考虑2.0.10版本下cc.tween的类型定义依然没有添加完全 在typescript下基本无法使用 这里贴一个自己写的d.ts定义

declare namespace cc {

    /** cc.tween方法 */
    function tween(target: cc.Node): NewTween;

    /** ease字符串,参考:https://docs.cocos.com/creator/api/zh/editor/share/easing.html */
    type tweenEasing = "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";

    /** 可选属性,参考:cc.Node */
    type tweenProps = Partial<cc.Node>;

    /** 可选参数 */
    type tweenOpts = {
        progress?: Function;
        easing?: Function | tweenEasing;
    }

    /** cc.Tween,为了区分开来使用cc.NewTween */
    class NewTween {
        then(other: Action | NewTween): NewTween;
        target(target: any): NewTween;
        start(): NewTween;
        stop(): NewTween;
        clone(target?: any): NewTween;
        to(duration: number, props?: tweenProps, opts?: tweenOpts): NewTween;
        by(duration: number, props?: tweenProps, opts?: tweenOpts): NewTween;
        set(props: tweenProps): NewTween;
        delay(duration: number): NewTween;
        call(callback: Function): NewTween;
        hide(): NewTween;
        show(): NewTween;
        removeSelf(): NewTween;
        sequence(actions: [Action | NewTween]): NewTween;
        parallel(actions: [Action | NewTween]): NewTween;
        repeat(repeatTimes: number, action?: Action | NewTween): NewTween;
        repeatForever(action?: Action | NewTween): NewTween;
        reverseTime(action?: Action | NewTween): NewTween;
        tween(target?: any): NewTween;
    }
}

https://github.com/fkworld/cocos-game-framework/blob/master/game.d.ts

注意:

  1. ease并没有完全测试过是否都可用(目前仅测试到elasticOutIn 这个不可用,会变成linear)
  2. tweenProps类型使用cc.Node的参数代替 并不知道具体的参数是什么
9赞
#2

昨晚想用这个api，发现ts版本完全无法使用，文档上的接口和ts导出的接口基本不一致，基本用不了这个模块，简直无语了，cocos发布真的好随意啊。

1赞
#3

这个不错

#4

mark

#5

多谢提供
官方没加 确实很不方便

#6

感谢楼主。官方几万年没更新d.ts了

#7

发现楼主真是好

#8

本是花费不了多少时间却能让开发者很方便使用的事，不知道官方为什就不能更新到creator.d.ts文件里，费了个劲……

#9

我说为什么按官网文档怎么都用不了tween……感谢楼主的分享！

#10

多谢楼主的d.ts 文件，官方的直接没法用，用你的d.ts文件搞定了项目的tween缓动

#11

我看官方和论坛没有一个 展示的代码的例子

我自己经过摸索 得到可以用的两个办法

第一个

this.node.scale = 0.5;
this.effectTween = cc.tween(this.node).to(0.3,{scaleX:1.0,scaleY:1.0},{progress:null,easing:cc.easing.backInOut}).start();

第二种

this.node.scale = 0.5;
this.effectTween = cc.tween(this.node).to(0.3,{scaleX:1.0,scaleY:1.0},{progress:null,easing:“backInOut”}).start();

#12

亲测，好用。不过美中不足的一点是：
cc.tween支持任意对象的任意属性，但这个定义仅支持cc.Node的属性

#13

把cc.Node改成any就行了

1赞
#14

更新一下：

declare namespace cc {
  /** cc.tween 方法 */
  export function tween<T>(target?: T): _FixTween<T>;

  /**
   * ease 字符串
   * - 参考:https://docs.cocos.com/creator/api/zh/editor/share/easing.html
   */
  type TweenEasing =
    | "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 _TweenProps<T> = Partial<T>;

  /** 可选参数
   * - 【注意】progress 函数中需要的类型一般为 number，未必一定是 number
   */
  type _TweenOpts = {
    easing?: TweenEasing | ((t: number) => number);
    progress?: (start: number, end: number, current: number, ratio: number) => number;
  };

  /**
   * 修复之后的 Tween 类，附带完整的类型提示
   * - 【注意】不包括 cc.Action，不要在使用 tween 时使用 action。
   */
  class _FixTween<T> {
    then(other: _FixTween<T>): this;
    target(target: T): this;
    start(): this;
    stop(): this;
    tag(tag: number): this;
    clone(target?: T): this;
    union(): this;
    bezierTo(duration: number, c1: Vec2, c2: Vec2, to: Vec2): this;
    bezierBy(duration: number, c1: Vec2, c2: Vec2, to: Vec2): this;
    flipX(): this;
    flipY(): this;
    blink(duration: number, times: number, opts?: _TweenOpts): this;
    to(duration: number, props?: _TweenProps<T>, opts?: _TweenOpts): this;
    by(duration: number, props?: _TweenProps<T>, opts?: _TweenOpts): this;
    set(props: _TweenProps<T>): this;
    delay(duration: number): this;
    call(callback: Function): this;
    hide(): this;
    show(): this;
    removeSelf(): this;
    sequence(...actions: _FixTween<T>[]): this;
    parallel(...actions: _FixTween<T>[]): this;
    repeat(repeatTimes: number, action?: _FixTween<T>): this;
    repeatForever(action?: _FixTween<T>): this;
    reverseTime(action?: _FixTween<T>): this;
  }
}

github地址也更新了：
https://github.com/fkworld/cocos-game-framework/blob/master/types/game.d.ts

我看到在2.4.0中已经有了pr：https://github.com/cocos-creator/engine/pull/6531，猜测在2.4.0版本中会更新完全，就不用用我这个了。

#15

战略mark