属性变化动画

要创建动画，请为要动画的属性使用适当的动画类型，并根据所需的行为类型应用动画。

您可以将动画组件从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 中设置动画的持续时间。

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

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

设置非动画属性

要在动画期间立即更改属性值，而不对属性更改进行动画处理，请执行以下操作

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

   

3. 在Value 字段中设置值。

这对于在动画期间设置非动画属性值非常有用。

例如，您可以创建一个Sequential Animation 组件实例，该实例包含围绕Number Animation 组件实例的两个Property Action 组件实例。第一个属性操作会将矩形的Opacity 属性设置为0.5 ，数字动画会改变图片的宽度，第二个属性操作会将不透明度设置回1 。

播放动画

要指定播放动画的设置，请访问Properties >Animation 。

要自动运行动画，请选择Running 。动画会在您在Duration 字段中指定的时间内运行。

您可以将动画的运行属性与组件发出的信号连接起来，以便在用户选择按钮时播放动画。更多信息，请参阅将组件连接到信号。

要多次循环播放动画，可在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 字段中设置暂停的持续时间。

性能注意事项

您可以在用户界面中使用流动性、动态过渡以及视觉效果，以达到最佳效果。不过，在使用某些受支持的功能时需要注意，因为它们可能会影响用户界面的性能。

一般来说，动画属性会导致任何引用该属性的绑定都要重新评估。通常，这正是您想要的，但在某些情况下，最好在执行动画之前禁用绑定，然后在动画完成后重新分配绑定。

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

在创建Script Action 组件实例时要特别小心，因为脚本动画是在主线程中运行的，因此如果完成时间过长，可能会导致跳帧。

动画组件概述

下表列出了可用于以编程方式为组件属性制作动画的组件。这些组件可在Components >Default Components >Animation 中找到。