web开发中可以实现前端动画的方法有哪些

这篇文章主要介绍web开发中可以实现前端动画的方法有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

　　1、javascript直接实现

　　主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

　　<divid="rect"></div>

　　<script>

　　letelem=document.getElementById('rect');

　　letleft=0;

　　lettimer=setInterval(function(){

　　if(left<window.innerWidth-200){

　　elem.style.marginLeft=left+'px';

　　left++;

　　}else{

　　clearInterval(timer);

　　}

　　},16);

　　</script>

　　缺点：javascript实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。

　　2、SVG（可伸缩矢量图形）；

　　3、css3transition；

　　4、CSS3animation；

　　5、canvas动画；

　　6、requestAnimationFrame；

　　requestAnimationFrame是另一种webapi，原理与setTimeout和setInterval类似，都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的api，在性能上比另两者要好。

　　<divid="rect"></div>

　　<scripttype="text/javascript">

　　window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.WEBkitRequestAnimationFrame||window.msRequestAnimationFrame;

　　letelem=document.getElementById("rect");

　　letleft=0;

　　//自动执行持续性回调

　　requestAnimationFrame(step);

　　//持续该改变元素位置

　　functionstep(){

　　if(left<window.innerWidth-200){

　　left+=1;

　　elem.style.marginLeft=left+"px";

　　requestAnimationFrame(step);

　　}

　　}

　　</script>

　　7、jq动画

　　1)显示隐藏:

　　.show(ms).hide(ms).toggle(ms)不带参数时默认瞬间显示隐藏，不带动画，原理:display属性实现的，带毫秒数参数:会有动画效果。

　　toggle显示被隐藏的元素，并隐藏已显示的元素

　　2）上滑下滑:.slideUp(ms).slideDown(ms).slideToggle(ms)

　　3）淡入淡出:.fadeIn(ms).fadeOut(ms).fadeToggle(ms)

　　2.万能动画:

　　$(&hellip;).animate(params,speed,callback)

　　params:一个包含样式属性及值的映射

　　speed:速度参数[可选]

　　callback：在动画完成时执行的函数[可选]，回调函数中的this，指正在播放动画的当前DOM元素

以上是“web开发中可以实现前端动画的方法有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网JavaScript频道！