偶然发现一个国外的网站接入了天气板块,很有意思的是该网站所有的天气图标都是会动的。于是我便有了学(chao)习(xi)的念头,我们来一探究竟。
一、顺藤摸瓜
通过审查元素,我们很快定位到了一个叫 skycons
的 js
类库,顺藤摸瓜找到了 github 地址。美中不足的是,skycons
文档地址不能访问了,于是顺手下载了一份 skycons.js 文件。
OK,万事具备,下面我们开始分步剖析。
二、简单示例
首先,添加 canvas
,并设置 id
,以备后续使用,宽高可以随意设置,如下:
1 | <canvas id="jartto" width="128" height="128"></canvas> |
其次,我们实例化 Skycons
:
1 | let skycons = new Skycons({'color': 'pink'}); |
然后,在我们的元素上通过 canvas id
来添加动画,并选择动画类型:
1 | skycons.add('jartto', Skycons.PARTLY_CLOUDY_DAY); |
最后,别忘了:
1 | skycons.play(); |
通过调用 skycons.play() 来播放动画。
这样,一个简单的示例就完成了,是不是很简单呢?下面我们来看看参数详解。
三、参数详解
可设置的天气类型参数:
- CLEAR_DAY
- PARTLY_CLOUDY_DAY
- CLOUDY
- RAIN
- SLEET
- SNOW
- WIND
- FOG
添加动画:
1 | // 通过 canvas |
播放动画:
1 | skycons.play(); |
暂停动画:
1 | skycons.pause() |
动态更改 icon :
1 | skycons.set('jartto1', Skycons.PARTLY_CLOUDY_NIGHT); |
移除动画:
1 | skycons.remove('jartto2'); |
四、实际应用
为了更好的说明问题,我们来做一个天气板块:
首先,引入 skycons
文件:
1 | <script src="js/skycons.js" type="text/javascript"></script> |
其次,创建html结构:
1 | <ul class="box"> |
最后,添加 js 代码:
1 | let lists = ['CLEAR_DAY','CLEAR_NIGHT','PARTLY_CLOUDY_DAY','PARTLY_CLOUDY_NIGHT','CLOUDY','RAIN','SLEET','SNOW','WIND','FOG']; |
是不是很简单呢,更多请查看:代码地址。
五、问题汇总
1.实际的天气状况可能有很多,而 skycons 提供的选择并不多;
解决方案:合并同类的天气状况,可能的代码如下:
1 | switch (code) { |
六、源码分析
因为看不到文档,所以很好奇,大概瞅了一些源码。当然,也并不是一无所获,譬如:
1.requestAnimationFram
的兼容处理:
1 | var raf = global.requestAnimationFrame || |
2.add
方法:
1 | add: function(el, draw) { |
add
方法操作的是一个数组,也就意味着,我们只需要实例化一次 skycons
就可以添加多个 icons
。
3.定时器的时间设置技巧 1000 / 60,动画更加流畅:
1 | play: function() { |
起初不太理解作者为何要设置这个数值,后来才意识到:
大多数电脑显示器的刷新频率是 60 Hz,大概相当于每秒钟重绘 60 次。
大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是 1000 ms / 60,约等于 16.6 ms 。
4.各种 canvas 画太阳,云彩,风等方法,可以参考。
源码比较简单,详情请查看:源码地址