动画

动画是所有游戏的必要组成部分,Starling能帮助你快速的制作简单动画。

如果你想了解一下,那么这里有两种动画类型。其中一种动画是你知道即将发生什么,比如当消息提示框被关闭,或者某些界面元素被移动出屏幕。另外一种动画更为灵活,例如玩家人物的移动。这些动画能够在每一帧改变他们的状态,同时这些动作是受到玩家控制的。

下面我们来看看后面这种动画类型,动态动画。

EnterFrame事件

在一些游戏yiinqing中,你能够通过调用“run-loop”类似的命令。这是一个无限循环,每次循环都会处理场景中的所有元素。在Starling中,我们采用的是树状显示结构,所以这种方式对于我们来说没有太多的意义。你可能在你的游戏中定义了许多不同的可视化元素,并且这些元素在某些时刻应该进行一些操作。

这时你需要EnterFrame时间。这个事件适用于所有的显示元素,并且再每一帧都会触发。下面用一段简单的带来来演示如何使用它:

// e.g. in the constructor
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);// the corresponding event listener
private function onEnterFrame(event:EnterFrameEvent):void
{trace("Time passed since last frame: " + event.passedTime);enemy.moveBy(event.passedTime * enemy.velocity);
}

onEnterFrame方法会在每帧都调用一次,并且你通过接收这个事件来对当前帧的状态进行改变。比如你能移动你的士兵,或者让场景中的雪花下落几个像素。

Tween

现在我们来介绍另外一种动画。使用这种动画我们能很容易的实现一些平滑的动画效果,例如旋转,缓动等等。Starling拥有一些简单的动画类型。这些动画可以用到你所有的对象当中,只要你改变的属性是Number,int,uint类型。

这些对象之所以能够产生动画,完全依赖于"Tween"。"Tween"来源于手工动画,当你设定了一个动画的关键帧之后,其中的过渡帧会被“tween”自动完成绘制。

下面我们来看一个范例:

var tween:Tween = new Tween(msgBox, 0.5);tween.animate("y", 20);
tween.animate("scaleX", 2);
tween.animate("scaleY", 2);
tween.animate("alpha", 0);

这个动画是将一个msgBox放大两倍尺寸,并且降低了它的透明度,直到它的透明度变为完全透明。这个动画运行需要半秒。如果你没有设置启动状态,那么这个动画会从当前状态开始运行。

正如你看到的,一个动画可以同时修改多个属性,并且你能用一个Tween对象控制多个动画对象。

注意,由于你经常使用缓动位置或者改变尺寸操作,那么你可以用下面的方法更加方便的进行操作:

tween.moveTo(0, 20); // animating "x" and "y"
tween.scaleTo(2);    // animating "scaleX" and "scaleY"
tween.fadeTo(0);     // animating "alpha"

这里还有更多的补间动画类型,例如从快到慢,或者从慢到快。

下面这些都是可以使用的类型: (默认的补间动画类型是'linear')

除此之外,你还可以设置延迟执行,或者设置执行后回调函数。

var tween:Tween = new Tween(msgBox, 0.5, Transitions.EASE_IN);
tween.delay = 2;
tween.onComplete = function():void { trace("tween complete!"); };

但是现在你看不到任何动画,因为一个tween对象所执行动画的首要前提是你必须对juggler对象进行操作。

Juggler

juggler是所有的动画的控制器(这里是所有动画的接口)。Starling在初始化的时候会默认生成一个juggler事例。下面的方法是使用juggler来启动动画。

Starling.juggler.add(tween);

I通常情况下,简单的处理将会出现意想不到的问题。

不过有时候你想对一些不同的容器进行分组的哦光滑。例如你某些游戏动画发生,游戏中的舞台区域可能会改变。当用户点击一个退出按钮的时候,你需要暂停你游戏中所有元素的动画,同事弹出一个消息提示框,告诉你现在游戏已经暂停,并且询问用户是否现在退出游戏。

这种情况下,使用juggler控制是非常方便的。比如一个退出按钮可以先暂停一些动画。这时候游戏的所有状态将被冻结,然后弹出消息提示框,这些都可以使用juggle来进行操作的方法。

When you create a custom juggler, all you have to do is to call its “advanceTime” method in every frame. I recommend using jugglers the following way: 当你创建了一个自定义juggler,那么你必须在每一帧上调用“advanceTime”方法。使用方法如下:

// In your main game class, listen to Event.ENTER_FRAME:
private function onEnterFrame(event:EnterFrameEvent):void
{if (activeMsgBox)// message box is visible, wait for user inputelsegameArea.advanceTime(event.passedTime);
}// the game area class advances its juggler in the
// "advanceTime" method
private function advanceTime(passedTime:Number):void
{gameJuggler.advanceTime(passedTime);
}

上面的代码已经将游戏的动画部分和消息提示框部分分离。

另外一种方法是你不在通过juggler来控制Tween补间动画。你需要让你的类实现IAnimatable接口,这样你就可以添加juggler,这个接口的使用方法如下:

function advanceTime(time:Number):void

通过这种方法,你可以创建一个简单的类似于MovieClip的类,在“advanceTime”方法中,它可以帮你完成贴图变化。在启动这个影片的时候你只需要为他添加一个juggler即可。

现在引发了另外一个值得关注的问题,我们如何从juggler中移除一个对象呢?

补间一旦完成,他们会从juggler中被自动删除。但对数对象是如此,但是像MovieClip类,当你决定他不在执行动画的时候,他才会被移除。

如果你想自定义类,并且实现juggler中自动删除功能,那么需要监听“Event.REMOVE_FROM_JUGGLER”事件。但是juggler监听到这个事件的时候对象将被删除。

回调函数

还有另外一种动画类型,有时你想在未来做些什么事情。比如玩家用光了他的所有技能能量,那么你不希望立刻让游戏停止,你可能希望弹出一个"gameOver"的提示,然后在三秒钟之后退回到主画面。

juggler能够非常容易的做到这一点。你需要先弹出gameover,并且让游戏暂停。然后你只要暂停所有动画并让gameover方法延迟一段时间就可以了。

你只需要下面这样的语句就可以做到这一点:

Starling.juggler.delayCall(gameOver, 3);

“gameOver”函数是在3秒钟之后被调用的函数(当时间到的时候juggler会自动调用这个函数)。

来自:http://www.starlinglib.com/wiki/StarlingManual:%E5%8A%A8%E7%94%BB

Starling 动画功能相关推荐

  1. 组态王图素制作_组态王的图形及动画功能

    组态王工具箱中的基本图素:直线.扇形.填充图形(封闭图形,内部可填充色彩,有:椭圆和圆角矩形).折线.管道.多边形.文本.按钮和点位图,它们均具有图形及动画功能.它们中填充图形类动画连接框如图1所表示 ...

  2. android 自定义 对号,Android自定义View实现打钩动画功能

    先上效果图 动图 静态图 1. 回顾 [Android自定义View:一个精致的打钩小动画]上一篇文章,我们已经实现了基本上实现了控件的效果了,但是...但是...过了三四天后,仔细看回自己写的代码, ...

  3. paraview高级动画功能

    下面通过一些实例展示一下paraview的高级动画功能,下面演示的实例来自paraview自带的算例,位置如下图所示: 1 .熟悉动画视图(Animation View) 打开can.ex2,选中所有 ...

  4. 使用HTML+CSS+JS模拟比赛晋级的动画功能

    使用HTML+CSS+JS模拟比赛晋级的动画功能 1.需求描述 2.代码实现 3.效果演示 系统:Win10 Chrome:106.0.5249.119 演示视频:[英雄联盟]S12全球总决赛冠军预测 ...

  5. android爬楼梯动画,[转载]利用PPT的自定义动画功能制作爬楼梯的动态效果

    利用PPT的自定义动画功能制作爬楼梯的动态效果 职场中,PPT报告总是少不了的,如何能让PPT与众不同.华丽而不失分寸呢?PPT中的自定义动画是一个不错的选择.我很喜欢逛一些PPT,有时看见不错的动画 ...

  6. python模拟足球射门_使用PyQt5的动画功能实现足球射门效果

    QT作为一个全面的桌面应用程序开发包,其自然提供了对图像的动画支持.本篇文章中,就来简单地在PYQt5中使用Animation动画功能实现一个足球射门的动画效果. 本篇将会依次完成以下功能: 在GUI ...

  7. 如何在Unity5.0 下实现贴图材质的Animation动画功能

    在太空射击游戏中,需要制作一个火星背景图片,为动态的太空星空背景:如何用unity5自带的Animation实现此动画功能为关键: 实现步骤如下: 1,  首先产生一个plane作为火星背景: 2,新 ...

  8. Transitions的动画功能

    Transitions功能的使用方法 Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能 用法如下: transition:property d ...

  9. Cocos骨骼动画功能解密

    在游戏中,人物的各种动作是必不可少,一般实现人物动作的方式有两种,序列帧动画或骨骼动画.Cocos在更新到2.x版本之后,便没有了骨骼动画的功能,使得开发者非常困扰.终于在本次更新中,Cocos编辑器 ...

最新文章

  1. JAVA Calendar方法详解
  2. idea下的工具栏中services不见了,怎么调出来?
  3. C++的黑科技(深入探索C++对象模型)
  4. python文件的用法,Python 文件 readlines() 使用方法及示例
  5. 【Kotlin】抽象类 ( 声明 | 抽象类成员 | 抽象类继承 | 抽象方法覆盖 | 抽象方法实现 )
  6. Python 图像处理篇-利用opencv库和numpy库读取包含中文路径下的本地图片实例演示
  7. EXC中时间控件的使用
  8. [构造训练]CF1227G Not Same,CF1375H Set Merging,CF1364E X-OR
  9. MyBatis核心接口和类
  10. EF Code First 学习笔记:约定配置
  11. 【SQL Server】 SQL Server Management Studio不允许保存更改,组织保存要求解决方案
  12. 外卖返利淘宝客小程序公众号淘宝客APP花卷云美团饿了么返利系统
  13. 如何利用计算机截屏快捷键,电脑怎么截图 电脑选区域截图怎么截 电脑截图快捷键是什么...
  14. 原生js预览ofd文件,JavaScript
  15. SuperData最新报告:2017年VR硬件营收将达到36亿美元
  16. linux 压缩保持属性不变,linux文件压缩
  17. 欢迎光临阿里云栖大会SAP展区(C区301)!
  18. 服务过美国总统竞选的非传统投票UI [解析及DEMO]
  19. SpringCloud 小案例 -- SpringCloud netfilx 使用
  20. sql查询教师表中比A部门最低工资高的所有老师

热门文章

  1. 思科模拟器叫什么_《班主任模拟器》第155关怎么过 通关技巧分享
  2. ❤️《集成SSM框架—图书系统》Mybatis+Spring+SpirngMVC
  3. 计算年龄案例(JS)
  4. Angular 响应式表单 patchValue和setValue
  5. 云南计算机专业笔试题库,2010云南省全国计算机等级考试二级笔试试卷VB考试题库...
  6. 阿里云成为国内首个时序数据库标准工作组成员
  7. unity中的rigibody 和 collider 讲解
  8. python列表用法大全
  9. Android开发实践:Java层与Jni层的数组传递
  10. 【汇编语言与计算机系统结构笔记09】程序栈,(x86-32)过程调用,栈帧,寄存器使用惯例