【一、專案背景】

createjs是一個基於canvas的製作H5遊戲、動畫、互動的庫。包括EaselJs、TweenJs、SoundJs、 PreloadJs四個部分。它基於容器進行展示，其中根容器是stage（舞臺）物件。

今天教大家用EaselJs、TweenJs結合做一個遊戲說明介面。

【二、專案準備】

1、去網站：

http://www.createjs.cc/

下載EaselJs、TweenJs這兩個模組。

【三、需要的工具】

Adobe Dreamweaver

【四、專案目標】

執行到瀏覽器，彈框從上往下滑到指定位置，點選紅色按鈕，跳轉4399遊戲介面。

【五、專案分析】

1、建立畫布canvas。建立一個div，用h3表示標題，P標籤載入內容用a標籤做按鈕，如圖：

【六、專案實現】

1、匯入EaselJs、TweenJs模組。

<script src="js/easeljs-0.7.1.min.js"></script>
<script src="js/tweenjs.min.js"></script>

body 建立畫布canvas 設定畫布大小，畫布新增描邊 ，id屬性。

<canvas id="canvas" width="500" height="400" style="border: 1px solid#050000" ></canvas>
 

2、建立div 設定對應的標籤，內容，按鈕模組。設定div的id屬性。

<div id="instrutions" style="width: 400px; height: 300px;border: 1px dashed #00d0ff;text-align: center; visibility: hidden">
        <h3>遊戲說明</h3>
      <p><b>點選</b><span style="color: red;"a>紅色</span>按鈕</p>
        <p >Make sure you click them <span style="text-decoration: underline;">all</span>before time runs out!</p>
        <p>Rack up <i>as many points </i>as you can to reach the <span style=a"color: #0c61ff">BULE</span>level.</p><a style="background-color:#f00;">開始遊戲</a>
        <h2 style="font-weight: bold; margin-top: 30px;">
    GOOD LUCK!</h2>
 

3、js載入，實現動畫效果。

 window.onload=function () {
            var  stage=new createjs.Stage(canvas);
            var d=new createjs.DOMElement("instrutions");
            d.alpha=0;
            d.x=50;
            createjs.Tween.get(d).wait(100).to({y:40,alpha:1},2000,createjs.MotionGuidePlugin.bounceIn);

            stage.addChild(d);
        createjs.Ticker.addEventListener("tick",stage);
        }

程式碼解析：

1）表示頁面已載入就要執行的函式。

window.onload=function ()

2）建立一個名為canvas的舞臺（stage）**

var stage=new createjs.Stage(canvas) 

3）找到div的對應的id屬性，設定它的不透明度為0，（剛開始不可見）初始化x座標。

var d=new createjs.DOMElement("instrutions");
            d.alpha=0;
            d.x=50;

4）get()表示你要改變的物件，括號內輸入id值。wait（）表示你要延遲顯示的時間，to()表示你要讓它做什麼事情，（這裡給它到y座標為40，並且把它的不透明度為1   ） ，MotionGuidePlugin.bounceIn：表示讓它從上往下掉。**

createjs.Tween.get(d).wait(100).to({y:40,alpha:1},2000,createjs.MotionGuidePlugin.bounceIn);

5）元件新增到舞臺（stage）,createjs.Ticker.addEventListener("tick",stage);表示重新整理舞臺。**

stage.addChild(d);
createjs.Ticker.addEventListener("tick",stage); 

【六、效果展示】

1、F12執行到chrome瀏覽器，div塊從上往下掉落。

2、點紅色按鈕跳轉頁面。

【七、總結】

1、本文主要介紹了createjs中EaselJs、TweenJs的用法，以及對stage是如何建立的，stage上 頁面的動畫效果。在頁面上如何去呈現stage。以及頁面是如何的跳轉。js如何呼叫實現功能。

2、就本專案中的難點，重點，提供了詳細的講解和提供有效的解決方案。

3、大家可以嘗試瞭解createjs的其他模組，官網上有對應的API文件供大家學習。

4、按照操作步驟，自己嘗試去做。自己實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

5、如果需要本文原始碼，請在公眾號後臺回覆“動畫效果”四個字獲取。

看完本文有收穫？請轉發分享給更多的人

IT共享之家

入群請在微信後臺回覆【入群】

想學習更多Python網路爬蟲與資料探勘知識，可前往專業網站：http://pdcfighting.com/