如何使用createjs 动画来编写HTML5游戏TweenJS和Tick动画

来源：蜘蛛抓取(WebSpider) 时间：2017-01-21 10:42 标签： createjs tick
CreateJS-TweenJS
视频太卡？试试切换线路
本课时讲解TweenJS的CSSPlugin，了解在TweenJS中如何操作CSS。
本课时讲解TweenJS的Ease，Ease包含很懂动画曲线，可以根据自己的需求添加。
本课时讲解TweenJS的MotionGuidePlugin。
本课时讲解Tween。
只有成为VIP会员才能提问&回复，快吧！如果你还没有账号你可以一个账号。
添加新技术问题
课程 [CreateJS TweenJS-CSSPlugin]
中已存在问题
添加新技术问题
问题描述越详细，被解答的速度越快
有新回答时请邮件提醒我
着急，拜托快点
不急，慢慢解决
关联课程 [CreateJS TweenJS-CSSPlugin]
服务热线:400-678-8266如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画_HTML/CSS_第七城市
如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画
如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画，有需要的朋友可以参考下。CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。一个简单的tick动画看起来是这样的： var stage,function init(){ stage = new createjs.Stage(document.getElementById('game')); createjs.Ticker.addEventListener("tick", handleTick); createjs.Ticker.setFPS(60); circle = new createjs.Shape(); circle.graphics.f("red").dc(0,0,50); circle.x = 0; circle.y = 100; stage.addChild(circle); circle.addEventListener("click", function(event){ createjs.Ticker.setPaused(!createjs.Ticker.getPaused()); });}function handleTick(event){if(!event.paused){ circle.x +=5; if(circle.x > 1000){ circle.x = 0; }} stage.update();}每个时间周期，circle的x+5，很自然circle就会在页面上从左到右的移动，可以给circle添加一个鼠标点击事件让动画暂停运行，当鼠标按下，使用createjs.Ticker.getPaused()获取当前运行状态，并使用setPaused做成相反的赋值，参数event的paused属性作为动画开关，点击就可以暂停。event参数还包含了其他重要的属性，比如使用event.delta可以获取刷新的时间间隔。既然用Ticker可以完成动画，TweenJS又有什么作用呢？使用TweenJS可以帮助开发者创建较复杂的动画效果，以及通过设置CSS来实现CSS动画，在Ticker动画中，完成一个直线运动的例子比较简单，如果要是想比较复杂的动画效果，比如让小球在桌面方形轨迹运动，或实现小球碰到墙之后的弹力效果，使用Ticker实现起来就比较复杂（当然也可以通过一些Math函数，实现一些复杂的运动轨迹）。先从上面的例子开始，让小球在屏幕上来回移动，使用TweenJS来实现的只需要： var stage,function init(){ stage = new createjs.Stage(document.getElementById('game')); createjs.Ticker.addEventListener("tick", handleTick); createjs.Ticker.setFPS(60); circle = new createjs.Shape(); circle.graphics.f("red").dc(0,0,50); circle.x = 0; circle.y = 100; stage.addChild(circle); createjs.Tween.get(circle,{loop:true}).to({x:);
//只需要加这一句}function handleTick(event){ stage.update();}是不是简单了不少！1.要想使用TweenJS，首先要在HTML中导入js库2.调用方式createjs.Tween.get().wait().to().call();使用get()获取要添加运动轨迹的元素，如果需要动画循环进行，只需要加上{loop:true}，当然还有其他选项，比如overridewait()可以让动画延迟播放to()来确定运动的轨迹，只需要指明你打算让circle到达的位置坐标即可，TweenJS会自动为你创建动画过程，to()的第一个参数{x:1000}，指明了x坐标的终点，而且在{}中不只可以改变坐标，alpha:0.5可以改变透明度，scaleX/Y = 2可以改变大小，rotation:360可以改变角度，实现旋转；to()的第二个参数，指明动画的时常，也是就是x坐标运动到终点所用的时间，这里还有第三个参数createjs.Ease，可以设置运动的轨迹和运动的方式。call(),可以在动画结束后，调用一个函数，当然也可以省略如果不需要的话。3.想让你的元素做连续的复杂运动，只要不断的添加to()就可以了，比如让小球做方形轨迹的运动，并且在过程中改变大小，透明度 createjs.Tween.get(circle,{loop:true}).to({x:900},2000).to({y:600,alpha:0.2},2000).to({x:100,alpha:1, scaleX:1.5,scaleY:1.5},2000).to({y:100, scaleX:1,scaleY:1},2000);to()的第三个参数，createjs.Ease可以实现复杂的运动轨迹，比如要实现一个小球落地效果，落地后再弹几下，只需要加一个createjs.Ease.bounceOutcreatejs.Tween.get(circle,{loop:true}).wait(200).to({y:650},1000,createjs.Ease.bounceOut);使用Ease可以控制运动的轨迹，实现曲线的运动，还可以控制运动过程，比如先加速再减速等，在Tweenjs官方示例中有两个可以用来观察Ease提供的各个参数对运动过程产生的影响，/blog/tweenjs//demos/tweenjs/tween_sparktable基本的Tween用法就是这些，通过连续的to()和Createjs.Ease组合，可以创建出很复杂的动画效果，在TweenJS中,还包含了几个插件，CSSPlugin和MotionGuidePlugin他们并不直接包含在导入的tweenjs-0.6.1.min.js当中，想使用的话，打开Tweenjs目录，在src文件夹下面的tweenjs中可以找到，以CSSPlugin为例吧导入CSSPluginjs库createjs.CSSPlugin.install(createjs.Tween); var box = document.createElement("div"); box.style.width = "100px"; box.style.height = "100px"; box.style.position = "absolute"; box.style.borderRadius = "8px"; box.style.backgroundColor = "#0F0"; document.body.appendChild(box);首先调用install方法，然后就可以设置被选取得页面元素的style来修改它的css有个例子作为参考： 版权声明：本文为博主原创文章，未经博主允许不得转载。
最新教程周点击榜
微信扫一扫关于CreateJS的使用_大林子木木_新浪博客
关于CreateJS的使用
本人在制作H5页面的时候用到了这个插件进行一些动画的控制，CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。他分为了五个部分，以至于在刚开始的时候我以为他是一个JS文件，下载下来直接就能用了，后来百度得知CreateJs分为五大部分，每个部分可以单独下载进行使用。
EASEJS：用来处理HTML5的canvas（图形动画）
TWEENJS：用来处理HTML5的动画调整和javascript属性（补间动画）
SOUNDJS：用来帮助简化处理音频相关的API（音频控制）
PRELOADJS：管理和协调程序加载项的类库（文件加载）
ZOE：将SWF动画导出为EaseIJS的sprite的工具
大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。
接下来我们开始进行文件的导入：
由于我只用到了这个插件，所以直接导入这个插件就可以了。和平常使用JS是一样的。​
html代码如下：
然后进行舞台初始化操作：
这个图就是上图里面的pin_0.jpg,根据下面frames'所写的坐标进行切换到不同的图上
&当然我写的比较粗糙，也是之前前辈的代码拿来用的，只是先学会了一点，还需要细细研究。
这个是easeljs的英文API地址，大家能翻译的话可以翻译下：/docs/easeljs/classes/AlphaMapFilter.html​
也方便自己查看。
大林子木木
博客等级：
博客积分：0
博客访问：159
关注人气：0
荣誉徽章：

我要回帖

更多关于 createjs tick 的文章

 

随机推荐