动画技术全解析：从基础到高级应用

# 动画技术全解析：从基础到高级应用 ## 1. 动画基础属性 ### 1.1 By 属性 在动画制作中，除了使用 `To` 属性指定目标值，还可以使用 `By` 属性。`By` 属性用于创建一个按设定量改变值的动画，而非指定一个特定的目标值。例如，要创建一个使按钮比当前大小增大 10 像素的动画，可以这样写： ```xml <DoubleAnimation Storyboard.TargetName="cmdGrow" By="10" Storyboard.TargetProperty="Width" Duration="0:0:5"></DoubleAnimation> ``` 无论这个动画运行多少次，按钮当前已经有多大，点击这个按钮都会使按钮增大。不过，并非所有动画类都提供 `By` 属性，对于非数值数据类型，如 `Color` 结构（用于 `ColorAnimation`），使用 `By` 属性就没有意义。 ### 1.2 Duration 属性 `Duration` 属性表示动画从开始到结束的时间间隔，可以使用毫秒、分钟、小时等单位。它需要一个 `Duration` 对象，这个对象类似于 `TimeSpan`。实际上，`Duration` 结构定义了一个隐式转换，可以根据需要将 `System.TimeSpan` 对象转换为 `System.Windows.Duration` 对象。例如： ```csharp widthAnimation.Duration = TimeSpan.FromSeconds(5); ``` 微软引入 `Duration` 类型而不是直接使用标准的 `TimeSpan`，是因为 `Duration` 类型可以设置两个 `TimeSpan` 对象无法表示的特殊值：`Duration.Automatic` 和 `Duration.Forever`。在当前示例中，这两个值都没有用。`Automatic` 将动画持续时间设置为 1 秒，`Forever` 使动画无限长，这会导致动画没有任何效果。但在创建可逆动画时，`Duration.Forever` 就变得有用了。要创建可逆动画，将 `AutoReverse` 属性设置为 `true`。这样，动画完成后会反向播放，回到初始值，动画总时长会翻倍。由于可逆动画会回到初始状态，`Duration.Forever` 可以使动画无限重复。 ### 1.3 动画生命周期 从技术上讲，Silverlight 动画是临时的，这意味着它们不会改变底层属性的值。在动画活动期间，它会覆盖属性值。这是依赖属性的工作方式导致的，这一细节经常被忽略，可能会造成很大的困惑。单向动画（如按钮增大动画）在运行结束后仍然保持活动状态，因为动画需要将按钮的宽度保持在新的大小。这可能会导致一个不寻常的问题：如果在动画完成后尝试使用代码修改属性值，代码似乎没有效果。代码为属性分配了一个新的本地值，但动画值仍然优先。可以通过以下几种方法解决这个问题： - **创建将元素重置为原始状态的动画**：不设置 `To` 属性。例如，按钮缩小动画会将按钮的宽度减小到最后设置的大小，之后就可以在代码中更改它。 - **创建可逆动画**：将 `AutoReverse` 属性设置为 `true`。例如，按钮增大动画完成后会反向播放，使按钮回到原始宽度，动画总时长翻倍。 - **更改 `FillBehavior` 属性**：通常，`FillBehavior` 设置为 `HoldEnd`，这意味着动画结束后，它会继续将最终值应用于目标属性。如果将 `FillBehavior` 更改为 `Stop`，动画结束后，属性会立即恢复到原始值。 - **动画结束时移除动画对象**：处理动画对象或包含它的故事板的 `Completed` 事件。 前三种方法会改变动画的行为，无论如何都会使动画属性回到原始值。如果不想这样，可以使用最后一种方法。首先，在启动动画之前，附加一个在动画完成时触发的事件处理程序。可以在页面首次加载时这样做： ```csharp storyboard.Completed += storyboard_Completed; ``` 当 `Completed` 事件触发时，可以检索控制动画的故事板并停止它： ```csharp private void storyboard_Completed(object sender, EventArgs e) { Storyboard storyboard = (Storyboard)sender; storyboard.Stop(); } ``` 调用 `Storyboard.Stop()` 时，属性会恢复到动画开始前的值。如果不想这样，可以记录动画当前应用的值，移除动画，然后手动设置新属性： ```csharp double currentWidth = cmdGrow.Width; storyboard.Stop(); cmdGrow.Width = currentWidth; ``` 需要注意的是，这会改变属性的本地值，可能会影响其他动画的工作方式。例如，如果使用一个未指定 `From` 属性的动画来处理这个按钮，它会将这个新应用的值作为起点。在大多数情况下，这正是你想要的行为。 ### 1.4 RepeatBehavior 属性 `RepeatBehavior` 属性允许控制动画的重复方式。如果要将动画重复固定次数，可以指定重复次数，后面跟上 `x`。例如，以下动画会重复两次： ```xml <DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="2x" Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation> ``` 在代码中，可以将重复次数传递给 `RepeatBehavior` 构造函数： ```csharp widthAnimation.RepeatBehavior = new RepeatBehavior(2); ``` 运行这个动画时，按钮会增大（持续五秒），然后跳回原始值，接着再次增大（持续五秒），最终达到页面的全宽。如果将 `AutoReverse` 属性设置为 `true`，行为会稍有不同：整个动画会正向和反向完成（即按钮先增大再缩小），然后再次重复。除了设置重复次数，还可以使用 `RepeatBehavior` 设置重复间隔。为此，将 `RepeatBehavior` 属性设置为一个时间值而不是单个数字。例如，以下动画会重复 13 秒： ```xml <DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="0:0:13" Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation> ``` 在代码中可以这样写： ```csharp widthAnimation.RepeatBehavior = new RepeatBehavior(TimeSpan.FromSeconds(13)); ``` 在这个例子中，`Duration` 属性指定整个动画需要 5 秒。因此，13 秒的 `RepeatBehavior` 会触发两次重复，然后在第三次重复进行到 3 秒时停止。还可以使用 `RepeatBehavior` 只执行部分动画，方法是使用小数重复次数或小于动画持续时间的 `TimeSpan`。最后，可以使用 `RepeatBehavior.Forever` 值使动画无限重复： ```xml <DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="Forever" Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation> ``` ### 1.5 同时动画 `Storyboard` 类可以容纳多个动画，并且这些动画会作为一个组进行管理，即它们会同时启动。例如，以下故事板包含两个动画，一个作用于按钮的 `Width` 属性，另一个作用于 `Height` 属性。由于这些动画被分组在一个故事板中，它们会同时增加按钮的尺寸： ```xml <Storyboard x:Name="storyboard" Storyboard.TargetName="cmdGrow"> <DoubleAnimation Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation> <DoubleAnimation Storyboard.TargetProperty="Height" To="300" Duration="0:0:5"></DoubleAnimation> </Storyboard> ``` 这个例子将 `Storyboard.TargetName` 属性从 `DoubleAnimation` 移到了 `Storyboard` 上。这是一个可选的更改，但可以避免在每个动画对象上都设置一次该属性。如果动画对象需要作用于不同的元素，就不能使用这个快捷方式。在这个例子中，两个动画的持续时间相同，但这不是必需的。对于结束时间不同的动画，需要考虑它们的 `FillBehavior` 属性。如果一个动画的 `FillBehavior` 属性设置为 `HoldEnd`（默认值），它会保持该值直到故事板中的所有动画都完成。此时，故事板的 `FillBehavior` 会生效，要么继续保持两个动画的最终值（`HoldEnd`），要么将它们恢复到初始值（`Stop`）。另一方面，如果有多个动画，其中一个的 `FillBehavior` 设置为 `Stop`，那么这个动画完成后，其动画属性会立即恢复到初始值，即使故事板中的其他动画仍在运行。当处理多个同时进行的动画时，`BeginTime` 和 `SpeedRatio` 这两个动画类属性会很有用。`BeginTime` 设置动画开始前的延迟时间（以 `TimeSpan` 表示）。这个延迟会加到总时间上，所以一个 5 秒的动画加上 5 秒的延迟会需要 10 秒。`BeginTime` 在同步同时开始但应按顺序应用效果的不同动画时很有用。`SpeedRatio` 用于增加或减少动画的速度。通常，`SpeedRatio` 为 1。如果增大它，动画会更快完成（例如，`SpeedRatio` 为 5 时，动画会快 5 倍）。如果减小它，动画会变慢（例如，`SpeedRatio` 为 0.5 时，动画会花费两倍的时间）。虽然整体效果与更改动画的 `Duration` 属性相同，但设置 `SpeedRatio` 更便于控制同时进行的动画如何重叠。 ## 2. 动画播放控制 ### 2.1 播放控制示例 可以使用 `Storyboard` 类的方法来启动、停止或暂停动画。以下是一个示例，页面使用网格将两个 `Image` 元素叠加在同一位置。最初，只有显示多伦多城市地标白天场景的最顶层图像可见。随着动画运行，它将图像的不透明度从 1 降低到 0，最终使夜景完全显示出来，就像延时摄影一样。