前端实现动画有哪些方式?

306 阅读3分钟

前端常用的动画实现方式有以下种:

  1. css3的transition 属性
  2. css3的animation 属性
  3. 原生JS动画
  4. 使用canvas绘制动画

1.css3的transition

image.png transition:1s; 等价于 transition: all 1s ease 0;

其中timing-function的值有如下:

描述
linear匀速(等于 cubic-bezier(0,0,1,1))
ease从慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))
ease-in慢慢变快(等于 cubic-bezier(0.42,0,1,1))
ease-out慢慢变慢(等于 cubic-bezier(0,0,0.58,1))
ease-in-out先变快再到慢(等于 cubic-bezier(0.42,0,0.58,1)),渐显渐隐效果
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

例子:

transition-property: width, height, background-color, border-width; 
transition-duration: 2s; 
transition-timing-function: ease-in; 
transition-delay: 500ms;

transform 转变动画

包含四个常用的功能:

  • translate:位移
  • scale:缩放
  • rotate:旋转
  • skew:倾斜

一般配合transition过度使用

transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);

3.css3的animation

animation属性与transition属性的区别:

  • transition只需指定动画的开始和结束状态,整个动画的过程是由特定的函数控制,你不用管它。
  • animation可以对动画过程中的各个关键帧进行设置

image.png

transition(过度)用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同
transform(变形)用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”
translate(移动)只是transform的一个属性值,即移动
animation(动画)用于设置动画属性,他是一个简写的属性,包含6个属性

3. 原生JS动画

4. 使用canvas绘制动画

总结:

  • 代码复杂度方面简单动画:css代码实现会简单一些,js复杂一些。 复杂动画的话:css代码就会变得冗长,js实现起来更优。
  • 动画运行时,对动画的控制程度上 js 比较灵活,能控制动画暂停,取消,终止等css动画不能添加事件,只能设置固定节点进行什么样的过渡动画。
  • 兼容方面 css 有浏览器兼容问题js大多情况下是没有的。
  • 性能方面 css动画相对于优一些,css 动画通过GUI解析js动画需要经过js引擎代码解析,然后再进行 GUI 解析渲染。

CSS动画和JS实现的动画分别有哪些优缺点?

CSS动画

优点

  • 浏览器可以对动画进行优化
  • 代码相对简单,性能调优方向固定
  • 对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码

缺点

  • 运行过程控制较弱,无法附加事件绑定回调函数
  • 代码冗长,想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

JS动画

优点

  • 控制能力很强, 可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。
  • 动画效果比css3动画丰富,有些动画效果,比如曲线运动,冲击闪烁,视差滚动效果,只有js动画才能完成
  • CSS3有兼容性问题,而JS大多时候没有兼容性问题

缺点

  • 代码的复杂度高于CSS动画
  • JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧的情况