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

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

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

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

相关文章
|
3月前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
7月前
|
C# 图形学
【Unity】2D游戏-愤怒的小鸟教学实战(附源码和实现步骤 超详细)
【Unity】2D游戏-愤怒的小鸟教学实战(附源码和实现步骤 超详细)
373 2
|
7月前
|
图形学
如何在微信小游戏制作工具中做出好看的粒子效果?
如何在微信小游戏制作工具中做出好看的粒子效果?
114 1
游戏开发零基础入门教程(5):不要挡住我,我要去上面
这一节我们学习了层级管理,以及通过使用拖拽的方式来调整层级的顺序。 在真实的游戏中可能会包含很多的层级,在调整层级时,不要忘记口诀:谁挡住了我,我就去谁的上面。 试着在游戏中加入更多的层级,拖拽调整层级的顺序,然后观察编辑区中的图片显示效果。
158 0
|
图形学
如何做出好看的粒子效果
嗨!大家好,我是小蚂蚁。 微信小游戏制作工具提供了简单的粒子插件,使用起来简单明了(如果你用过Unity的粒子组件就知道这个有多简单明了了),虽然功能相对简单,可设置的属性也有限,但是我们仍然能够用它在游戏中做出漂亮的效果。 比如说在彩虹星球大冒险中,所有的爆炸都是使用的粒子效果来实现的。
136 0
|
开发工具
经典飞机大战游戏制作教程1:熟悉开发工具
适合想要学习做游戏的新手,也适合想要学习编程的青少年,另外也适合亲子共学。 想让孩子学习一样东西,除了让他自己去学习之外,还有一种更好的方式,就是跟他一起学习。希望这个系列能够让你体会到做游戏的乐趣,并且在做游戏的过程中学习编程,锻炼逻辑思维。 如果课程内容对你有帮助,欢迎点赞分享,鼓励小蚂蚁继续创作。
218 0
|
小程序 索引
如何做一个塔防小游戏(四)
嗨!大家好,我是小蚂蚁。今天我们继续分享制作一个塔防小游戏的第四节,如何实现炮塔的升级和出售功能。 在炮塔升级时,我们简单地做一些属性的提升以及外表的变化,例如当炮塔升级后,攻击速度提升,攻击范围增大,炮塔变成红色的。
115 0
|
小程序 索引
如何做一个塔防小游戏(二)
为了方便设置炮塔的位置,可以使用一个精灵图片作为标识,图中我使用了黄色的五角星作为炮塔位置的标识,可以在场景区中直接拖拽五角星对炮塔的位置进行设置。然后在游戏启动后我们将使用炮塔创建按钮来替换这些五角星的位置。
107 0
|
小程序 容器
如何做一个塔防小游戏(一)
实现一个防守塔非常的简单,因为小游戏制作工具已经为我们提供了现成的“行为”了。 选中作为炮塔的精灵,然后在属性区的下方点击“管理行为”按钮,在行为对话框中开启“炮塔”行为。这个行为已经为我们提供了制作一个防守塔所需的大部分的功能了。
169 0
微信小游戏开发系列教程2-了解游戏全貌和一些游戏开发中的术语
这一节小蚂蚁将会带着大家先从整体上了解一个小游戏的全貌,然后再熟悉一些游戏开发领域中常用的术语。最后分享一下自己的一些经验和方法,希望能够帮助到那些刚进入游戏开发领域的新人。 欢迎体验我的微信小游戏作品:精致1010
102 0