您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息
三六零分类信息网 > 德州分类信息网,免费分类信息发布

一篇文章教会你利用createjs实现界面效果

2020/5/31 11:41:08发布303次查看

点击上方“it共享之家”,进行关注
回复“资料”可获赠python学习福利
【一、项目背景】
   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共享之家
入群请在微信后台回复【入群】
------------------- end -------------------
往期精彩文章推荐:
一篇文章教会你用python抓取抖音app热点数据
一篇文章教会你使用python定时抓取微博评论
手把手教你使用python抓取qq音乐数据(第四弹)

Python进阶学习交流
德州分类信息网,免费分类信息发布

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录