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開發中可以實現前端動畫的方法有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！