然發(fā)現(xiàn)一個(gè)國(guó)外的網(wǎng)站接入了天氣板塊，很有意思的是該網(wǎng)站所有的天氣圖標(biāo)都是會(huì)動(dòng)的。

于是我便有了學(xué)（chao）習(xí)（xi）的念頭，我們來一探究竟。

一、順藤摸瓜

通過審查元素，我們很快定位到了一個(gè)叫 skycons 的 js 類庫，順藤摸瓜找到了 github 地址,順手下載了一份 skycons.js 文件。

OK，萬事具備，下面我們開始分步剖析。

二、簡(jiǎn)單示例

首先，添加 canvas，并設(shè)置 id，以備后續(xù)使用，寬高可以隨意設(shè)置，如下:

其次，我們實(shí)例化 Skycons：

然后，在我們的元素上通過 canvas id 來添加動(dòng)畫，并選擇動(dòng)畫類型：

最后，別忘了，播放它：

通過調(diào)用 skycons.play() 來播放動(dòng)畫。

這樣，一個(gè)簡(jiǎn)單的示例就完成了，是不是很簡(jiǎn)單呢？下面我們來看看參數(shù)詳解。

三、參數(shù)詳解

可設(shè)置的天氣類型參數(shù)：

• CLEAR_DAY
• PARTLY_CLOUDY_DAY
• CLOUDY
• RAIN
• SLEET
• SNOW
• WIND
• FOG

添加動(dòng)畫：

播放動(dòng)畫：

skycons.play();

暫停動(dòng)畫：

skycons.pause()

動(dòng)態(tài)更改 icon ：

skycons.set('jartto1', Skycons.PARTLY_CLOUDY_NIGHT);

為什么要?jiǎng)討B(tài)更改，因?yàn)樘煊胁粶y(cè)風(fēng)云，你的天氣信息一定要及時(shí)。

移除動(dòng)畫：

skycons.remove('jartto2');

四、實(shí)際應(yīng)用

為了更好的說明問題，我們來做一個(gè)天氣板塊的完整示例：

首先，引入 skycons 文件：

其次，創(chuàng)建html結(jié)構(gòu)：

最后，添加 js 代碼：

是不是很簡(jiǎn)單呢，更多請(qǐng)查看 Demo：

https://github.com/chenfengyanyu/my-web-accumulation/tree/master/skycons

五、問題匯總

1.實(shí)際的天氣狀況可能有很多，而 skycons 提供的選擇并不多；

解決方案：合并同類的天氣狀況，可能的代碼如下:

六、源碼分析

因?yàn)榭床坏轿臋n，所以很好奇，大概瞅了一些源碼。當(dāng)然，也并不是一無所獲，譬如：

1.requestAnimationFram 的兼容處理：

2.add 方法：

add 方法操作的是一個(gè)數(shù)組，也就意味著，我們只需要實(shí)例化一次 skycons 就可以添加多個(gè) icons 。

3.定時(shí)器的時(shí)間設(shè)置技巧 1000 / 60，動(dòng)畫更加流暢：

起初不太理解作者為何要設(shè)置這個(gè)數(shù)值，后來才意識(shí)到：

大多數(shù)電腦顯示器的刷新頻率是 60 Hz，大概相當(dāng)于每秒鐘重繪 60 次。

大多數(shù)瀏覽器都會(huì)對(duì)重繪操作加以限制，不超過顯示器的重繪頻率，因?yàn)榧词钩^那個(gè)頻率用戶體驗(yàn)也不會(huì)有提升。

因此，最平滑動(dòng)畫的最佳循環(huán)間隔是 1000 ms / 60，約等于 16.6 ms 。

4.各種 canvas 畫太陽，云彩，風(fēng)等方法，可以參考。

源碼比較簡(jiǎn)單，詳情請(qǐng)查看：

https://github.com/chenfengyanyu/my-web-accumulation/blob/master/skycons/skycons.js

七、效果一覽

是不是很有意思，快來試試吧！附上 Demo 地址：

https://github.com/chenfengyanyu/my-web-accumulation/tree/master/skycons

八、熱門原創(chuàng)文章

1.HTML5 之音頻合成（Speech Synthesis）

2.DevOps 簡(jiǎn)介

3.前端反思錄（三）—談?wù)剛€(gè)人規(guī)劃

首先，我不得不提一下「一萬小時(shí)定律」：

人們眼中的天才之所以卓越非凡，并非天資超人一等，而是付出了持續(xù)不斷的努力。

怎么理解呢？要成為某個(gè)領(lǐng)域的專家，需要 10000 小時(shí)，按比例計(jì)算就是：如果每天工作八個(gè)小時(shí)，一周工作五天，那么成為一個(gè)領(lǐng)域的專家至少需要五年－這就是一萬小時(shí)定律。

1 萬小時(shí)的錘煉是任何人從平凡變成世界級(jí)大師的必要條件。

原諒我開篇的啰嗦，本系列文章我將從三個(gè)層次來說明：

1. 技術(shù)就是核心競(jìng)爭(zhēng)力；
2. 前端反思錄（二）—不要讓軟實(shí)力成為短板；
3. 前端反思錄（三）—談?wù)剛€(gè)人規(guī)劃