这篇文章主要介绍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.万能动画:
$(…).animate(params,speed,callback)
params:一个包含样式属性及值的映射
speed:速度参数[可选]
callback:在动画完成时执行的函数[可选],回调函数中的this,指正在播放动画的当前DOM元素
以上是“web开发中可以实现前端动画的方法有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。