偶然发现一个国外的网站接入了天气板块，很有意思的是该网站所有的天气图标都是会动的。
于是我便有了学（chao）习（xi）的念头，我们来一探究竟。
一、顺藤摸瓜
通过审查元素，我们很快定位到了一个叫 skycons 的 js 类库，顺藤摸瓜找到了 github 地址,顺手下载了一份 skycons.js 文件。
OK，万事具备，下面我们开始分步剖析。
二、简单示例
首先，添加 canvas，并设置 id，以备后续使用，宽高可以随意设置，如下:
其次，我们实例化 Skycons：
然后，在我们的元素上通过 canvas id 来添加动画，并选择动画类型：
最后，别忘了，播放它：
通过调用 skycons.play() 来播放动画。
这样，一个简单的示例就完成了，是不是很简单呢？下面我们来看看参数详解。
三、参数详解
可设置的天气类型参数：
- CLEAR_DAY
- PARTLY_CLOUDY_DAY
- CLOUDY
- RAIN
- SLEET
- SNOW
- WIND
- FOG
添加动画：
播放动画：
skycons.play();
暂停动画：
skycons.pause()
动态更改 icon ：
skycons.set('jartto1', Skycons.PARTLY_CLOUDY_NIGHT);
为什么要动态更改，因为天有不测风云，你的天气信息一定要及时。
移除动画：
skycons.remove('jartto2');
四、实际应用
为了更好的说明问题，我们来做一个天气板块的完整示例：
首先，引入 skycons 文件：
其次，创建html结构：
最后，添加 js 代码：
是不是很简单呢，更多请查看 Demo：
https://github.com/chenfengyanyu/my-web-accumulation/tree/master/skycons
五、问题汇总
1.实际的天气状况可能有很多，而 skycons 提供的选择并不多；
解决方案：合并同类的天气状况，可能的代码如下:
六、源码分析
因为看不到文档，所以很好奇，大概瞅了一些源码。当然，也并不是一无所获，譬如：
1.requestAnimationFram 的兼容处理：
2.add 方法：
add 方法操作的是一个数组，也就意味着，我们只需要实例化一次 skycons 就可以添加多个 icons 。
3.定时器的时间设置技巧 1000 / 60，动画更加流畅：
起初不太理解作者为何要设置这个数值，后来才意识到：
大多数电脑显示器的刷新频率是 60 Hz，大概相当于每秒钟重绘 60 次。
大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。
因此，最平滑动画的最佳循环间隔是 1000 ms / 60，约等于 16.6 ms 。
4.各种 canvas 画太阳，云彩，风等方法，可以参考。
源码比较简单，详情请查看：
https://github.com/chenfengyanyu/my-web-accumulation/blob/master/skycons/skycons.js
七、效果一览
是不是很有意思，快来试试吧！附上 Demo 地址：
https://github.com/chenfengyanyu/my-web-accumulation/tree/master/skycons
1.
2.
3.
閱讀更多 F2EAwesome 的文章
