时间轴扭曲34

/*
    其就是根据固定的时间用不同的公式计算出当时的速度，时间扭曲函数其实就是用公式计算不同的时间，这样v=gt，计算出的速度就不是匀速的了，HTML5不支持补间动画，所以需要人为来实现。最多详细的扭曲函数参考：AnimationTimer.js
*/

    var ANIMATION_DURATION = 1000;
    var pushTimer = new AnimationTimer(ANIMATION_DURATION);
    function animate(){
        var elapsed;
        if (!pushTimer.isOver()){
            updateAnimation(pushTimer.getElapsedTime());//更新时间，根据这个时间来更新动画的位置，这块需要调用getElapsedTime这个时间方法
        }
        window.requestNextAnimationFrame(animate);
    }
    pushTimer.start();
    window.requestNextAnimationFrame(animate);
    
    var linear    = AnimationTimer.makeLinear(),
    easeIn    = AnimationTimer.makeEaseIn(1),
    easeOut   = AnimationTimer.makeEaseOut(1),
    easeInOut = AnimationTimer.makeEaseInOut(),
    elastic   = AnimationTimer.makeElastic(4),
    bounce    = AnimationTimer.makeBounce(5),
    pushTimer.timeWarp = bounce;
    
    
    
    //一个简单的例子
    execute: function (sprite, context, time) {
         var now = +new Date();
         if (this.lastFrameTime == undefined) {
            this.lastFrameTime = now;
            return;
         }

         if (pushAnimationTimer.isRunning()) {
            if (arrow === LEFT) sprite.left -= sprite.velocityX / fps;
            else                sprite.left += sprite.velocityX / fps;

             sprite.left -= sprite.velocityX / fps;
            if (isBallOnLedge()) {
               if (pushAnimationTimer.getElapsedTime() > 200) {//getElapsedTime逝去的时间
                  //pushAnimationTimer.stop();
               }
            }
            else if ( ! fallingAnimationTimer.isRunning()) {
               startFalling();
               this.lastFrameTime = now;
            }
         }

         if (fallingAnimationTimer.isRunning()) {
            sprite.top += sprite.velocityY / fps;
            sprite.velocityY = GRAVITY_FORCE *
               (fallingAnimationTimer.getElapsedTime()/1000) * pixelsPerMeter;

            if (sprite.top > canvas.height) {
               stopFalling();
            }
         }
      }