动画基础全解析：从重复行为到缓动函数

### 动画基础全解析：从重复行为到缓动函数 #### 1. 动画的重复行为 在动画制作中，我们常常需要控制动画的重复方式，这时`RepeatBehavior`属性就派上用场了。它提供了多种控制动画重复的方法： - **固定次数重复**：若要让动画重复固定的次数，只需指定重复次数并在后面加上`x`。例如，让按钮宽度动画重复两次的代码如下： ```xml <DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="2x" Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation> ``` 在代码中也可以这样实现： ```csharp widthAnimation.RepeatBehavior = new RepeatBehavior(2); ``` 当运行这个动画时，按钮会先在五秒内变大，然后回到初始大小，接着再次变大，最终达到页面的全宽。若设置了`AutoReverse`为`true`，动画会先正向完成，再反向完成（即按钮先变大再变小），然后重复这个过程。 - **按时间间隔重复**：除了设置重复次数，还可以设置重复的时间间隔。例如，让动画重复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.Forever`可以让动画无限重复： ```xml <DoubleAnimation Storyboard.TargetName="cmdGrow" RepeatBehavior="Forever" Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation> ``` #### 2. 同时进行的动画 `Storyboard`类可以包含多个动画，并且这些动画会作为一个组同时启动。例如，以下故事板包含两个动画，分别作用于按钮的宽度和高度属性，使按钮的尺寸同时增加： ```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`表示。例如，一个五秒的动画加上五秒的延迟，总共需要十秒。`BeginTime`在同步同时开始但需要按顺序生效的不同动画时很有用。`SpeedRatio`用于增加或减少动画的速度，默认值为1。例如，`SpeedRatio`为5时，动画会快五倍；`SpeedRatio`为0.5时，动画会慢一半。虽然改变`SpeedRatio`的效果与改变动画的`Duration`属性相同，但设置`SpeedRatio`更容易控制同时进行的动画的重叠情况。 #### 3. 动画播放的控制 使用`Storyboard.Begin()`方法可以启动动画，`Storyboard`类还提供了停止或暂停动画的方法。以下是一个示例，通过动画实现图片从白天场景过渡到夜晚场景的效果： 首先，定义包含两张图片的`Grid`： ```xml <Grid> <Image Source="night.jpg"></Image> <Image Source="day.jpg" x:Name="imgDay"></Image> </Grid> ``` 然后，在页面的`Resources`集合中定义实现淡入淡出效果的故事板： ```xml <Storyboard x:Name="fadeStoryboard"> <DoubleAnimation x:Name="fadeAnimation" Storyboard.TargetName="imgDay" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:10"> </DoubleAnimation> </Storyboard> ``` 为了使这个示例更有趣，页面底部添加了几个按钮，用于控制动画的播放，包括开始、暂停、恢复、停止和定位到动画中间位置。事件处理代码使用`Storyboard`对象的相应方法，具体代码如下： ```csharp private void cmdStart_Click(object sender, RoutedEventArgs e) { fadeStoryboard.Begin(); } private void cmdPause_Click(object sender, RoutedEventArgs e) { fadeStoryboard.Pause(); } private void cmdResume_Click(object sender, RoutedEventArgs e) { fadeStoryboard.Resume(); } private void cmdStop_Click(object sender, RoutedEventArgs e) { fadeStoryboard.Stop(); } private void cmdMiddle_Click(object sender, RoutedEventArgs e) { // Start the animation, in case it's not currently underway. fadeStoryboard.Begin(); // ```