经由过程时候歪曲完成缓动动画

常常会见到各种缓动函数，在CSS内里有现成的bounce、elastic等缓动结果直接用。如果在canvas动画中，我们要完成这些缓动函数。直接去思索怎样处置惩罚挺头疼的，引见一种不错的完成体式格局，源自《HTML5 Canvas中心技术》。

此次的实践在一个封装的基础上，请参考：canvas精灵封装

Begin

缓动动画的实质，是在单元时候内挪动差别的间隔。

一个简朴的公式：间隔 = 速率 × 时候；

要完成间隔缓动，只要两种体式格局：

• 要么坚持时候一般活动，完成速率缓动；

• 要么坚持速率稳定完成时候歪曲；

下图是elastic结果的间隔与时候函数，我乱拿了一个三角函数图象，疏忽掉负轴就好

△V = △S / △T，理论上对间隔/时候曲线举行求导，获得速率的变化曲率，转变速率也能完成。

此次完成的是坚持速率稳定，歪曲时候完成缓动：

1、每一个动画时候牢固，经由过程时候能获取到动画进度：

先给出时候歪曲函数：

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

转换成代码：

var makeElastic = function (passes) {// passes是跳动的次数
       passes = passes || 3;
       return function (percentComplete) {
           return ((1-Math.cos(percentComplete * Math.PI * passes)) *
               (1 - percentComplete)) + percentComplete;
    };
};

函数图象：

经由过程Sprite封装的behavior来完成时候歪曲

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是被歪曲过的时候
            // getElapsedTime()就是上面的makeElastic
            // 经由一些封装，传入t得出歪曲过的时候
            var animationElapsed = pushAnimationTimer.getElapsedTime()，
                elapsed;
                
            elapsed = animationElapsed - this.lastTime;
            this.updateBallPosition(elapsed);
            
        }
    }