w3ctech

js网页动画实现的一些心得

　　工作中经常会需要做一些网页动画效果，偷懒的话当然可以使用jquery的animate函数，但是很多时候还是会想自己去研究一下动画的实现。

　　动画的基本原理就是随着时间的推移改变画面的内容，其中主要会用到两个概念：关键帧和缓动——用计算机来实现的动画基本上都是这样，从一个关键帧经过一定的间隔变为另一个关键帧，而中间的过程则通过缓动函数来表现。

　　下面说说具体实现，用js实现动画的话，主要会用到setInterval和Date.now（或者new Date().getTime），setInterval定时执行间隔函数，而Date.now则主要用来校准时间，因为setInterval的实际执行间隔并不能保证精确地等于设定的执行间隔，所以需要在开始动画之前记录开始时间，每次执行间隔函数的时候重新获取Date.now并与开始时间进行比对，以确认精确的时间进度，当发现时间进度大于或等于动画时长时则终止动画进程。

　　缓动函数，网上可以找到很多（最流行的就是Robert Penner大神的作品），可以直接拿来使用。不过我这里简单提一下缓动函数的实现原理，了解这个原理的话，自己也可以写一些有趣的效果。缓动函数不管接收多少个参数，最终的目的都是一样的，就是把线性0到1的数值，按照算法转换成另一套数值，而转换的结果可以大于1或小于0，但是要遵循一点，就是输入0必须返回0，输入1必须返回1。

w3ctech微信

扫码关注w3ctech微信公众号

共收到3条回复

  • 裕波 2014-07-02 18:05

    赞，不过怎么分类是意见和建议呢？

    回复此楼

  • 奔波儿灞 2014-07-02 18:30

    改了……

    回复此楼

  • 裕波 2014-07-03 16:45

    现在不是都已经这样写了吗？

    window.requestAFrame = (function () {
    return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            // if all else fails, use setTimeout
            function (callback) {
                return window.setTimeout(callback, 1000 / 60); // shoot for 60 fps
            };
})();

window.cancelAFrame = (function () {
    return window.cancelAnimationFrame ||
            window.webkitCancelAnimationFrame ||
            window.mozCancelAnimationFrame ||
            window.oCancelAnimationFrame ||
            function (id) {
                window.clearTimeout(id);
            };
})();
    回复此楼