通過時(shí)間扭曲實(shí)現(xiàn)緩動(dòng)動(dòng)畫

oogh 發(fā)布于2019-08-21 14:29 / 713人閱讀

摘要：通過時(shí)間扭曲實(shí)現(xiàn)緩動(dòng)動(dòng)畫經(jīng)常會(huì)見到各類緩動(dòng)函數(shù)，在里面有現(xiàn)成的等緩動(dòng)效果直接用。這次的實(shí)踐在一個(gè)封裝的基礎(chǔ)上，請(qǐng)參考精靈封裝緩動(dòng)動(dòng)畫的本質(zhì)，是在單位時(shí)間內(nèi)移動(dòng)不同的距離。

通過時(shí)間扭曲實(shí)現(xiàn)緩動(dòng)動(dòng)畫

經(jīng)常會(huì)見到各類緩動(dòng)函數(shù)，在CSS里面有現(xiàn)成的bounce、elastic等緩動(dòng)效果直接用。如果在canvas動(dòng)畫中，我們要實(shí)現(xiàn)這些緩動(dòng)函數(shù)。直接去思考怎么處理挺頭疼的，介紹一種不錯(cuò)的實(shí)現(xiàn)方式，源自《HTML5 Canvas核心技術(shù)》。

這次的實(shí)踐在一個(gè)封裝的基礎(chǔ)上，請(qǐng)參考：canvas精靈封裝

Begin

緩動(dòng)動(dòng)畫的本質(zhì)，是在單位時(shí)間內(nèi)移動(dòng)不同的距離。

一個(gè)簡單的公式：距離 = 速度 × 時(shí)間；

要實(shí)現(xiàn)距離緩動(dòng)，只有兩種方式：

要么保持時(shí)間正常流動(dòng)，實(shí)現(xiàn)速度緩動(dòng)；

要么保持速度不變實(shí)現(xiàn)時(shí)間扭曲；

下圖是elastic效果的距離與時(shí)間函數(shù)，我亂拿了一個(gè)三角函數(shù)圖像，忽略掉負(fù)軸就好

△V = △S / △T，理論上對(duì)距離/時(shí)間曲線進(jìn)行求導(dǎo)，得到速度的變化曲率，改變速度也能實(shí)現(xiàn)。

這次實(shí)現(xiàn)的是保持速度不變，扭曲時(shí)間實(shí)現(xiàn)緩動(dòng)：

1、每個(gè)動(dòng)畫時(shí)間固定，通過時(shí)間能獲取到動(dòng)畫進(jìn)度：

先給出時(shí)間扭曲函數(shù)：

f(x) = ((1 - cos(x * pi * 3)) * (1-x)) + x

轉(zhuǎn)換成代碼：

var makeElastic = function (passes) {// passes是跳動(dòng)的次數(shù)
       passes = passes || 3;
       return function (percentComplete) {
           return ((1-Math.cos(percentComplete * Math.PI * passes)) *
               (1 - percentComplete)) + percentComplete;
    };
};

函數(shù)圖像：

通過Sprite封裝的behavior來實(shí)現(xiàn)時(shí)間扭曲

var moveBall = {
        updateBallPosition: function(elapsed){
            if (arrow === LEFT){
                ball.left -= ball.velocityX * (elapsed/1000);
            } else{
                   ball.left += ball.velocityX * (elapsed/1000);
            }
        },
        execute: function(ball, context,time){
            // 核心！
            // 這里的animationElapsed是被扭曲過的時(shí)間
            // getElapsedTime()就是上面的makeElastic
            // 經(jīng)過一些封裝，傳入t得出扭曲過的時(shí)間
            var animationElapsed = pushAnimationTimer.getElapsedTime()，
                elapsed;
                
            elapsed = animationElapsed - this.lastTime;
            this.updateBallPosition(elapsed);
            
        }
    }