为属性变化添加动画

要创建动画，请为需要动画化的属性选择相应的动画类型，并根据所需的行为类型应用动画。

您可以从“Components ” > “Default Components ” > “Animation ”中拖动动画组件到“Navigator ”或“2D ”视图中，以创建这些组件的实例。

您还可以通过使用不同的动画技术来实现类似的效果。有关详细信息，请参阅“添加动画”。

应用动画

当属性值发生变化时，会应用属性动画。颜色和数字动画是针对特定用途的属性动画类型。请在“Properties ” > “Animation Targets ”中指定动画设置。

制作颜色变化动画

例如，您可以对Rectangle组件实例的Color 属性值应用动画，使其在以毫秒为单位的指定时间内，从当前颜色过渡到另一种颜色。

1. 在“2D ”视图中创建一个Color Animation 组件的实例。
2. 转到“Properties ”>“Animation Targets ”。
3. 在“Target ”中，选择要进行动画处理的组件。
4. 在“Property ”中，输入要添加动画效果的属性。若要为多个属性添加动画效果，请用逗号分隔。

   

5. 在“Color Animation ”部分，在“From color ”中选择原始颜色，在“To color ”中选择新颜色。
6. 在“Animation ”部分中，通过“Duration ”设置动画的持续时间。

为数值变化添加动画

同样地，若要在属性数值发生变化时应用动画效果，请创建一个Number Animation 组件的实例。

1. 转到“Properties ” > “Number Animation ”。

   

2. 在“From ”中选择原始值，在“To ”中选择新值。
3. 在“Animation ”部分，设置“Duration ”中的动画持续时间。

例如，您可以对Rectangle实例的X 属性值应用动画，使其在以毫秒为单位的指定时间内，从 x 轴上的当前位置移动到另一个位置。若要使组件在 x 和 y 轴上同时移动，请在Properties 字段中输入 x 和 y，并用逗号分隔。

有关使用属性动画来动画化组件缩放比例和不透明度的示例，请参阅“咖啡机”示例。

设置非动画属性

若要在动画过程中立即更改属性值，同时不使该属性变化产生动画效果：

1. 在“Navigator ”中创建Property Action 组件的实例。
2. 转到“Properties ”>Property Action

   

3. 在“Value ”字段中设置该值。

这在动画过程中设置非动画属性值时非常有用。

例如，您可以创建一个Sequential Animation 组件的实例，该实例包含两个Property Action 组件，它们分别围绕着一个Number Animation 组件。第一个属性操作将矩形（Rectangle）的Opacity 属性设置为0.5 ，数值动画会改变图像的宽度，而第二个属性操作则将不透明度恢复为1 。

播放动画

要指定动画播放设置，请转至“Properties ” > “Animation ”。

若要自动运行动画，请选择“Running ”。动画将按您在“Duration ”字段中指定的时间运行。

您可以将动画的“running”属性连接到组件发出的信号，例如当用户点击按钮时播放动画。有关更多信息，请参阅“将组件连接到信号”。

若要循环播放动画多次，请在“Loops ”字段中设置播放次数。将该值设为 -1，动画将持续循环播放，直到被显式停止。

若要指定动画在停止时应运行至结束，请选择“Run to end ”。当设置了“Loops ”属性时，此行为最为有用，因为动画将正常播放完毕，但不会重新开始。

除非将组件中的所有动画纳入“Parallel Animation ”或“Sequential Animation ”组件中进行分组管理，否则这些动画将并行运行。

要暂停动画，请选择“ ”（Paused ）。

要为动画添加缓动曲线，请在“Easing Curve ”字段中选择“ ”（Easing Curve Editor ）按钮。

播放动画组

您可以创建多个动画，这些动画可以并行或依次运行。

要管理一组将同时播放的动画：

1. 在“Navigator ”中创建一个Parallel Animation 组件的实例。
2. 将其他动画拖放到该组件上。

若要按指定顺序依次播放动画，请改用创建Sequential Animation 的实例。

例如，一个横幅组件可能需要依次显示多个图标或标语。Opacity 属性的值可设置为1.0 ，表示不透明对象。使用顺序动画时，每个不透明度动画将在前一个动画结束后播放；而使用并行动画时，则会同时播放所有动画。

如果您将单个动画放入并行或顺序动画组中，就无法再独立启动或停止这些动画。您必须将它们作为一个组来启动和停止。

在分组动画之间添加暂停

在“动画组”（Sequential Animation ）中，“Pause Animation ”表示在指定时长内没有任何动作发生的步骤。

要在两个动画之间设置暂停：

1. 在“Navigator ”中的“Sequential Animation ”内创建“Pause Animation ”组件的实例。
2. 转到“Properties ” > “Animation ”。
3. 选择“Paused ”。
4. 在“Duration ”字段中设置暂停时长。

性能注意事项

您可以在 UI 中使用流畅性、动态过渡以及视觉效果来获得极佳的效果。但是，在使用某些受支持的功能时需要格外小心，因为它们可能会影响 UI 的性能。

通常，对属性进行动画处理会导致引用该属性的任何绑定被重新评估。通常，这正是您所期望的，但在某些情况下，最好在执行动画之前禁用绑定，并在动画完成后重新分配绑定。

请避免在动画运行期间执行 JavaScript。例如，应避免在 x 属性动画的每一帧中执行复杂的 JavaScript 表达式。

在创建Script Action 组件的实例时需格外注意，因为脚本动画在主线程中运行，若执行时间过长，可能会导致帧被跳过。

动画组件概览

下表列出了可用于通过编程方式对组件属性进行动画处理的组件。这些组件位于“Components ” > “Default Components ” > “Animation ”中。