怎么做呢?比如一个动画的执行时间是10s，那么在动画开始的时候，跑一个 setInterval 来不断的记录过渡状态，然后用当前跑到的值和总时长就能算出具体的进度了。这里要稍微注意一下，因为动画播放控制(animation-play-state)属性的存在，在暂停和重新播放时，需要对计时器稍微进行一下处理，否则得出的进度值会有错误。

　　这不是一个很完美的办法，因为在不同的性能下，计时器的值可能会有微弱误差，但如果你要求并不是很精确，还是可以尝试这个办法的。

　　二、如何 Perfect 的兼容各分辨率？

　　兼容各式屏幕一般有这样的办法：

　　还有这样的办法：

　　最后，还有传说中的弹性自适应布局：∑(O_O;)

　　但是，在这个需求上，统统不适用!为什么?

　　viewport 和 media Query 在 iOS 和 Android 上识别的单位不同，在 iOS 上识别的是“设备像素”，而在 Android 上识别的是“CSS像素”，这两个词后面会讲到。

　　因为这个页面游戏上有大量的元素用到绝对定位，如果使用弹性自适应布局的话，会进行大量的布局计算，而且还不一定精准。

　　所以，这里的解决办法是通过 discrimina.appVersion 获取 UA 信息中的关键字来判断不同的系统，针对不同的系统做不同的解决方案，Android 对最外层 div 进行 zoom 缩放，而 iOS 使用 viewport 缩放：

　　三、如何 Perfect 的识别平板和手机？

　　各设备上的布局问题解决了，但是如果设备屏幕比较大，你的图片是糊的，怎么办?

　　也许有的同学会举手说去检测 CSS 分辨率，但是这里就有问题了……有的老旧平板可能屏幕尺寸大，但 CSS 分辨率小;而有的新手机屏幕尺寸不如平板，但是 CSS 分辨率挺高，咋办?

　　回归现实，我们分辨平板和手机是以什么来分辨的?屏幕尺寸，对吧?那么我们这里也同样，只要想办法计算出访问者的屏幕尺寸即可，就是平常我们说的几寸屏…几寸屏的那个尺寸。

　　怎么获取那个尺寸呢?我们这里先来学习一些专业术语……

　　标红的“屏幕尺寸”是我们的目标，绿色的元素是我们后续会用到的东西，其中我们可以直接通过 JS 获取到的只有最后两项，即“设备像素”和“设备像素比”。

　　然后我们来看看“屏幕尺寸”的计算公示：

　　屏幕尺寸 = 屏幕对角线的CSS像素值/(设备像素比*PPI) = (√长²+宽²)/(设备像素比*PPI)

　　屏幕是矩形，矩形对角线的计算公示就是上方右侧那个公示;现在我们来看一下这个公示中用到的元素如何获得……

　　现在，万事俱备，就差 PPI，这东西虽然没有直接获取方式，但是我查了一下资料，还是得到了一些数据。

　　注意，这里给的是基准值，我们常说的 iPhone 多少多少 PPI，那个值是用基准值乘以设备像素比得出来的。由于 Android 手机厂商众多，并没有统一的标准，这里的 160 只是约等值，所以 Android 屏幕尺寸结果会有误差，但是基本也够用了。

　　现在公式中的所有要素都已经齐备了，具体在代码中实现，就是下面这样子：

　　得出的值，单位是“英寸”，我们根据这个值就可以考虑针对平板和手机等不同屏幕尺寸做不同的事情了，比如最基本的，换一套高清图……

　　四、音频之殇 (T^T)

　　这个小游戏中一共用到3类音频，共6个音频，且存在同时播放问题，iOS 下没问题，但是 Android 下会出现后播放的音频打断之前播放音频的问题。

　　我测试了一些设备，发现无迹可寻，有的老设备支持，新设备反而不支持。我的解决办法是 Android 用户仅播放关键音频，比如这个游戏当中就是背景音乐，其他的就不放了。因为没办法判断设备到底是否支持多音频同时播放……

　　五、形变+位移+旋转=？

　　刚才讲了“活捉兵马俑”那个游戏的一些经验技巧，现在讲讲几个 CSS 小属性搭配起来可以做的东西。

　　不可否认，做动画 Flash 是走在前面的，它的很多表现形式都值得我们借鉴，比如说这位豌豆射手。

　　这个豌豆的需求是一个双屏互动需求，PC 端使用 Flash 实现，移动端没办法用 Flash，所以动态效果我就照着临摹了下来。

　　具体做法是把豌豆拆成不同的小组件，然后再利用 animation、translate、scale、rotate，拼合出一个完整的动态效果，并没有多少技术含量，但几种属性的搭配使用，让这颗豌豆看起来还是挺赞的!

　　等于

　　所以，很多属性稍微搭配一下，其实就可以做出很好玩的东西。哈哈……

　　这个豌豆射手的小游戏体验地址：

　　六、其他一些小细节……

　　看了这么久的文章，你可能也累了，下面一些小细节快速过一下……