4

网页逐帧动画的实现方式

网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用JS控制,和单纯使用CSS实现,两者的优劣总体概括来说就是: JS动画可控性更强,但开销大,实现复杂。 CSS动画实现相对JS更简单。
常见的网页动画形式参考:mark? 9种网页动画常用实现方式总结
PS:江湖传言CSS动画性能更佳,可web环境过于复杂,哪个性能好可能需要参照具体情况测试, 这里有篇博客较为系统地阐述了css与JS动画在性能上的比较: mark? 消除疑问:CSS动画 VS JavaScript

另外在JS控制的动画中,又可分为JS控制的canvas动画, SVG动画,以及直接控制图片,元素的位置来实现的动画。一句话,JS动画更复杂。

CSS实现逐帧动画的原理

css逐帧动画是通过不断变换keyframes中每个阶段的背景来实现,比如0%处和100%处分别使用不同的background就实现了最简单的画面切换。 一般的做法是先将动画的不同帧做成一张雪碧图,然后不断变换background-position来达到变换效果, 但是直接使用会有这样的问题: css动画默认的动画过渡方式的平滑的,平滑的过渡对逐帧动画会造成类似滑动的效果,所以需要动画时间函数animation-timing-function中的steps属性来设置过渡方式,这里先上demo对比:

使用steps时间函数与常规时间函数实现逐帧动画的对比

这两个动画的区别仅在animation中时间函数参数:

.above:hover {
  -webkit-animation: run .6s steps(1,start) infinite;
}  /* 使用steps实现逐帧动画*/

.down:hover {
  -webkit-animation: run .6s linear infinite;
} /* 常规时间函数linear产生平滑的滑动效果*/

理解steps

对于steps属性的理解,我翻过好几篇博客,但有点越讲越邪乎,我的理解,该属性用于控制动画关键帧的过渡(补间)方式, 常规的css动画过渡,都是平滑的, 正如上面demo中所展示, 浏览器会自动为关键帧的间隔中插入补间动画(学过flash的朋友对这几个概念应该很熟悉) ,以便视觉上不会出现闪烁, css控制过渡方式的属性是animation-timing-function ,它的值除了可以设置贝塞尔曲线Cubic-bezier(类似的easelinear等也属于曲线函数) 还有就是我们的steps,该属性的语法为steps(number, start|end) 接受两个参数,第一个参数为正整数,将一段动画分成number段,第二个参数为为关键帧的变化位置, 默认为end,关于start和end的详细讲解也可以参考这里:
mark?CSS3 timing-function: steps() 详解

但上面这篇博客中的例子并不直观,我自己做了个例子,可能有助理解,steps将动画分成n段(n为第一个参数) 也就是设置补间动画的间隔数,比如从白色到黑色的过渡,常规曲线函数会渐进地补间其中的灰色, 而如果将设置为steps(2),则中间的补间只有一个rgb都为125的灰色,而startend可以理解为关键帧的跳跃时机, 设置为start的时候,关键帧在0秒完成跳跃,由于在0秒已经完成了跳跃,所以我们视觉上所见的也就是第一个关键帧之后的一帧,这也可以解释下面的demo(对比demo中steps的设置便于理解):
理解steps时间函数

扯得太远,让我们回到逐帧动画, 以上demo解释了逐帧动画的实现基础,也就是将其第一个参数设为steps(1) ,意味着将不对动画分段,也就是不插入补间动画,这样也就实现了逐帧播放,由于steps这个特性,反之,如果我们将动画只设置两个关键帧,由steps(4)来分段,那么就省去了手动设置keyframes中的百分比关键帧。
于是在对比demo中,我们可以加入另一个实现同样效果的动画:

@keyframes run2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -800px 0; /* 直接将后关
    键帧设置为图片末尾,在animation属性设置中就可以利
    用steps分段的特性来省去手动设置keyframes
    */
  }
 
}

附一篇类似博客作参考:
mark? CSS3 实现奔跑动画
这博客今天写得貌似很啰嗦,回家吃饭了~


囧囧
1.9k 声望132 粉丝

蚂蚁金服海外银行诚招前端: