css3-animation实现动画的逐帧检测
程序员文章站
2022-03-16 16:14:21
...
写在前面
最近在面试的时候被面试官问到“如何使用css3 animation 来实现一个动画的逐帧检测”，自己支支吾吾的回答了下， 下来之后赶紧查了下API文档，以及翻阅了一些博客后，对其有了如下的整理。
关于animation的一写属性值，我们可以在w3c、 菜鸟教程上面自行查阅。
使用animation来实现逐帧检测
在了解了animation的属性后，我们可以自己写一个动画跑起来观察下效果，了解下其过程，代码如下：
<html>
<head>
<style>
@keyframes run {
from { background-position: 0 0; }
to {background-position: -1540px 0;}
}
div{
width: 140px;
height: 140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png);
animation: run 1s infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
实现的效果如下：
在这个GIF图里面，我们可以明显的看出来，动画每一帧之间的跑动都是平滑的，这是因为在animation属性中，默认以ease(平滑)的方式进行过渡，当然这并不是我们想要的结果，我们需要在每一帧中间自己来手动过渡，解决的方法如下：
@keyframes run {
0%, 8% {//过渡到自己想要的那个动作上面}
9.2%，17.2% {// 每个动作之间相隔1.2个帧，动作之间停留8个帧}
}
可能这么说大家还不是很清楚，那么我们来上图，看看到底是怎么回事，图片如下：
从这幅图我们清楚，逐帧动画就是通过一帧一帧的显示动画的图像序列，利用人的视觉暂留原地而实现运动的，了解了其原理，我们可以利用以上的方法来实现如下的代码：
<!DOCTYPE html>
<html>
<head>
<title>css3的逐帧检测</title>
<style>
@keyframes run {
0%, 8% {
background-position: 0 0;
}
9.2%, 17.2% {
background-position: -140px 0;
}
18.4%, 26.4% {
background-position: -280px 0;
}
27.6%, 35.6% {
background-position: -420px 0;
}
36.8%, 44.8% {
background-position: -560px 0;
}
46%, 54% {
background-position: -700px, 0;
}
55.2%, 63.2% {
background-position: -840px, 0;
}
64.4%, 72.4% {
background-position: -980px, 0;
}
73.6%, 81.6% {
background-position: -1120px, 0;
}
82.8%, 90.8% {
background-position: -1400px, 0;
}
92%, 100% {
background-position: -1540px, 0;
}
}
@-webkit-keyframes run {
0%, 8% {
background-position: 0 0;
}
9.2%, 17.2% {
background-position: -140px 0;
}
18.4%, 26.4% {
background-position: -280px 0;
}
27.6%, 35.6% {
background-position: -420px 0;
}
36.8%, 44.8% {
background-position: -560px 0;
}
46%, 54% {
background-position: -700px, 0;
}
55.2%, 63.2% {
background-position: -840px, 0;
}
64.4%, 72.4% {
background-position: -980px, 0;
}
73.6%, 81.6% {
background-position: -1120px, 0;
}
82.8%, 90.8% {
background-position: -1260px, 0;
}
92%, 100% {
background-position: -1400px, 0;
}
}
div {
width: 140px;
height: 140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png);
animation: run 5s infinite;
-webkit-animation: run 1s infinite;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
实现效果如下：
那么现在这个效果也就是我们所需要的，其将十二幅图像序列展示成动画效果。
使用steps()（帧之间的阶跃动画）来实现逐帧检测
这个方式是在一个博客里面看到的，但真的很好用。
- steps(1，start)表示从动画一开始便能够跳到100%，直至这一帧结束。
- steps(1，end)动画从一开始便跳到0%，直到这一帧结束。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
div{
width:140px;
height:140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
效果和上述代码的实现是一致的。
以上两种方法都能够很好地实现，当然如果有不同方法的，欢迎留言评论。