CreateJS真是一個(gè)讓人很感興趣的一個(gè)動(dòng)畫(huà)類庫(kù)
之所以這么說(shuō)召边，是因?yàn)榍岸螘r(shí)間制作了一個(gè)紅包雨的動(dòng)畫(huà)玖姑，由于之前動(dòng)畫(huà)都是自己玩玩靠益，這個(gè)動(dòng)畫(huà)是真正意義上在項(xiàng)目里做的，覺(jué)得收獲很大疮鲫。但是，制作方式使用了JQ動(dòng)畫(huà)和CSS中的animate配合制作弦叶。由于是操作dom的方式對(duì)性能非常的不好俊犯，但是由于時(shí)間關(guān)系，只能選擇這個(gè)伤哺，后來(lái)的的學(xué)習(xí)我對(duì)canvas更加感興趣了燕侠，大家隨意感受一下。
該效果紅包速度隨機(jī)立莉，最開(kāi)始出現(xiàn)的位置隨機(jī)贬循，下完紅包雨后要出現(xiàn)一個(gè)大紅包
出現(xiàn)的最大問(wèn)題：安卓手機(jī)非常的卡頓效果不流暢
解決：
- 首先是動(dòng)畫(huà)fps也可以稱為動(dòng)畫(huà)幀，一般速度不可過(guò)快桃序，由于電腦屏幕的刷新頻率大部分為1/60所以在設(shè)置定時(shí)器的時(shí)候也可以設(shè)置為1000/60左右;
- 由于是操作可以把操作的變量存儲(chǔ)為變量這樣也可以減少點(diǎn)性能消耗。
- 能使用CSS3動(dòng)畫(huà)的就是用CSS3動(dòng)畫(huà)解決烂瘫，
- 現(xiàn)在手機(jī)都支持瀏覽器加速所以我也可以使用CSS3的一些屬性對(duì)欺騙瀏覽器進(jìn)行加速
- 讓要操作的dom脫離文檔流媒熊，這樣能減少回流提高性能
CSS3D加速有很多屬性可以調(diào)起：比如tranform、opacity之類都可以
// 對(duì)要操作的dom進(jìn)行3d加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
// 解決操作dom的閃爍
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
后來(lái)我使用canvas制作了一次發(fā)現(xiàn)使用canvas制作確實(shí)很麻煩坟比，由于是不停的渲染圖片會(huì)有閃爍的問(wèn)題我芦鳍，由于當(dāng)時(shí)時(shí)間有限，就停止了解了葛账，通過(guò)這次了解使我了解了新的技術(shù)柠衅。
了解了原生canvas在動(dòng)畫(huà)的時(shí)候閃爍問(wèn)題解決：
- 使用離屏雙緩沖技術(shù)
自我了解：在屏幕上的canvas為主動(dòng)畫(huà)，然后創(chuàng)建一個(gè)大小一致的canvas緩存不顯示（其實(shí)就是兩個(gè)的都做一樣動(dòng)畫(huà)）籍琳，然后再把緩存的圖片在渲染到主動(dòng)畫(huà)上這樣就可以了菲宴。緩存需要用的sava()和restore()自我感覺(jué)了解了原理而已，還需要多多學(xué)習(xí)
感謝大神們的教程：
后來(lái)得知CreateJs,解決了canvas原生操作復(fù)雜動(dòng)畫(huà)的難題趋急。
CreateJs
什么是CreateJS
HTML5出現(xiàn)后喝峦，因?yàn)镃anvas這模塊對(duì)圖形動(dòng)畫(huà)開(kāi)發(fā)提供了非常好的支持，所以Flash就漸漸的退出了歷史舞臺(tái).
優(yōu)勢(shì)：Canvas渲染性能優(yōu)秀
Canvas開(kāi)發(fā)使用Javascript呜达，學(xué)習(xí)成本相對(duì)較低
瀏覽器本地支持（無(wú)需安裝插件谣蠢、更加便捷的和本地JS代碼進(jìn)行交互）
HTML5中有Canvas標(biāo)簽和API，學(xué)習(xí)成本大查近，復(fù)雜度高（特別是用于復(fù)雜的動(dòng)畫(huà)設(shè)計(jì)的時(shí)候）
CreateJS的出現(xiàn)就是在原生Canvas API的基礎(chǔ)之上眉踱，封裝了一套新的API，而這套API在用戶開(kāi)發(fā)過(guò)程中提升了性能霜威，降低了成本谈喳。
CreateJS模塊介紹
- EaselJS - 提供createJS開(kāi)發(fā)的核心API
- TweenJS - 負(fù)責(zé)開(kāi)發(fā)過(guò)程中動(dòng)畫(huà)操作API
- SoundJS - 負(fù)責(zé)開(kāi)發(fā)過(guò)程中動(dòng)畫(huà)的配音（包括前景音樂(lè)、背景音樂(lè)侥祭、動(dòng)作音樂(lè)）
- PreloadJS -負(fù)責(zé)游戲動(dòng)畫(huà)開(kāi)始時(shí)預(yù)加載所有資源API
暫時(shí)寫(xiě)到這叁执，下次學(xué)習(xí)在更新
好東西要分享茄厘，本來(lái)想多了解后在分享的，但是我迫不及待的想和大家分享與我做項(xiàng)目的收獲谈宛，希望能幫到大家次哈！
