一篇文章教会你借助createjs实现界面疗效

　　一篇文章教会你借助createjs实现界面疗效

游戏说明

<p>点击红色按钮

　　Make sure you click them allbefore time runs out!

　　Rack up as many points as you can to reach the BULElevel.<a style="background-color:#f00;">开始游戏</a>

GOOD LUCK!

</p>

　　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、按照操作步骤，自己尝试去做。自己实现的时侯，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的愈发深刻。