高中物理学运动公式实现js动画

在网页上创建动画一般有两种方式：css和javascript。它们在创建动画的时间和性能上是不一样的，各有利弊。选择哪种方法实际上取决于项目，以及想要实现什么类型的动画。

一般使用css动画来实现比较简单的“一次性转换”，为UI元素转换比较小的独立状态。例如从侧面引入导航栏菜单，模太框弹出等。
要实现高级效果时，例如弹跳，加速，减速等比较复杂的动画，则使用Javascript动画。现在有很多比较好的JS动画框架，例如TweenMax,Velocity,animo.js,jquery。

不管是css还是javascript来创建动画，我们都会听到一个词“缓动”。自然界中没有东西从一点呈线性的移动到另一点，一般可能需要加速或减速。在经典动画中，经常会出现“缓入”，“缓出”，“缓入缓出”效果。缓动使动画不再那么尖锐或生硬。
css中，我们要想达到这些效果，只需要使用一些关键字：
* linear
* ease-in
* ease-out
* ease-in-out

那这么关键字的背后到底是什么原理呢？如何用javascript来实现这些缓动效果。

动画是关于时间的函数，本质就是利用浏览器和GPU的渲染过程定时改变元素的属性。

使用javascript实现动画时一般是使用requestAnimationFrame,我们可能经常也会用setInterval和setTimeout来实现动画，但是它们实现的动画都不会与屏幕的刷新率同步，并且很可能出现抖动和跳帧，例如jQuery就是采用setInterval来实现动画，所以jQuery动画的帧率会偏低（jQuery为甚么不采用RAF）。

“Talk is cheap, show me the code”。下面学习实现下月影总结的动画原理。原理简单，实现经典。

常见运动

1. 匀速运动

   让小球在2s内向右匀速移动200px

   • 时间： t = T * p
   • 位移: St = S * p = v * t
   • 速度: v = St / t = S / T
   • 加速度: a = 0

circle.on('click', function() {
   
    var self = this;
    var startTime = Date.now();
    var distance = 200;
    var T = 2000;
    requestAnimationFrame(function step() {
   
        var p = Math.min(1.0, (Date.now() - startTime) / T);
        self.style.transform = 'translateX(' + (distance * p) + 'px)';
        if(p < 1.0){
            requestAnimationFrame(step);
        }
    })
})

2.匀加速运动

让小球在2s内向右匀加速向右移动200px, 速度从0开始
* 时间: t = T * p
* 位移: St = S * p^2 = (S * t^2) / T^2
* 速度: v = (2*S / T^2) * t = 2Sp/T
* 加速度 a = 2*S / T^2

circle.on('click', function() {
   
        var self = this;
        var startTime = Date.now();
        var distance = 200;
        var T = 2000;
        requestAnimationFrame(function step() {
   
            var p = Math.min(1.0, (Date.now() - startTime) / T);
            self.style.transform = 'translateX(' + (distance * p * p) + 'px)';
            if(p < 1.0){
                requestAnimationFrame(step);
            }
        })
    })

3.匀减速运动

让小球在2s内向右匀减速向右移动200px, 速度从最大减为0
* 时间: t = T * p
* 位移: St = (2*S / T) * t - (S / T^2) * t^2 = Sp * (2 - p)
* 速度: v = 2*S / T - 2*S / t^2 * t
* 加速度 a = -2*S / T^2

circle.on('click', function() {
   
        var self = this;
        var startTime = Date.now();
        var distance = 200;