一篇文章教会你利用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模块。

body 创建画布canvas 设置画布大小，画布添加描边 ，id属性。

2、创建div 设置对应的标签，内容，按钮模块。设置div的id属性。

        
游戏说明
      
点击红色按钮
        
Make sure you click them allbefore time runs out!
        
Rack up as many points as you can to reach the BULElevel.
开始游戏
        

    GOOD LUCK!

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共享之家

入群请在微信后台回复【入群】