欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端动画解析

程序员文章站 2023-12-16 14:38:28
前端动画  1>javascript直接实现 主要思想是通过setinterval或settimeout方法的回调函数来持续调用改变某个元素的css样式以达到元素样式变化的效果。...

前端动画

 1>javascript直接实现

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


 

<script> let elem = document.getelementbyid('rect'); let left = 0; let timer = setinterval(function(){ if(left){>

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

 

2>svg(可伸缩矢量图形);

3>css3 transition;

4>css3 animation;

5>canvas动画;

6>requestanimationframe;

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


 

<script type="text/javascript"> window.requestanimationframe = window.requestanimationframe||window.mozrequestanimationframe||window.webkitrequestanimationframe||window.msrequestanimationframe; let elem = document.getelementbyid("rect"); let left = 0; //自动执行持续性回调 requestanimationframe(step); //持续该改变元素位置 function step() { if(left){>

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元素

8>总结

桌面端浏览器推荐使用javascript直接实现动画或svg方式;

移动端可以考虑使用css3transition、css3animation、canvas或requestanimationframe方式

上一篇:

下一篇: