CocosCreator_动作动画 Tween

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

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

示例

cc.tween(node)
  .to(1, {scale: 2, position: cc.v3(100, 100, 100)})
  .call(() => { console.log('This is a callback'); })
  .by(1, {scale: 3, position: cc.v3(200, 200, 200)}, {easing: 'sineOutIn'})
  .start(cc.find('Canvas/cocos'));

停止并且移除节点所有正在运行的动作列表。

node.stopAllActions()

缓动效果 Easing 展示

https://easings.net/

常用方法（慢慢加）

• 开始播放动画 .start()
• 重复前一个动作 .repeat()
• 无限重复前一个动作 .repeatForever()
• 绝对变化 .to(持续时间, [变动属性], [缓动效果])
• 相对变化 .by(持续时间, [变动属性], [缓动效果])
• 调用方法 .call(() => {})
• 闪烁 .blink(持续时间，闪烁次数)
• 延迟 .delay(延迟时间)

效果例子（慢慢加）

等待2秒后，用1秒的时间横移100像素

cc.tween(node)
  .delay(2)
  .by(1, {position: cc.v2(100, 0)})
  .start()

以每3秒5次的频率，不停闪烁。

cc.tween(node)
  .blink(3, 5)
  .repeatForever()
  .start()

使用缓动横移，模拟冲刺效果。

cc.tween(node)
  .by(1, {position: cc.v2(100, 0)}, {easing: 'quintOut'})
  .start()