互联网三网合一网站建设,淘宝推广软件哪个好,怎样查看网站服务商,网站空间 云端今天#xff0c;小学生以自己浅薄的见地#xff0c;在前辈大能的基础上写这篇文章#xff0c;希望给大家打开一扇窥探JavaScript#xff08;以下简称JS#xff09;动画的窗户。 JS如何制造出动画效果#xff1f; 结合浏览器提供的 setInterval 或 setTimeout API#xf… 今天小学生以自己浅薄的见地在前辈大能的基础上写这篇文章希望给大家打开一扇窥探JavaScript以下简称JS动画的窗户。 JS如何制造出动画效果 结合浏览器提供的 setInterval 或 setTimeout API高频改变DOM元素的一些属性即可创造一个肉眼可见的动画效果。一个看起来非常流畅的JS动画除了需要良好的变换算法外与其执行宿主也是非不开的。程序写得再好如果浏览器过于老旧电脑CPU性能低下也会出现卡顿甚至卡死。 执行一个动画函数对于浏览器来说是个苦差设置动画一帧为多长时间才能既流畅又不损耗性能呢浏览器不会傻到进行一个DOM操作就去渲染一次页面。它会把一个周期内所有的DOM操作整合起来统一进行一次渲染。这个周期大约在16.7ms左右不同浏览器间会有几毫秒的差异。SetTimeout的第二个参数设置为1000/60是比较合乎情理的做法。不过了解过SetTimeout运行机制的都会清楚这个时间并不可靠其根据实际情况会有些许甚至相当大的延迟。那么有没有这样一个API我不想知道你浏览器到底多久渲染一次反正你渲染的时候给我的动画执行一帧就行了。答案是有requestAnimationFrame可以让函数随着浏览器渲染执行并且执行时机是可靠的。注意这个方法在现在浏览器及IE10才被支持。 现在可以封装起一个简单的requestAnimationFrame下面的例子中将会使用到它。 window.requestAnimFrame (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ){window.setTimeout(callback, 1000 / 60);};
})(); 更加详细的封装可以在张鑫旭的博客中看到张鑫旭requestAnimFrame。下面让我们继续。 动画函数的编写 有了requestAnimationFrame下面该考虑一下如何让写动画函数了。一般来说我们会给出一个毫秒级的during值限制这个动画必须要在这个时间内完成。下面以实现一个小球从离页面左侧100px处匀速运动到800px处为例编写一个动画函数戳我查看DEMO。 var ele document.getElementById(block);var start Date.now();//获取动画开始的时间。var during 1000; //此动画要在1秒内执行完。var p0;//动画完成度 从0-1requestAnimationFrame(function f(){if(p1){ ele.style.left800px;}//如果发现动画已经执行完将元素置到终点。else{p(Date.now()-start)/during;ele.style.left100700*ppx; //从100px开始匀速向右移动共移动700px;requestAnimationFrame(f);}}) 上面函数中有一个关键变量p即percentage我们可以称它为动画的完成度它是根据当前时间计算得出的并且从动画开始后会从0~1匀速渐变。当其为1时表示整个动画执行完毕。在这个函数中让p乘以要运动的长度700便会得到一个0-700匀速变化的值将其加上开始的100便可模拟小球从100px处匀速移动到800px处。 设想一下假如上面红色标出的运动方程改为“ele.style.left100700*p*ppx”呢p以二次方渐增小球向右移动的速度会越来越快。是的稍加修改便可实现一个匀加速运动的小球。 下面我们就是要针对p来做文章。 Tween算法及缓动效果 下面我将列举一些常用的缓动算法根据这些算法去修改上面匀速运动函数的运动方程即可实现很赞的动画效果。 2次方缓动 p*p3次方缓动 p*p*p4次方缓动 p*p*p*p5次方缓动 p*p*p*p*p正弦曲线缓动 Math.sin(p*Math.PI/2)指数曲线缓动 Math.pow(2,10*(p-1))圆形曲线缓动 Math.sqrt(1-(p-1)*(p-1))超范围三次方 p*p*(2.70158*p-1.70158) 验证一下吧比如我现在想实现一个小球向右运动有一个向左蓄力的动画我只要把第一个demo的运动方程改为“ele.style.left100700*p*p*(2.70158*p-1.70158)px”就行了看看效果吧戳我查看DEMO。 其实每种缓动算法都可以进化为三种缓动方式分别为ease-in先慢后快ease-out先快后慢ease-in-out先慢后快再慢。 以2次方缓动为例它本身就是一个匀加速的过程所以ease-in就是p*p。其ease-out为-(p*(p-2))。关于缓动方式像阳光一样在他的博客中有更加详细的解释JavaScript动画、运动算法详细解释与分析。 接下来要放大招了关于缓动的整合DEMO戳我吧。 JS动画可以做什么? 除了上面的缓动效果利用常见的数学公式还可以实现一些周期性运动效果例如小球匀速圆周运动小球匀速简谐振动等如果感兴趣请猛戳DEMO。 那么JS动画可以做什么呢这就需要发挥我们的个人想象力了上面的DEMO大部分都在操控单一的属性比如left让DOM元素发生位移。事实上在运动方程中元素的任何style都可以被渐变。试想一下设置一个DOM元素的opacity从0~1进行2次方缓动便是一个简单的jQuery fadeOut函数让一个DOM元素高度从无到有便是一个简单的jQuery slideDown函数。更加不要忘记的是在动画过程中不仅仅可以操作一项属性这为动画带来了无限的可能性事情变得越来越有趣了DEMO一个从小到大变化的球。 再试想一下使用CSS3属性例如box-shadowtransform作出的效果必将会更加绚丽。 总结 上面提到使用CSS3属性其实如果这个浏览器支持CSS3属性的话其实可以考虑完全使用CSS3实现一个动画。CSS3自有Animation动画属性可以简单快捷地实现酷炫的动画效果并且可以启用GPU加速。美中不足的是仅现代浏览器支持而JS实现动画胜在可以兼容低版本浏览器。 作者于2015年6月19号增加上面将JavaScript动画与CSS3动画的比较并不是特别严谨更严谨的说法请移步我的博客实现了一个百度首页的彩蛋——CSS3Animation简介。 动画仅仅是JS操作DOM魅力之冰山一角而数学与计算机总是能碰撞出耀眼的火花。继续学习JS吧这是一门神奇的语言同时也应该了解一些数学知识往往能够为解决事情带来捷径。 完转载于:https://www.cnblogs.com/dongtianee/p/4552868.html
