createjs知識點梳理,持續更新中...

前言:
一直以來想要研究canvas,卻沒去完整了解,林林總總找過有些案例資料。
直到去年,由於工作原因,特意去看了createjs官網文檔 - https://www.createjs.com,對知識體系有了完整了解。
後面根據網易的一款叫做 "花語月"的解密遊戲的h5推廣頁動效,自己仿照做了一個粗糙版本(素材是扣下來的)、以及還有一個產品推廣h5的仿製,這個只仿了一個簡單的頁面。

案例鏈接爲:
1. 仿製花與月h5  --  https://seablue001.github.io/h5/moon
2. 仿製##推廣h5  --  https://seablue001.github.io/ejh5/dist

庫介紹:
首先,簡單講一下createjs所提供的幾個庫,一共有四個庫分別對應爲 EASELJS(界面元素繪製處理)、TWEENJS(動畫處理)、SOUNDJS(音頻處理)、PRELOADJS(文件預加載處理)。

其中主要大家常用的爲 easeljs,至於其它庫文件一般需要到完整項目

- (圖片等資源量大時需要做加載處理),附加使用preloadjs
- (音頻的播放、暫停等處理) 附加使用soundjs
- (動畫過渡效果添加,讓動畫更流暢) 附加使用tweenjs

庫文件資源下載:
官方提供了完整版(包含4個庫)的 createjs cdn鏈接及git等相關信息便於瞭解,如下圖

clipboard.png

或者分離形式的 4個獨立庫 cdn鏈接及下載鏈接(下載文件裏面包含案例examples),如下圖

clipboard.png

庫文件的引入:
我們可以使用script腳本標籤直接鏈接使用 cdn地址對應庫文件,其實也可以使用es6 import語法導入使用,後續配合webpack便於對項目編譯壓縮打包,只是配置相對麻煩,後續專門講解一下具體處理辦法

今天,先總的概括一下,後續開始持續發佈 對於各個庫的基礎,與案例的實際開發流程、與思路。


溝通:

有需要溝通的可以加我 QQ 1465768310 申請麻煩備註 "createjs交流"

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