Python爬虫与数据挖掘|一篇文章教会你利用createjs实现界面效果

【一、项目背景】
createjs是一个基于canvas的制作H5游戏、动画、交互的库 。 包括EaselJs、TweenJs、SoundJs、PreloadJs四个部分 。 它基于容器进行展示 , 其中根容器是stage(舞台)对象 。
今天教大家用EaselJs、TweenJs结合做一个游戏说明界面 。
【二、项目准备】
1、去网站:
http://www.createjs.cc/
下载EaselJs、TweenJs这两个模块 。
Python爬虫与数据挖掘|一篇文章教会你利用createjs实现界面效果
文章图片
body创建画布canvas设置画布大小 , 画布添加描边 , id属性 。
<canvasid=''canvas''width=''500''height=''400''style=''border:1pxsolid#050000''></canvas>
2、创建div设置对应的标签 , 内容 , 按钮模块 。 设置div的id属性 。
【Python爬虫与数据挖掘|一篇文章教会你利用createjs实现界面效果】<divid=''instrutions''style=''width:400px;height:300px;border:1pxdashed#00d0ff;text-align:center;visibility:hidden''><h3>游戏说明</h3><p><b>点击</b><spanstyle=''color:red;''a>红色</span>按钮</p><p>Makesureyouclickthem<spanstyle=''text-decoration:underline;''>all</span>beforetimerunsout!</p><p>Rackup<i>asmanypoints</i>asyoucantoreachthe<spanstyle=a''color:#0c61ff''>BULE</span>level.</p><astyle=''background-color:#f00;''>开始游戏</a><h2style=''font-weight:bold;margin-top:30px;''>GOODLUCK!</h2>
3、js加载 , 实现动画效果 。
window.onload=function(){varstage=newcreatejs.Stage(canvas);vard=newcreatejs.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)**
varstage=newcreatejs.Stage(canvas)
3)找到div的对应的id属性 , 设置它的不透明度为0 , (刚开始不可见)初始化x坐标 。
vard=newcreatejs.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块从上往下掉落 。
Python爬虫与数据挖掘|一篇文章教会你利用createjs实现界面效果
文章图片
2、点红色按钮跳转页面 。
Python爬虫与数据挖掘|一篇文章教会你利用createjs实现界面效果
文章图片
【七、总结】
1、本文主要介绍了createjs中EaselJs、TweenJs的用法 , 以及对stage是如何创建的 , stage上页面的动画效果 。 在页面上如何去呈现stage 。 以及页面是如何的跳转 。 js如何调用实现功能 。
2、就本项目中的难点 , 重点 , 提供了详细的讲解和提供有效的解决方案 。
3、大家可以尝试了解createjs的其他模块 , 官网上有对应的API文档供大家学习 。