動畫學習的總結與遇見CreateJs

CreateJs中文網配圖

CreateJS真是一個讓人很感興趣的一個動畫類庫

之所以這麼說,是因爲前段時間製作了一個紅包雨的動畫,由於之前動畫都是自己玩玩,這個動畫是真正意義上在項目裏做的,覺得收穫很大。但是,製作方式使用了JQ動畫和CSS中的animate配合製作。由於是操作dom的方式對性能非常的不好,但是由於時間關係,只能選擇這個,後來的的學習我對canvas更加感興趣了,大家隨意感受一下。

製作的紅包雨

該效果紅包速度隨機,最開始出現的位置隨機,下完紅包雨後要出現一個大紅包

出現的最大問題:安卓手機非常的卡頓效果不流暢
解決:

  1. 首先是動畫fps也可以稱爲動畫幀,一般速度不可過快,由於電腦屏幕的刷新頻率大部分爲1/60所以在設置定時器的時候也可以設置爲1000/60左右;
  2. 由於是操作可以把操作的變量存儲爲變量這樣也可以減少點性能消耗。
  3. 能使用CSS3動畫的就是用CSS3動畫解決,
  4. 現在手機都支持瀏覽器加速所以我也可以使用CSS3的一些屬性對欺騙瀏覽器進行加速
  5. 讓要操作的dom脫離文檔流,這樣能減少迴流提高性能

CSS3D加速有很多屬性可以調起:比如tranform、opacity之類都可以

// 對要操作的dom進行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;

後來我使用canvas製作了一次發現使用canvas製作確實很麻煩,由於是不停的渲染圖片會有閃爍的問題我,由於當時時間有限,就停止瞭解了,通過這次瞭解使我瞭解了新的技術。

瞭解了原生canvas在動畫的時候閃爍問題解決:

  1. 使用離屏雙緩衝技術

自我瞭解:在屏幕上的canvas爲主動畫,然後創建一個大小一致的canvas緩存不顯示(其實就是兩個的都做一樣動畫),然後再把緩存的圖片在渲染到主動畫上這樣就可以了。緩存需要用的sava()和restore()自我感覺瞭解了原理而已,還需要多多學習

感謝大神們的教程:

最好理解和示例的網址(推薦)
國外經典
save和restore介紹

後來得知CreateJs,解決了canvas原生操作複雜動畫的難題。

CreateJs

什麼是CreateJS

HTML5出現後,因爲Canvas這模塊對圖形動畫開發提供了非常好的支持,所以Flash就漸漸的退出了歷史舞臺.

優勢:Canvas渲染性能優秀
Canvas開發使用Javascript,學習成本相對較低
瀏覽器本地支持(無需安裝插件、更加便捷的和本地JS代碼進行交互)

HTML5中有Canvas標籤和API,學習成本大,複雜度高(特別是用於複雜的動畫設計的時候)
CreateJS的出現就是在原生Canvas API的基礎之上,封裝了一套新的API,而這套API在用戶開發過程中提升了性能,降低了成本。

CreateJS模塊介紹

  1. EaselJS - 提供createJS開發的核心API
  2. TweenJS - 負責開發過程中動畫操作API
  3. SoundJS - 負責開發過程中動畫的配音(包括前景音樂、背景音樂、動作音樂)
  4. PreloadJS -負責遊戲動畫開始時預加載所有資源API

暫時寫到這,下次學習在更新

好東西要分享,本來想多瞭解後在分享的,但是我迫不及待的想和大家分享與我做項目的收穫,希望能幫到大家!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章