cocos creator新缓动系统-cc.tween

前言

一直对于cocos creator的action系统有着深深的埋怨，原因是用起来太麻烦了。习惯了Unity的Tween插件的用法，我也试着自己封装了下action系统，用起来像Tween那样，具体参照Cocos Creator 游戏开发之action缓动系统的封装，看到cocos creator 2.0.9版本的之后推出了tween，心中那是无比的欢乐啊。

关于Tween

Tween 提供了一个简单灵活的方法来创建 action。相对于 Cocos 传统的 cc.Action，cc.Tween 在创建动画上要灵活非常多：

• 支持以链式结构的方式创建一个动画序列。
• 支持对任意对象的任意属性进行缓动，不再局限于节点上的属性，而cc.Action 添加一个属性的支持时还需要添加一个新的 action 类型。
• 支持与 cc.Action 混用。
• 支持设置 Easing 或者 progress 函数。

tween源码链接：https://github.com/cocos-creator/engine/blob/26031bddd1aecdbf9bbdebe19ecaa672b1c35061/cocos2d/actions/tween.js#L179

主要函数说明

• constructor
• stopAll 停止所有缓动
• stopAllByTag 停止所有指定标签的缓动
• stopAllByTarget 停止所有指定对象的缓动
• then 插入一个 action 或者 tween 到队列中
• target 设置 tween 的 target
• start 运行当前 tween
• stop 停止当前 tween
• tag 设置缓动的标签
• clone 克隆当前 tween
• union 将之前所有的 action 整合为一个 action。
• bezierTo 按照贝塞尔路径设置目标的 position 属性。
• bezierBy 按照贝塞尔路径设置目标的 position 属性。
• flipX 翻转目标的 scaleX 属性
• flipY 翻转目标的 scaleY 属性
• blink 通过设置目标的 opacity 属性达到闪烁效果
• to 添加一个对属性进行绝对值计算的 action
• by 添加一个对属性进行相对值计算的 action
• set 直接设置 target 的属性
• delay 添加一个延时 action
• call 添加一个回调 action
• hide 添加一个隐藏 action
• show 添加一个显示 action
• removeSelf 添加一个移除自己 action
• sequence 添加一个队列 action
• parallel 添加一个并行 action
• repeat 添加一个重复 action，这个 action 会将前一个动作作为他的参数。
• repeatForever 添加一个永久重复 action，这个 action 会将前一个动作作为他的参数。
• reverseTime 添加一个倒置时间 action，这个 action 会将前一个动作作为他的参数。

实例以及用法

简单实例：

cc.tween(node)   //要进行缓动的节点
            .to(1, { scale: 2, position: cc.v3(100, 100, 100) })   //这里的意思是在1秒时间进行缩放和移动到指定数值
            .call(() => { console.log('This is a callback'); })    //完成上面动作的回调
            .by(1, { scale: 3, position: cc.v3(200, 200, 200) }, { easing: 'sineOutIn' })  //这里的意思是在1秒时间进行缩放和移动指定改变量
            .start();
            //to 对属性进行绝对值计算，最终的运行结果即是设置的属性值，即改变到某个值
            //by 对属性进行相对值计算，最终的运行结果是设置的属性值加上开始运行时节点的属性值，即变化值

从代码我们可以看出来，tween的用法比之间action的用法简洁了不是一点点啊。

cc.tween 的每一个 API 都会在内部生成一个 action，并将这个 action 添加到内部队列中，在 API 调用完后会再返回自身实例，这样就可以通过链式调用的方式来组织代码。

cc.tween 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列，所以 cc.tween 的链式结构是依次执行每一个 API 的，也就是会执行完一个 API 再执行下一个 API

cc.tween方法参数里是我们要缓动的节点，接着就是你想要什么效果就不断的进行链式调用就完事了。最后在后面加上start开启你的缓动动作。

当然，有可能有些人很讨厌这样很长的链式结构，我们也可以把你分离出来，最后再统一接上去

let scale = cc.tween().to(1, { scale: 2 });
        let rotate = cc.tween().to(1, { rotation: 90 });
        let move = cc.tween().to(1, { position: cc.v3(100, 100, 100) });
        // 先缩放再旋转再移动
        cc.tween(node).then(scale).then(rotate).then(move).start();

事件回调

可能有些同学想要在某个缓动有完成回调，或者每个缓动要想要一个完成回调，那我们在你想要回调的那个动作后面加上call方法就行。

let scale = cc.tween().to(1, { scale: 2 }).call(() => { console.log('scale complete'); })
        let rotate = cc.tween().to(1, { rotation: 90 }).call(() => { console.log('rotate commplete') })
        let move = cc.tween().to(1, { position: cc.v3(100, 100, 100) }).call(() => { console.log('move commplete') })
        // 先缩放再旋转
        cc.tween(this.root).then(scale).then(rotate).then(move).start();

这样他就会在前面的动作完成会进入到call回调方法里

easing

你可以使用 easing 来使缓动更生动，cc.tween 针对不同的情况提供了多种使用方式。

// 传入 easing 名字，直接使用内置 easing 函数
cc.tween().to(1, { scale: 2 }, { easing: 'sineOutIn'})

更多的内置缓动函数，我会在最后面放出来

同时执行多个属性

cc.tween(this.node)
    // 同时对 scale, position, rotation 三个属性缓动
    .to(1, { scale: 2, position: cc.v2(100, 100), rotation: 90 })
    .start()

那如果我要这三个属性动作的时间都是不一样的要怎么办，这时候我们就要用到parallel函数来进行分别处理

let t = cc.tween;
t(this.node)
    // 同时执行两个 cc.tween
    .parallel(
        t().to(1, { scale: 2 }),
        t().to(2, { position: cc.v2(100, 100) })
    )
    .call(() => {
        console.log('All tweens finished.')
    })
    .start()

cc.tween 在链式执行时是按照 sequence 的方式来执行的，但是在编写复杂缓动的时候可能会需要同时并行执行多个队列，cc.tween 提供了 parallel 接口来满足这个需求。

重复执行

repeat/repeatForever 函数会将前一个 action 作为作用对象。但是如果有参数提供了其他的 action 或者 tween，则 repeat/repeatForever 函数会将传入的 action 或者 tween 作为作用对象。

cc.tween(this.node)
    .by(1, { scale: 1 })
    // 对前一个 by 重复执行 10次
    .repeat(10)
    // 最后 node.scale === 11
    .start()

// 也可以这样用
cc.tween(this.node)
    .repeat(10,
        cc.tween().by(1, { scale: 1 })
    )
    .start()

// 一直重复执行下去
cc.tween(this.node)
    .by(1, { scale: 1 })
    .repeatForever()
    .start()

注意：这个只对于by有用，因为to是指定到的绝对值，而by是增加值

延迟执行

有时候，我们需要每个动作之间性需要延迟执行时间，这时候可以用到delay函数

cc.tween(this.node)
    // 延迟 1s
    .delay(1)
    .to(1, { scale: 2 })
    // 再延迟 1s
    .delay(1)
    .to(1, { scale: 3 })
    .start()

支持缓动任意对象的任意属性

let obj = { a: 0 }
cc.tween(obj)
  .to(1, { a: 100 })
  .start()

自定义 progress

相对于 easing，自定义 progress 函数可以更自由的控制缓动的过程。

// 对所有属性自定义 progress
cc.tween().to(1, { scale: 2, rotation: 90 }, {
  progress: (start, end, current, ratio) => {
    return start + (end - start) * ratio;
  }
})

// 对单个属性自定义 progress
cc.tween().to(1, {
  scale: 2,
  position: {
    value: cc.v3(),
    progress: (start, end, current, t) => {
      // 注意，传入的属性为 cc.Vec3，所以需要使用 Vec3.lerp 进行插值计算
      return start.lerp(end, t, current);
    }
  }
})

easing 内置缓动函数

缓动函数类，为 Tween 提供缓动效果函数。
函数效果演示： https://easings.net/

• quadIn 平方曲线缓入函数。
• quadOut 平方曲线缓出函数。
• quadInOut 平方曲线缓入缓出函数。
• cubicIn 立方曲线缓入函数。
• cubicOut 立方曲线缓出函数。
• cubicInOut 立方曲线缓入缓出函数。
• quartIn 四次方曲线缓入函数。
• quartOut 四次方曲线缓出函数。
• quartInOut 四次方曲线缓入缓出函数。
• quintIn 五次方曲线缓入函数。
• quintOut 五次方曲线缓出函数。
• quintInOut 五次方曲线缓入缓出函数。
• sineIn 正弦曲线缓入函数。
• sineOut 正弦曲线缓出函数。
• sineInOut 正弦曲线缓入缓出函数。
• expoIn 指数曲线缓入函数。
• expoOut 指数曲线缓出函数。
• expoInOut 指数曲线缓入和缓出函数。
• circIn 循环公式缓入函数。
• circOut 循环公式缓出函数。
• circInOut 指数曲线缓入缓出函数。
• elasticIn 弹簧回震效果的缓入函数。
• elasticOut 弹簧回震效果的缓出函数。
• elasticInOut 弹簧回震效果的缓入缓出函数。
• backIn 回退效果的缓入函数。
• backOut 回退效果的缓出函数。
• backInOut 回退效果的缓入缓出函数。
• bounceIn 弹跳效果的缓入函数。
• bounceOut 弹跳效果的缓出函数。
• bounceInOut 弹跳效果的缓入缓出函数。
• smooth 平滑效果函数。
• fade 渐褪效果函数。