网页逐帧动画的实现方式
网页中的逐帧动画,大致可分为两大类的实现方式, 分别是使用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对比:
这两个动画的区别仅在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
(类似的ease
,linear
等也属于曲线函数) 还有就是我们的steps
,该属性的语法为steps(number, start|end)
接受两个参数,第一个参数为正整数,将一段动画分成number段,第二个参数为为关键帧的变化位置, 默认为end
,关于start和end的详细讲解也可以参考这里:
mark?CSS3 timing-function: steps() 详解
但上面这篇博客中的例子并不直观,我自己做了个例子,可能有助理解,steps
将动画分成n段(n为第一个参数) 也就是设置补间动画的间隔数,比如从白色到黑色的过渡,常规曲线函数会渐进地补间其中的灰色, 而如果将设置为steps(2),则中间的补间只有一个rgb都为125的灰色,而start
与end
可以理解为关键帧的跳跃时机, 设置为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 实现奔跑动画
这博客今天写得貌似很啰嗦,回家吃饭了~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。