1.1 屬性動畫系統(tǒng)

WPF動畫的核心在于其基于時間線的屬性變化系統(tǒng)。與傳統(tǒng)的幀-based動畫不同，WPF動畫通過在一段時間內(nèi)持續(xù)修改依賴項屬性的值來實現(xiàn)動畫效果

1.2 動畫類型分類

WPF主要提供三種動畫實現(xiàn)方式

td {white-space:nowrap;border:0.5pt solid #dee0e3;font-size:10pt;font-style:normal;font-weight:normal;vertical-align:middle;word-break:normal;word-wrap:normal;}

二、WPF動畫的三大實現(xiàn)技術(shù)

2.1 線性插值動畫

線性插值動畫是最基本的動畫類型，適用于大多數(shù)簡單的高度、寬度、透明度等變化效果。WPF為不同的數(shù)據(jù)類型提供了相應(yīng)的動畫類：

td {white-space:nowrap;border:0.5pt solid #dee0e3;font-size:10pt;font-style:normal;font-weight:normal;vertical-align:middle;word-break:normal;word-wrap:normal;}

C#代碼實現(xiàn)示例：

private void Button_Click(object sender, RoutedEventArgs e)
{
    // 創(chuàng)建DoubleAnimation實例
    DoubleAnimation doubleAnimation = new DoubleAnimation();
    
    // 設(shè)置起始值
    doubleAnimation.From = btn1.Width;
    // 設(shè)置結(jié)束值
    doubleAnimation.To = 250;
    // 設(shè)置持續(xù)時間
    doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
    // 應(yīng)用動畫到按鈕的Width屬性
    btn1.BeginAnimation(Button.WidthProperty, doubleAnimation);
}

XAML實現(xiàn)示例：

<Button Width="150" Height="60" Content="動畫按鈕"><Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><DoubleAnimationStoryboard.TargetProperty="Width"From="150" To="250" 
                        Duration="0:0:5"/></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button>

2.2 關(guān)鍵幀動畫

關(guān)鍵幀動畫提供了更精確的控制，允許在動畫時間線的特定點定義特定的值。這對于創(chuàng)建非線性的復(fù)雜動畫效果特別有用

XAML關(guān)鍵幀動畫示例：

<Button Name="myButton" Height="40" Content="OK!"><Button.Triggers><EventTrigger RoutedEvent="Button.Loaded"><BeginStoryboard><Storyboard><StringAnimationUsingKeyFrames 
                        Storyboard.TargetProperty="Content"Duration="0:0:3"><DiscreteStringKeyFrame Value="" KeyTime="0:0:0" /><DiscreteStringKeyFrame Value="O" KeyTime="0:0:1" /><DiscreteStringKeyFrame Value="OK" KeyTime="0:0:1.5" /><DiscreteStringKeyFrame Value="OK!" KeyTime="0:0:2" /></StringAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button>

2.3 故事板(Storyboard)與觸發(fā)器(Triggers)

故事板是WPF中用于組織和管理動畫的核心容器，它可以包含多個動畫并控制它們的播放

。觸發(fā)器則定義了動畫啟動的條件。

故事板在ControlTemplate中的應(yīng)用示例：

<ControlTemplate x:Key="MyControlTemplate" TargetType="{x:Type ContentControl}"><Border Name="innerBorder" Padding="10" Background="White"><ContentPresenter Content="{TemplateBinding Content}" /></Border><ControlTemplate.Triggers><!-- 事件觸發(fā)器示例 --><EventTrigger RoutedEvent="Border.MouseEnter" SourceName="innerBorder"><BeginStoryboard><Storyboard><ColorAnimationStoryboard.TargetName="innerBorder"Storyboard.TargetProperty="Background.Color"From="White" To="#CCCCFF"Duration="0:0:3" AutoReverse="True" /></Storyboard></BeginStoryboard></EventTrigger><!-- 屬性觸發(fā)器示例 --><Trigger Property="IsMouseOver" Value="True" SourceName="innerBorder"><Trigger.EnterActions><BeginStoryboard><Storyboard><ColorAnimation 
                            Storyboard.TargetName="innerBorder" 
                            Storyboard.TargetProperty="Background.Color"To="Purple" Duration="0:0:1" /></Storyboard></BeginStoryboard></Trigger.EnterActions></Trigger></ControlTemplate.Triggers></ControlTemplate>

三、實用動畫效果詳解

3.1 變換動畫(Transform Animations)

變換動畫可以對元素進行旋轉(zhuǎn)、縮放、傾斜和平移等操作，是創(chuàng)建動態(tài)效果的重要手段

動畫示例：

<Button Content="旋轉(zhuǎn)按鈕" Width="100" Height="30"><Button.RenderTransform><RotateTransform x:Name="rotateTransform" Angle="0"/></Button.RenderTransform><Button.Triggers><EventTrigger RoutedEvent="Button.MouseEnter"><BeginStoryboard><Storyboard><DoubleAnimationStoryboard.TargetName="rotateTransform"Storyboard.TargetProperty="Angle"From="0" To="360" Duration="0:0:2"RepeatBehavior="Forever"/></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers></Button>

縮放動畫C#實現(xiàn)：

private void AnimatedButton_Click(object sender, RoutedEventArgs e)
{
    // 獲取或創(chuàng)建縮放變換
    ScaleTransform scale = animatedButton.RenderTransform as ScaleTransform;
    if (scale == null)
    {
        scale = new ScaleTransform();
        animatedButton.RenderTransform = scale;
    }
    
    // 創(chuàng)建縮放動畫
    DoubleAnimation scaleXAnimation = new DoubleAnimation
    {
        From = 1.0,
        To = 1.3,
        Duration = TimeSpan.FromSeconds(0.1),
        AutoReverse = true
    };
    
    DoubleAnimation scaleYAnimation = new DoubleAnimation
    {
        From = 1.0,
        To = 1.3,
        Duration = TimeSpan.FromSeconds(0.1),
        AutoReverse = true
    };
    
    // 應(yīng)用動畫
    scale.BeginAnimation(ScaleTransform.ScaleXProperty, scaleXAnimation);
    scale.BeginAnimation(ScaleTransform.ScaleYProperty, scaleYAnimation);
}

3.2 顏色與透明度動畫

顏色動畫可以創(chuàng)建平滑的顏色過渡效果，常用于背景、前景或邊框顏色的變化。

顏色動畫示例：

<Window.Resources><Storyboard x:Key="ColorAnimationStoryboard"><ColorAnimationStoryboard.TargetName="animatedButton"Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"From="Green"To="GreenYellow"Duration="0:0:1.5"AutoReverse="True"RepeatBehavior="Forever" /></Storyboard></Window.Resources><Button Name="animatedButton" Width="100" Height="50" Content="顏色動畫" 
        Background="Green" Click="Button_Click"/>

透明度動畫C#代碼：

private void StartOpacityAnimation()
{
    DoubleAnimation opacityAnimation = new DoubleAnimation
    {
        From = 1.0,      // 完全不透明
        To = 0.4,        // 半透明
        Duration = TimeSpan.FromSeconds(1),
        AutoReverse = true,
        RepeatBehavior = RepeatBehavior.Forever
    };
    
    // 應(yīng)用動畫到UI元素的Opacity屬性
    myElement.BeginAnimation(UIElement.OpacityProperty, opacityAnimation);
}

四、高級動畫技術(shù)與最佳實踐

4.1 動畫時間線控制

WPF提供了豐富的時間線屬性，用于精確控制動畫的行為

• Duration：動畫的持續(xù)時間

• BeginTime：動畫開始前的延遲時間

• SpeedRatio：動畫速度的倍數(shù)

• AccelerationRatio/DecelerationRatio：加速和減速比率，使動畫更自然

• AutoReverse：是否自動反向播放

• FillBehavior：動畫結(jié)束后的行為（保持結(jié)束值或恢復(fù)原值）

復(fù)雜時間線配置示例：

DoubleAnimation animation = new DoubleAnimation();
animation.From = 50;
animation.To = 200;
animation.Duration = TimeSpan.FromSeconds(10);
animation.AccelerationRatio = 0.3;  // 前30%的時間加速
animation.DecelerationRatio = 0.2;  // 后20%的時間減速
animation.AutoReverse = true;
animation.RepeatBehavior = RepeatBehavior.Forever;

myElement.BeginAnimation(FrameworkElement.HeightProperty, animation);

4.2 動畫性能優(yōu)化

1. 使用RenderTransform替代LayoutTransform

2. RenderTransform具有更好的性能，因為它不影響布局系統(tǒng)

3. 合理使用動畫緩存

4. 對于復(fù)雜動畫，考慮使用BitmapCache或CacheMode提高渲染性能。

5. 避免不必要的動畫

6. 只有在增強用戶體驗時才使用動畫，過多的動畫會導(dǎo)致性能下降。

揭秘WPF C#動畫精髓:輕松實現(xiàn)動態(tài)界面效果全攻略 - 云原生實踐

不可不知的WPF動畫(Animation) - 老碼識途呀 - 博客園

動畫釋放

WPF動畫不會直接導(dǎo)致內(nèi)存泄漏，但是會有一些其他問題。讓我詳細解釋：

不會導(dǎo)致內(nèi)存泄漏的原因：

1. 動畫對象本身會被GC回收

   // 這些對象會被垃圾回收器自動回收
   var animation = new DoubleAnimation();  // 即使不調(diào)用 BeginAnimation(null)，也會被回收
   ToolBarTranslateTransform.BeginAnimation(TranslateTransform.XProperty, animation);
   // 當(dāng)animation變量超出作用域且沒有其他引用時，會被GC回收
   

2. WPF動畫機制不會持有對UI元素的強引用

但會帶來其他問題：

1. 屬性狀態(tài)異常

   // 問題場景演示
   public class ToolBarWindow : UserControl
   {
       private void AnimateToolbar()
       {
           var animation = new DoubleAnimation(0, 100, TimeSpan.FromSeconds(1));
           ToolBarTranslateTransform.BeginAnimation(TranslateTransform.XProperty, animation);
           // 動畫完成后，X屬性仍處于"動畫控制狀態(tài)"
       }
       
       public void ResetPosition()
       {
           // 這個設(shè)置不會生效！因為屬性仍被動畫"鎖定"
           ToolBarTranslateTransform.X = 0;  
       }
   }
   

2. UI****行為異常

   // 實際影響示例
   private void SomeMethod()
   {
       // 執(zhí)行動畫
       var animation = new DoubleAnimation(0, 100, TimeSpan.FromSeconds(1));
       ToolBarTranslateTransform.BeginAnimation(TranslateTransform.XProperty, animation);
       
       // 即使這個方法結(jié)束，animation對象被回收
       // 但 Transform.X 屬性仍然保持"動畫控制狀態(tài)"
       
       // 后續(xù)代碼中：
       ToolBarTranslateTransform.X = 50;  // 這行代碼不會產(chǎn)生任何效果！
       // UI元素會保持在動畫結(jié)束時的位置（X=100），而不是期望的X=50
   }
   

3. 調(diào)試?yán)щy

   // 這種情況很難調(diào)試，因為看起來代碼執(zhí)行了，但UI沒有變化
   public void MoveToolbarToPosition(double x)
   {
       ToolBarTranslateTransform.X = x;  // 看起來正常，但實際上無效
       // 開發(fā)者可能會困惑為什么UI沒有更新
   }
   

正確清理的情況：

在Dispose或者合適時機進行停止動畫

  protected virtual void Dispose(bool disposing)
 {
     if (!disposedValue)
     {
         if (disposing)
         {
             // 取消事件訂閱
             IsVisibleChanged -= ToolBarWindow_IsVisibleChanged;
             Loaded -= ToolBarWindow_Loaded;

             if (_toolBarViewModel != null)
             {
                 _toolBarViewModel.PropertyChanged -= Vm_PropertyChanged;
             }

             // 停止并清理動畫,動畫本身會自動釋放，這里用于停止動畫
             ToolBarTranslateTransform.BeginAnimation(TranslateTransform.XProperty, null);
             LeftBottomOperateList?.BeginAnimation(WidthProperty, null);
             LeftBottomOperateList?.BeginAnimation(UIElement.OpacityProperty, null);
             LeftMinButton?.BeginAnimation(UIElement.OpacityProperty, null);

             this.BeginAnimation(MarginProperty, null);
         }


         disposedValue = true;
     }
 }

總結(jié)

不執(zhí)行 BeginAnimation(property, null) 不會導(dǎo)致內(nèi)存泄漏，但會導(dǎo)致：

1. 屬性狀態(tài)異常 - 屬性值"凍結(jié)"在動畫結(jié)束狀態(tài)

2. 后續(xù)代碼設(shè)置無效 - 無法通過代碼正常修改屬性值

3. UI行為不符合預(yù)期 - 看似正常的代碼不產(chǎn)生效果

4. 調(diào)試?yán)щy - 問題隱蔽，難以發(fā)現(xiàn)根本原因