cocos creator新缓动系统-cc.tween

谭文林

2023-12-01

前言

一直对于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 渐褪效果函数。