一篇文章教會你利用createjs實現界面效果

【一、項目背景】

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/