web前端动画学习汇总:全方位学习web动画

前端动画开发，主要有下面五种开发方向

  1. css transition
  2. css animation
  3. js setTimeout
  4. js setInterval
  5. js requestAniamationFrame

今天正好利用空闲时间，对这些方面做一个全面的学习。

css transition 动画开发

transion主要用在元素 css 元素发生变化，需要一个过渡动画的场景。比如元素的高度发生了变化，而此时需要一个逐渐变高的动画，就很适合使用。比如传统网站需要展示鼠标的悬停效果，就可以使用hover.
比如下面改变粉色正方形盒子，当鼠标悬停在上面时，会逐渐从正方形变成圆形，并且有一个旋转，当点击一下时，则从正方形（圆）逐渐变成长方形（椭圆）。

transition是多个属性的简写形式，就像 background 一样。这些属性分别是transition-property， transition-duration， transition-timing-function，tansition-delay。

  • transition-property 需要过渡的 css 属性，比如上面例子种用到的 height，border-radius，transform等。也可以是 all，代指所有可以动画的 css 属性。可以用逗号分割写多个属性。
  • transition-duration 过度需要的时间，默认为 0s，可选时间有秒和毫秒，可以指定多个时长，用逗号分割，与transition-property定义的属性名对应。
  • transition-timing-function 用来控制变化的速度快慢。取值范围是缓动函数。

缓动函数(transition-timing-function)

缓动函数用来定义我们想要展现的动画变化的快慢程度，在 transition 和 animation 中我们都会用到。
正常情况下，可以直接使用已经定义好的缓动函数，而无需自定义。分别如下：

  • linear 全程匀速变化
  • ease 先平缓，然后加速，最后又变得平缓
  • ease-in 一开始慢，然后持续加速
  • ease-out 一开始快，后面慢
  • ease-in-out 先慢，后快，最后慢
  • 如果预定义的动画不能够满足需求，这个时候我们可以使用三次贝塞尔曲线cubic-Bezier()函数来自定义动画。三次贝塞尔函数一共有4个控制点，其中三个点已经被系统定义好了，我们只需要传入剩下的两个点即可。已经定义好的两个点分别是(0,0)和(1,1),我们自定义的两个点的x和y值，需要介于这-1到1之间。其中x代表的是时间比例，y代表的是速度。
  • 如果想要逐步变化的动画，可以使用steps(number, jumpterm)函数来实现, number用来控制分几步变化，jumpterm用来控制变化过程中的一些区别，可选参数如下
    • jump-start
    • jump-end
    • jump-none
    • jump-none
    • start
    • end

css Animation 动画

css Animation 可以用来实现多个样式，多种形态的转变。通过属性animation来指定描述规则和关键帧keyframe定义具体动画来实现。

animation属性值包括animation-name，animation-duration， animation-delay，animation-iteration-count，animation-direction，animation-play-state，animation-timing-function，animation-fill-mode组成。

animation-name 用来指定和关键针匹配的名字.
animation-duration 用来指定动画执行的时间长度，单位是s或者ms。
animation-delay 用来指定动画延迟多久实现，单位是s或者ms。
animation-iteration-count 用来设置动画重复的方式，具体参数可以是数字，来指定具体的次数，也可以是infinite，表示一直循环。
animation-direction 用来设置动画的播放方式，有normal，动画一直正常从开始的到结束。reverse，动画从结束的位置倒着回到开始。alternate，动画交替播放，alternate-reverse动画交替播放，第一是反的。
animation-timing-function 设置动画的播放曲率，见上面 缓动函数
animation-play-state 设置动画播放或者暂停，参数有running和paused
animation-fill-mode 用来指定执行后的样式 ，none，用设置好的样式，forwards的保留最后一帧样式，backwards，用第一帧的样式，both这个没明白,感觉和forwards一样。

setTimeout, setInterval, requestAniamationFrame

这三个都是用来做定时动画，间隔一定的时间进行刷新。区别在于三个函数本身。