我们平时在开发前端页面的时候，经常会播放一段帧序列。这段帧序列就像gif图片那样，反复循环播放。那大家可能会说，直接用gif图片就好了，干嘛还去模拟呢？那是因为要做得更加灵活，我们要做到以下几点：
1、我们希望这段帧动画只循环播放所指定的次数。
2、我们希望帧动画结束的瞬间执行某种操作。这个在游戏中大量存在。
3、我们想自如的控制播放的速度。
4、我们想尽可能让这个帧动画的实现方式兼容大部分浏览器，在移动和pc端都能运行良好。
有了以上四点要求，那就不是gif图片所能完成的了。下面，我们先探讨有哪些技术可以实现我所说的功能。首先我们先准备好一张帧序列图片。如下图所示：
一、使用CSS3动画。
CSS3动画的timing-function里有一个step-end方式，可以不用缓慢过渡，而是直接以跳帧的方式实现变化。这个方式我认为是最省事
的办法了，然而在CSS3还未完全兼容的时代，step-end的兼容性更加差。就不说IE，我在智能机的几种基于webkit的低版本浏览器中测试时也
发现一些不兼容现象。考虑到css3的普及速度，此种方式依然值得大家学习。具体代码实现参考如下(篇幅考虑仅列出webkit的写法)：
<html>
<head>
<styletype="text/css">#anim{background-image: url(anim.png);width:120px;height:120px;-webkit-animation: auto-circle 0.5s step-end infinite;
}@-webkit-keyframes auto-circle{0%{
background-position-x: 0;
}20%{background-position-x: 120px;
}40%{background-position-x: 240px;
}60%{background-position-x: 360px;
}80%{background-position-x: 480px;
}100%{background-position-x: 600px;
}}style>
head>
<body>
<divid="anim">
div>
body>
html>
以上代码可以在chrome浏览器中正常运行，然而，不知大家注意到一个问题没有。从0%到100%，其实只播放了帧动画的5帧，第6帧没有播放。这是因
为100/6无法得到整数值，所以无法均等分割。这也是这种方式的局限之一。由于苹果谷歌对translate2d和translate3d都有较好的支
持甚至硬件加速，为了得到更好的性能，我们可以不用background-position，而使用CSS3中的Transforms。当然，这需要外层
套一个overflow:hidden;的div。改善后的代码如下所示：
最低0.47元/天 解锁文章
2537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
