实现动画的几种方式

制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。

CSS transitions

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。

语法:

transition: property duration timing-function delay;
  1. property:填写需要变化的css属性如:width,line-height,font-size,color等;
  2. duration:完成过渡效果需要的时间(2s 或者2000ms)
  3. timing-function:完成效果的速度曲线(linear,ease,ease-in,ease-out等等)
  4. delay:动画开始之前的延迟

tansition抓住了所设置变化属性的起始态和完成态,通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性,默认为all,则所有变化的属性都会在出发时,以动画的形式展现出来。

CSS animation

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

语法:

animation: name duration timing-function delay iteration-count direction;
  1. name:keyframe的名称,也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。
  2. duration:完成动画所需要的时间(2s 或者 2000ms)
  3. timing-function:完成动画的速度曲线
  4. delay:动画开始之前的延迟
  5. iteration-count:动画播放次数
  6. direction:是否轮流反向播放动画(normal:正常顺序播放,alternate下一次反向播放)如果把动画设置为只播放一次,则该属性没有效果。

使用animation属性制作动画可以更加灵活的设置动画帧,通过不同keyframe(动画帧)的设置,实现很多优雅的效果,keyframe中的百分数是动画完成总时间的比例。

原生js动画

原生js动画利用js代码,将动画一步以函数的方式写出来,可以实现多种动画样式,而且可以自己做兼容性处理,自己设立每一步的动画效果,并且能够完成比较复杂的效果,但是代码量很大。

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

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

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

canvas动画

canvas作为H5新增元素,是借助Web API来实现动画的。canvas使用的地方非常多,尤其是在制作h5小游戏上。

同样都是使用编码的方式由前端开发工程师完成动画效果,canvas要比原生js效率高的多,流畅的多。通过画笔的方式,能够轻松的实现更多的动画效果。但是相对复杂。

相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页