动效
FairyGUI不仅提供了静态UI的编辑功能,而且提供了强大的动效编辑功能,让你的UI可以轻松动起来。
名称解释
-
时间轴元件一个属性的变化构成一条时间轴。例如一个组件,他的位置的变化可以成为一条时间轴。 -
帧时间轴由一个或多个帧做成。 -
关键帧时间轴上有很多帧,但不是所有帧都可以调整元件的属性。可以调整元件属性的帧叫“关键帧”。其他普通帧是自动生成的过渡。关键帧与普通帧在显示上的区别是中心多了个白点:
。 -
Tween在两个关键帧之间生成插值动画效果。Tween的显示为:
,即有一个箭头连接两个关键帧。
编辑动效
在动效列表视图,创建新动效或者双击某个动效后进入到动效编辑模式。
要退出动效编辑模式,点击舞台右上方的按钮:
。
在动效编辑时,不能增加和删除元件,不能修改控制器。如果当前帧的属性类型不是“改变位置”,那么无法移动元件;如果当前帧的属性类型“改变大小”,那么无法改变元件的大小。
在舞台上选中一个元件后(或不选中任何元件,在舞台空白处右键),从右键菜单中创建时间轴:

不同的元件可以创建的类型有所不同。
改变位置改变元件的位置(x,y)。改变大小改变元件的宽和高(width、height)。改变透明度改变元件的透明度(alpha)。改变旋转改变元件的旋转(rotation)。改变缩放改变元件的缩放(scaleX,scaleY)。改变倾斜改变元件的倾斜(skewX,skewY)。改变颜色对图片、文字、装载器有效,改变它们的颜色(color)属性。改变动画对动画、装载器有效,改变动画当前的播放状态(playing),或者设置当前帧(frame)。使用这个功能可以使动效轻松地和序列帧动画结合做复杂效果。改变轴心改变元件的轴心(pivotX,pivotY)。一般来说,轴心应该设置为元件的固定属性,而不是在动效里临时改变。这里只是给出一个途径,使用的情景不多。改变可见性改变元件的可见性(visible)。播放动效对组件有效,播放该组件定义的一个动效。如果当前没有选中任何元件,则播放当前容器组件的一个动效。这可以实现类似于动效嵌套的功能。例如,如果动效中有一段效果是需要循环播放的,那我们可以把它做成单独一个动效,然后再用这里的方法嵌套进来。播放声音播放一个音效。播放震动元件显示一个震动效果。改变颜色滤镜改变元件的颜色滤镜。改变文本改变文本、标签、按钮、下拉框等这些带有标题属性的Text值。改变图标改变装载器、标签、按钮、下拉框等这些带有图标属性的URL值。
注意:“组”支持的动效类型很少,如果需要复杂的动作,请改用组件。
动效属性

帧频可按需求选择24、30或60。编辑期时设定的帧频和最终的运行帧频并不相关,但更大的帧密度对制作更精细的动画有帮助。忽略显示控制器影响勾选后,动效开始时所有参与此动效的元件不受显示控制器的控制,也就是不会被显示控制器隐藏。动效结束后恢复控制。容器组件不可见时自动停止当组件移出舞台时,自动停止播放动效,节省CPU资源。自动播放当组件被加到舞台时,自动开始播放动效。重复次数自动播放的重复次数。延迟自动播放的延迟。单位秒。
帧属性

-
标签设置帧的标签,一个任意的字符串,标识这个帧,用于代码里访问。 -
Tween勾选后从这个关键帧到下一个关键帧建立一个Tween。如果没有下一个关键帧,那么这个Tween是无效的。 -
重复重复播放的次数。-1表示循环。 -
yoyo往返播放的效果。默认循环播放的效果是从起点到终点,然后又从起点到终点。勾选yoyo后,循环播放的效果是从起点到终点,再从终点到起点,依次类推。
帧数据
不同的帧类型有不同的数据。这里只介绍改变位置一种类型。

-
XY修改关键帧的值。输入框前面的勾表示,如果不勾选,则不修改元件当前的属性值。这里有一个关键点要注意。举个例子说明。当前元件的X是50,不勾选。动效结束时设置X为100,有勾选。则动效播放第一次时元件从50运动到100。动效播放第二次时,第一帧的X值是没有勾选的,也就是使用当前值,那就是100,那么动效的效果是从100运动到100,也就是看不到任何表现。这是动效的设计问题。这个勾选的功能一般只用在不参与动效的属性值。例如元件只做水平运动,那么可以不勾选Y,方便以后调整Y值时不影响动效。
-
使用百分比记录坐标用百分比方式记录坐标值。例如元件放置在容器水平中心时,x值就记录为50%。当进入到这帧时,无论容器的尺寸是多少,元件的坐标依然为中心即50%的位置。 -
使用引导线如果需要元件做曲线运动,那么可以勾选这个选项。引导线功能必须配合Tween使用,在Tween的开始关键帧勾选引导线功能。使用方法参考引导线。
引导线
通过以下两种方式进入编辑引导线模式:
- 点击右侧图标
。 - 双击舞台上的元件。
通过以下三种方式退出编辑引导线模式:
- 选中其他元件或其他关键帧。
- 双击舞台空白。
- 右键点击舞台空白,选择右键菜单中的“退出”。
引导线编辑界面如下:

-
路径点。可以按住路径点并拖动从而改变它的坐标,也可以在属性面板直接输入它的坐标:

增加路径点:右键点击舞台空白,在菜单中选择“增加点”;
删除路径点:右键点击路径点,在菜单中选择“删除点”。
-
控制点。可以按住控制点并拖动从而改变它的坐标,也可以在属性面板直接输入它的坐标。每个路径点都有两个控制点,他们之间用白线连接,拖动其中一个控制点时,另一个控制点也会同时移动,这种机制可以使曲线在这个点平滑变化。
如果需要取消这个平滑功能,在右键菜单中不勾选“平滑”:

这时再移动控制点,会发现两个控制台不再同时移动,这样曲线可以做较大的转折:

自定义缓动曲线
当缓动函数选择为Custom时,点击右侧按钮
打开曲线编辑界面:

曲线的编辑方式与引导线的编辑方式相同。
白色线是当前编辑的曲线;黑色线是参考线,可通过左上角下拉框选择标准的缓动函数,可用于制作过程中对照参考。
Transition
动效的播放在代码中启动,例如:
Transition trans = aComponent.GetTransition(“peng”);
trans.Play();
Play有多种原型,例如可以重复播放一定次数,可以在播放结束时回调等。例如:
//结束时有一个回调,但需注意,如果动效里有嵌套的动效,或者有循环的内容,必须是等全部都结束后才会回调。
trans.Play(callback);
例如可以播放动效的一部分,通过指定时间范围,例如:
//播放0.5秒-1.5秒部分的动效,即0.5秒(包含)-1.5秒(包含)之间的所有帧。
trans.Play(1, 0, 0.5, 1.5);
时间范围可以硬编码,也可以通过标签指定,通过GetLabelTime可以获得某个标签所在时间点。
也可以倒着放,但要注意倒着放之前需要先执行一次正着放。例如:
trans.playReverse();
动效可以暂停,例如:
//暂停动效播放
trans.setPaused(true);
//恢复动效播放
trans.setPaused(false);
要中途停止动效的播放,可以调用:
trans.Stop();
Stop方法也可以带参数,原型是:
public void Stop(bool setToComplete, bool processCallback);
setToComplete表示是否将组件的状态设置到播放完成的状态,如果否,组件的状态就会停留在当前时间。processCallback是否调用Play方法传入的回调函数。
注意:UI动效播放完毕后,组件的状态将停留在最后一帧,而不是回到第一帧,如果你希望动效播放完后组件的状态复原到播放前,你需要最后添加一帧重新设置组件的状态。例如一个动效,设计是透明度经过1秒从1变到0,那么动效播放结束后透明度就是0。有人会问怎样才能让动效播放完了回到第一帧,也就是透明度要等于1,那很简单,在透明度时间轴最后加一帧,设置透明度为1,那么动效播放完了透明度就是1了。
如果需要修改某个关键帧的属性值,可以使用:
//例如某帧的标签为aa,这帧是设置某个元件的XY值的,将XY的数值改为100,200。
trans.SetValue("aa", 100, 200);
可以修改某个Tween的持续时间,但修改某个Tween的时间不会使后续的Tween推迟。例如:
//修改某个Tween的持续时间为0.5秒。注意,标签应该定在Tween的开始关键帧上。
trans.SetDuration("aa", 0.5f);
可以在动效运行到某帧时触发一个回调,例如:
//运行到标签为aa的关键帧时,触发一个callback的回调。
trans.SetHook("aa", callback);
可以修改动效某个标签对应动效片段的目标对象,但必须注意,要在动效停止状态下调用,例如:
trans.SetTarget("aa", newTarget);
在Unity中,动效的播放速度默认是不受Time.timeScale影响的,但你也可以设定它受影响:
trans.ignoreEngineTimeScale = false;
也可以单独设置动效的timeScale,例如:
//动效播放的速度将会是原来的一半。
trans.timeScale = 0.5f;