7.3 动画的实现

概述

WPF提供了强大的动画系统，允许开发者通过声明式或代码方式创建流畅的动态效果。本节将深入探讨WPF动画的核心机制、类型及实现方法。

1. WPF动画基础

1.1 动画核心概念

  • 时间线（Timeline）：所有动画的基类，控制动画的持续时间、重复行为等
  • 依赖属性驱动：WPF动画通过修改目标对象的依赖属性值实现效果
  • 硬件加速：利用DirectX实现高性能渲染

1.2 动画类型

类型说明典型应用场景
From/To/By 动画指定起始值、结束值或变化量简单属性变化
关键帧动画定义多个关键时间点的值复杂运动路径
路径动画沿几何路径运动曲线轨迹移动

2. 实现动画的三种方式

2.1 XAML声明式动画

<Button Content="Animate Me">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetProperty="Width"
                        From="100" To="300" Duration="0:0:1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

2.2 代码动态创建

DoubleAnimation widthAnimation = new DoubleAnimation
{
    From = 100,
    To = 300,
    Duration = TimeSpan.FromSeconds(1)
};

myButton.BeginAnimation(Button.WidthProperty, widthAnimation);

2.3 结合样式与模板

<Style TargetType="Button">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation 
                            Storyboard.TargetProperty="Background.Color"
                            To="LightBlue" Duration="0:0:0.3"/>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>

3. 高级动画技术

3.1 缓动函数（Easing Functions）

<DoubleAnimation EasingFunction="{StaticResource ElasticEase}"
                 From="0" To="500" Duration="0:0:2"/>

常用缓动函数：

  • BounceEase：弹跳效果
  • ElasticEase：弹性振荡
  • CubicEase：平滑加速/减速

3.2 关键帧动画

<PointAnimationUsingKeyFrames Storyboard.TargetProperty="Center">
    <LinearPointKeyFrame KeyTime="0:0:0" Value="50,50"/>
    <DiscretePointKeyFrame KeyTime="0:0:1" Value="100,100"/>
    <SplinePointKeyFrame KeyTime="0:0:2" Value="200,200" 
                         KeySpline="0.5,0 0.5,1"/>
</PointAnimationUsingKeyFrames>

3.3 动画组合

  • ParallelTimeline：并行执行多个动画
  • SequenceTimeline：顺序执行动画
  • ControllableStoryboard：提供暂停/恢复控制

4. 性能优化建议

  1. 优先使用RenderTransform替代LayoutTransform
  2. 对静态内容使用BitmapCache
  3. 合理设置Timeline.DesiredFrameRate
  4. 避免在动画中频繁触发布局计算
  5. 考虑使用UIElement.CacheMode

实战示例：创建加载动画

<Canvas>
    <Ellipse x:Name="loadingDot" Width="20" Height="20" Fill="Blue">
        <Ellipse.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
        </Ellipse.RenderTransform>
    </Ellipse>
    
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)">
                        <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                        <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
                        <LinearDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

常见问题解答

Q：如何停止正在运行的动画？ A：使用Storyboard.Stop()方法或设置FillBehavior="Stop"

Q：动画结束后如何保持最终状态？ A：设置动画的FillBehavior="HoldEnd"

Q：如何实现动画的链式触发？ A：使用Storyboard.Completed事件或BeginStoryboard.HandoffBehavior

Last Updated::