PixiJs實戰課程-全網最全課程

PixiJs系列實戰課程

歡迎進入 PixiJs系列課程 最初編寫這套課程的緣由，是由於無心中在網上翻看到了一個H5場景動畫的頁面，名字是逃不掉的四字咒怨，就被這種動畫形式所吸引，隨後的一段時間一直在網上查找資料，發現這類頁面學名叫一鏡到底 。

相關案例參考彙總

具備參考價值的案例彙總了一下，地址以下：

• 1） 逃不掉的四字咒怨
• 2） 實戰萬聖節主題橫版
• 3） 實現通用一鏡到底H5
• 4） 實現圖片波浪化的效果
• 下面幾個連接須要用谷歌瀏覽器f12切換移動端看，固然也能夠用手機設備看
• 5） 我在通話裏遇到你的時光
• 6） 讓世界聽見你
• 7）避暑的108種姿式
• 8）新舊交替 太歲換班
• 9）場景小動畫實現
• 10）構建一個視差滾動器

課程安排

經過上面的資料整理了一套作一鏡到底的方法，這就把經驗寫在上面，讓你們能夠快速的學習這個玩具，若有不嚴謹的地方也但願你們多多包涵和糾正。

課程名稱	章節	備註
基礎篇	9篇	主要是講你們搭建實戰規模的基礎結構，便於實戰應用
實戰篇	300篇	實戰中我打算選3個表明性的案例，一行一行給你們分享
技巧總結篇	100篇	以上用到的動畫片斷、功能性的代碼、經常使用語法都會總結到這裏

涉及框架

框架名稱	備註
PixiJS	繪圖，其中包括舞臺、場景、普通精靈、動畫精靈、平鋪精靈
TweenMax	製做過渡動畫
TimelineMax	管理整個舞臺的動畫播放進度
AlloyTouch	實現滑動效果，監聽用戶滑動

1、基礎篇

1.準備（2019-07-23，更新完成）

• 裝node.js
• 裝cnpm淘寶鏡像
• 裝vscode開發工具
• 裝vscode本地服務器
• 下載js插件文件
• 搭建項目文件的基本架構
• 》》進入課程《《

2.初始化階段（2019-07-24，更新完成）

• 初始化舞臺
• 初始化資源
• 製做簡易loading
• 初始化場景
• 初始化精靈
• 初始化動畫
• 》》進入課程《《

3.解決移動端適配（2019-07-26，更新完成）

• 適配橫豎舞臺大小
• 適配橫豎舞臺的內容大小
• 》》進入課程《《

4.如何滑動觸發時間軸（2019-07-27，更新完成）

• 引入滑動機制
• 計算出時間數值
• 解決場景滑動時觸發背景音
• 》》進入課程《《

5.經常使用功能補充（還會繼續追加新的知識點）

• 製做字幕 》》進入課程《《 （2019-07-29，更新完成）
• 製做遮罩
• 繪製基本圖形 》》進入課程《《（2019-07-31，更新完成）
• 如何拖拽
• 製做微信分享
• 生成海報
• 頁面測試 》》進入課程《《（2019-08-01，更新完成）
• 打包壓縮

6.案例

• 武術小人動畫》》進入課程《《（2019-08-02，更新完成）
• 滑動屏幕武術小人淡入淡出》》進入課程（2019-08-06，更新完成）《《

2、實戰篇

• 咱們畢業了
• 上班的一天
• 吉他彈唱

3、技巧篇

• 如何適配橫豎屏
• 分析設計稿
• 如何結合vue實現一鏡到底
• 分享經常使用的loading效果
• 經常使用的精靈動畫計算公式

4、擴展篇

• Swiper + TweenMax
• PC端頁面 + TweenMax 更新中
• PixiJsDiY場景
• PixiJs遊戲入門
• AE製做h5動畫進入課程》》（2019-08-07，更新完成）《《

5、精簡語法篇

• PixiJS
• TweenMax （完成更新）
• AlloyTouch

結語

• 每篇都會有github代碼做爲指引；[github地址：空]
• 爲了讓你們學習的更加快速，我還錄製了短小精煉的視頻；[視頻地址：空]
• 廢話很少說了，開始敲代碼了。