深圳市博士通科技有限公司

你知道网页动画实现方式有些?

2020/11/5 9:04:50   阅读:2085    发布者:2085

一 、GIF图片


GIF图就直接贴上图片就好了,使用非常简单,但GIF图有时出现问题是没办法控制的,比如常见的GIF图的闪烁现象。


二 、SVG


SVG动画由SVG元素内部的元素属性控制,一般通过一下几个元素控制:
用于控制动画延时
对属性的连续改变进行控制
颜色变化,但用就能控制
控制如缩放、旋转等几何变化

控制SVG内元素的移动路径


三 、css animation


animation 算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制,页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。


四 、CSS3 transition


transition是过度动画。但是transition并不能实现独立的动画,只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡,而不是马上改变。

五 、requestAnimationFrame


requestAnimationFrame是另一种Web API,原理与setTimeout和setInterval类似,都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi


六 、Canvas


setInterval或setTimeout
javascript 函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果


七 、three.js