Cocos_Creator 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()