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 漸褪效果函式，