使用Create.js與Adobe Animate CC製做H5落地頁動畫

時間 2019-11-17

標籤使用 create.js create adobe animate 製做 h5 落地動畫欄目 JavaScript 简体版

原文原文鏈接

1、背景

在移動端，利用H5技術，可實現微雜誌,微信邀請函,H5小遊戲等營銷互動等應用開發，本文將介紹一種Create.js與Adobe Animate CC結合來製做H5落地頁的方法。css

CreateJS 基於H5開發的模塊化庫和工具,可快捷地開發基於HTML5的遊戲、動畫和交互應用html

ADOBE ANIMATE 設計適合遊戲、應用程序和 Web 的交互式矢量動畫和位圖動畫工具前端

經過二者結合既充份利用了Create.js的便捷性控制邏輯和總體框架結構，又充份應用了Animate動畫製做的靈活性，使設計師與前端工程師分開但可並行工做。
開始以前，先預覽下效果：
node

注：本文所提到代碼示例使用es5進行開發。git

2、頁面框架

1.頁面結構

通過需求分析，從頁面結構分層角度，須要將頁面結構分層，上從到下，分別爲LOADING層，用於顯示每一個動畫加載百分比，控制層包括按鈕，音樂開關，上下滑動手勢控制等，場景層用於加載每一個場景用到的動畫，經過這種結構，主要的核心點在於，這個需求有8個動畫場景，每一個動畫場景佔用的字節比比較大，所以須要按需加載。

2.目錄結構

從目錄結構劃分來看，以複用角度出發，將可複用的內容好比CORE，控制動畫加載類，交互類放於engine目錄，從上到下依次是：

configs: 存放動畫基礎配置
engine: 存放框架引擎
images: Animate CC製做好的動畫資源
sounds: 聲音資源
github

3.LOADING層

Loading層純展現，接收外部進度，場景開始加載顯示，場景加載完成時消失。浮動於頁面最上方，使用非CANVAS技術顯示。 web

加上居中轉動的CSS3動畫

body {
            overflow:hidden;
        }
        #_preload_div_{
            position:absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        #animation_container, #_preload_div_ .mask {
            position:absolute;
            margin:auto;
            display: inline-block; 
            height:150px; 
            width: 120px; 
            vertical-align:middle;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            text-align: center;
        }
        #_preload_div_ .img{
            vertical-align: middle; 
            max-height: 100%
        }
    
        #_preload_div_ .img img{
            animation: rotates 2s linear infinite;
            -webkit-animation: rotates 2s linear infinite;
        }
    
        #_preload_div_ span{
            display: inline-block; 
            margin-top: -5px;
            vertical-align: middle;
            color: #fff;
            font-size: 18px;
        }
        
        #LXB_CONTAINER_SHOW {
            display: none !important;
        }

        @keyframes rotates {
            0%{
                transform: rotate(0);
                -webkit-transform: rotate(0);
            }
    
            100%{
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
        }
複製代碼

4.控制層

從控制層開始，動畫效果交由Create.js引擎控制，須要作的是緩存

綁定容器服務器
初始化調用微信
加載場景
開始與結束場景處理
引入各場景動畫和控制邏輯

5.場景層

場景層用於控制整個H5動畫交互邏輯組合，它實現了：

子動畫場景事件註冊

這裏實現了接收每一個子動畫場景發送過來的動畫播放完畢事件，主場景在收到該事件後可進行相關的操做，好比加載下一場景，銷燬當前場景等。
加載上下場景邏輯
場景資源複用、銷燬

複用的主要邏輯是，將加載的資源在添加到主場景的同時存一份到map中，下次複用再經過場景ID方式獲取，在Create.js中經過removeChild()移出場景不會佔用CPU資源。

6.手勢動畫支持

手勢動畫須要引入createjs.Tween以及對pressup pressmove mousedown三事件綜合判斷。主要思想：在mousedown時記錄座標點,判斷Y軸方向在pressup時記錄的座標點是否大於原來點，大於表示向上滑動，反之向下滑動。

7.聲音管理

Create.js在設計時考慮到外部資源好比音樂、視頻，會存在容量較大狀況，所以有提供相應的API來作異步加載。目的是減小主程序字節數，這裏的聲音管理主要涉及到：

背景音樂，循環播放須要考慮加入循環參數{interrupt: createjs.Sound.INTERRUPT_ANY, loop: -1, volume: 0.5}
音效，考慮複用，按需才加載，二次使用則複用原有加載內容

8.微信分享

普通的XHR請求使用new createjs.LoadQueue(true)要注意的是異步方式調用new createjs.LoadItem().set在頁面加載完比先要獲取簽名，而後再設置使用JSDK用到的方法，這方面網絡有相關教程，若是想須要有服務端簽名自已實現，可參考這篇文章：
[基於egg.js微信分享API封裝]

同時，分享出去的地址，須要有對應的 encodeURIComponent

3、動畫製做

前面說過，使用這種方式的話可讓設計師和前端工程師並行工做，好比，能夠先定好每一個動畫的FLA文件的模板結構，即：

開始幀動做
結束幀動做

剩下的交給設計師過行天馬行空創做，那麼成稿將有多是這個樣子：

像這種複雜的動畫，通常CSS3比較難實現，而且效率也不是Animate等創做工具能比擬的，而以上提到的開始和結束，關鍵點就是該FLA動畫被Create.js加載以後能與其交互，接收播開始與完成事件。

3、發佈

1.做爲靜態資源與egg.js結合

將製做好的動畫須要放在一個服務器上的靜態資源目錄下使用，這裏引用egg.js默認的配置，public目錄,要引入微信分享，則須要有個服務端，藉助node.js技術發展，通常小型化服務徹底能夠由前端一手包辦。

2.可擴展配置

由於引入了服務器，則會遇到有相對路徑狀況，所以程序中加入了前綴配置，將這些配置抽離，放置獨立文件中。好比:

靜態圖片資源目錄
音樂資源目錄
避免緩存的版本號
而後，能夠這麼來使用:

4、小結

經過以上介紹能夠發現這是一種綜合型工具類的組合，可能你們會有一疑問，H5動畫與CSS3不是標配嘛?
我認爲大多數狀況下是確定的，但在複雜的動畫場景，當需求偏向於製做效率與高還原度場景的時候Animate這類的動畫創做工做就派上用場了。固然它選用的是Canvas動畫，咱們能夠截一下它的成品源碼，略知一二：