频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
前端动画解析
2018-08-22 10:08:13           
收藏   我要投稿

前端动画

 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(left7>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方式

点击复制链接 与好友分享!回本站首页
相关TAG标签 前端动画 解析
上一篇:SlingCMS学习之环境搭建
下一篇:jquery核心解析
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站