偶然发现一个国外的网站接入了天气板块，很有意思的是该网站所有的天气图标都是会动的。于是我便有了学（chao）习（xi）的念头，我们来一探究竟。一、顺藤摸瓜通过审查元素，我们很快定位到了一个叫 skycons 的 js 类库，顺藤摸瓜找到了 github 地址,顺手下载了一份 skycons.js 文件。OK，万事具备，下面我们开始分步剖析。二、简单示例首先，添加 canvas，并设置 id，以备后续使用，宽高可以随意设置，如下:其次，我们实例化 Skycons：然后，在我们的元素上通过 canvas id 来添加动画，并选择动画类型：最后，别忘了，播放它：通过调用 skycons.play() 来播放动画。这样，一个简单的示例就完成了，是不是很简单呢？下面我们来看看参数详解。三、参数详解可设置的天气类型参数：CLEAR_DAYPARTLY_CLOUDY_DAYCLOUDYRAINSLEETSNOWWINDFOG添加动画：播放动画：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.HTML5 之音频合成（Speech Synthesis）2.DevOps 简介3.前端反思录（三）—谈谈个人规划