整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
hang Jin China Plus Published: 2017-06-10 20:01:24
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
Another graduation speech by a Chinese student in the United States has gone viral, but this time has been praised for its positive and inspiring tone, reports People's Daily.
Receiving her Master of Science in Math Finance from Boston University, Cai Yujing, who comes from Nanjing city in east China's Jiangsu Province, spoke about her hometown and family members present at the ceremony, and then shared her 6-year experience studying with students from different cultural backgrounds.
In her 7-minute speech, Cai talked about how she adapted to the diverse community at the Questrom School of Business and established mutual understanding with fellow students.
Overcoming awkwardness, nervousness, and even occasional anger when exchanging ideas with people from different countries, she said she also experienced the joy of sharing, inspiring and embracing each other, adding that such an experience opened her mind to learning about and embracing diversity.
Cai's speech won a lot of praise online with some saying her address highlighted the positive perspective of Chinese students.
Many compared it to a speech made by another Chinese student in the US last month.
Yang Shuping, a graduate student at the University of Maryland, preferred to compliment the "fresh air" in the US in her graduation speech while damning the air quality of her hometown Kunming, a city that actually enjoys good air quality.
Yang's speech went viral last month and triggered outrage among Chinese netizens, who accused her of complimenting the US and belittling her homeland.
Yang later posted an apology on her Sina Weibo social media account, and asked for forgiveness.
然發現一個國外的網站接入了天氣板塊，很有意思的是該網站所有的天氣圖標都是會動的。
于是我便有了學（chao）習（xi）的念頭，我們來一探究竟。
一、順藤摸瓜
通過審查元素，我們很快定位到了一個叫 skycons 的 js 類庫，順藤摸瓜找到了 github 地址,順手下載了一份 skycons.js 文件。
二、簡單示例
首先，添加 canvas，并設置 id，以備后續使用，寬高可以隨意設置，如下:
其次，我們實例化 Skycons：
然后，在我們的元素上通過 canvas id 來添加動畫，并選擇動畫類型：
最后，別忘了，播放它：
這樣，一個簡單的示例就完成了，是不是很簡單呢？下面我們來看看參數詳解。
三、參數詳解
可設置的天氣類型參數：
添加動畫：
播放動畫：
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，動畫更加流暢：
起初不太理解作者為何要設置這個數值，后來才意識到：
大多數瀏覽器都會對重繪操作加以限制，不超過顯示器的重繪頻率，因為即使超過那個頻率用戶體驗也不會有提升。
因此，最平滑動畫的最佳循環間隔是 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.前端反思錄（三）—談談個人規劃
2E-Awesome
首先，我不得不提一下「一萬小時定律」：
怎么理解呢？要成為某個領域的專家，需要 10000 小時，按比例計算就是：如果每天工作八個小時，一周工作五天，那么成為一個領域的專家至少需要五年－這就是一萬小時定律。
原諒我開篇的啰嗦，本系列文章我將從三個層次來說明：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
