工作中经常会需要做一些网页动画效果,偷懒的话当然可以使用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微信公众号
赞,不过怎么分类是意见和建议呢?
改了......
现在不是都已经这样写了吗?
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);
};
})();
共收到3条回复