如同前面的文章所讲，年报项目和其他项目有很大不同，开发过程中用到的工具也有所不同。这篇文章主要介绍我们在开发年报项目时用到的一些工具和方法。因为我们公司的设计师和前端都使用mac电脑，因此以下介绍的工具中有可能是macOS系统中特有的。
分解动画
不像其他我们常做的后端管理类网站，年报项目的动画非常多，设计师使用Adobe Premiere做好了动画导出为MP4格式的视频文件，我们再根据视频实现为网页动画，主要是CSS3动画，我们需要清楚地知道在动画从什么时候开始，持续多久。而视频文件播放时很快，很难察觉到这些信息。为此我们让设计师给我们做了动画分解，如下，
从动画分解中可以看出，动画为每秒30帧，并且设计师给出的时间也是按照“分:秒:帧”的格式给出的。为了方便获取毫秒数，我还特别在页面中注入了一个全局方法以方便获取毫秒数。需要注意的是计算持续时间不要直接使用“分:秒:帧”哦，还是老老实实换算成毫秒数再相减。因为这里的帧是30进制的，很容易出错，并且不容易被发现。1
2
3
4
5
6window.utils = {
ms(frame: string) {
const array = frame.split(':').map(s => Number(s));
return array[0] * 60 * 1000 + array[1] * 1000 + Math.round((array[2] * 1000) / 30);
}
}
在开发过程中还摸索到一个方法，就是macOS自带的QuickTime Player可以打开视频文件，并且可以通过左右两个方向键来实现按帧播放视频，对于我们研究动画效果非常方便。令我对macOS肃然起敬。
实现动画
使用CSS3实现了动画以后，有时候会感觉怪怪的，但是因为动画速度很快，就难以发现问题。如果你想到的时候修改代码延长动画时长，那就Out了。修改代码后如果忘记恢复，可能造成一个Bug；还有页面中的多个动画可能互相配合，你修改了一个动画时长可能使得整个页面更加不协调，更加不容易发现问题了。有幸的是Chrome控制台有一个叫做Animations的面板，通过它可以暂停动画，也可以将动画速度调慢到4倍（25%）或10倍（10%），让你更加清楚地看到动画是如何执行的。通过它还可以每一个元素的动画，还可以即时调整动画，不要太方便，太强大。
还有一个Rendering面板也非常有用，我常用的两个功能是显示帧速FPS meter和显示高亮重绘区域Paint flashing。
打开FPS meter选项后，我们可以看到页面多了一个信息面板，上面显示帧速和GPU使用情况，通过帧速我们可以看到这个页面的动画是否流畅，动画是否需要优化等。
打开Paint flashing选项后，如果某个元素被绿框遮盖，就说明它正在重绘。重绘是影响FPS的重要原因之一。当某个页面的FPS较低时，就可以去看看这个页面哪些元素正在重绘，能不能减少重绘？如果你有兴趣，可以参考谷歌的文档：简化绘制的复杂度、减小绘制区域。
OK，就介绍这么多，以后想到了其他方法再来补充。