【1.项目背景】createjs是一个基于canvas的库，用于制作H5游戏、动画、交互。包括EaselJs、TweenJs、SoundJs、PreloadJs四个部分。它是基于容器显示的，其中根容器是舞台（stage）对象。今天教大家结合EaselJs和TweenJs制作游戏描述界面。[2。项目准备】1、到网站：http://www.createjs.cc/下载EaselJs和TweenJs两个模块。[3.所需工具]Adob??eDreamweaver[4．项目目标】运行到浏览器，从上到下滑动弹框到指定位置，点击红色按钮，跳转到4399游戏界面。[V.项目分析】1.创建画布。创建一个div，使用h3表示标题，使用a标签作为P标签加载内容的按钮，如图：[6.项目实现】1.导入EaselJs和TweenJs模块。bodycreatecanvas画布设置画布大小，添加画布笔划，id属性。2.创建一个div，设置相应的label、content、button模块。设置div的id属性。游戏说明
单击红色按钮
确保单击它们全部在时间用完之前！
尽可能多地积累积分以到达BULElevel.
开始游戏祝你好运！3、js加载，实现动画效果。window.onload=function(){varstage=newcreatejs.Stage(canvas);vard=newcreatejs.DOMElement("指令");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）的stage**varstage=newcreatejs.Stage(canvas)3）找到div对应的id属性，将其opacity设置为0，（Invisibleat首先）初始化x坐标。vard=newcreatejs.DOMElement("指令");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);[6.效果展示】1、F12运行到chrome浏览器，div块从上到下落下。2.点击红色按钮跳转到页面。[七。总结】1.本文主要介绍createjs中EaselJs和TweenJs的使用，如何创建舞台，以及页面在舞台上的动画效果。如何在页面上呈现舞台。以及页面如何跳转。js如何调用实现函数。2.针对本项目的难点和重点，提供详细的解释和有效的解决方案。3、可以尝试了解createjs的其他模块。官网有相应的API文档供大家学习。4.按照操作步骤，自己动手试试。自己实现的时候，总会出现各种各样的问题。不要好高骛远，踏踏实实去努力，这样才能理解的更深刻。5、如需本文源码，请在公众号后台回复“动画效果”四个字获取。看完这篇文章你有收获吗？请转发分享给更多的人加入IT分享之家群，请在微信后台回复【进群】如果想深入了解Python网络爬虫和数据挖掘，可以上专业网站：http://pdcfighting.com/
