动效

FairyGUI不仅提供了静态UI的编辑功能,而且提供了强大的动效编辑功能,让你的UI可以轻松动起来。

名称解释

编辑动效

在动效列表视图,创建新动效或者双击某个动效后进入到动效编辑模式。

要退出动效编辑模式,点击舞台右上方的按钮:

在动效编辑时,不能增加和删除元件,不能修改控制器。如果当前帧的属性类型不是“改变位置”,那么无法移动元件;如果当前帧的属性类型“改变大小”,那么无法改变元件的大小。

在舞台上选中一个元件后(或不选中任何元件,在舞台空白处右键),从右键菜单中创建时间轴:

不同的元件可以创建的类型有所不同。

注意:“组”支持的动效类型很少,如果需要复杂的动作,请改用组件。

动效属性

帧属性

帧数据

不同的帧类型有不同的数据。这里只介绍改变位置一种类型。

引导线功能必须配合Tween使用,在Tween的开始关键帧勾选引导线功能。

通过以下两种方式进入编辑引导线模式:

通过以下三种方式退出编辑引导线模式:

引导线编辑界面如下:

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

    增加路径点:右键点击舞台空白,在菜单中选择“增加点”;

    删除路径点:右键点击路径点,在菜单中选择“删除点”。

  2. 控制点。可以按住控制点并拖动从而改变它的坐标,也可以在属性面板直接输入它的坐标。每个路径点都有两个控制点,他们之间用白线连接,拖动其中一个控制点时,另一个控制点也会同时移动,这种机制可以使曲线在这个点平滑变化。

    如果需要取消这个平滑功能,在右键菜单中不勾选“平滑”:

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

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;