WPF动画

在 WPF（Windows Presentation Foundation）中，主要有两种类型的动画：属性动画（Property Animation）和关键帧动画（Key - Frame Animation）。属性动画用于简单地从一个起始值平滑地过渡到一个结束值，例如改变一个控件的宽度从 100px 到 200px。关键帧动画则更加灵活，它允许你在动画过程中定义多个关键帧，每个关键帧可以有不同的值，这样可以创建更复杂的动画效果，比如一个物体先加速再减速的运动动画。
WPF动画主要使用Storyboard来设置动画。Storyboard是一种用于控制时间和多个动画的容器，允许你在时间轴上定义动画的开始、持续时间、暂停等。
主要的动画类型包括：
位移动画（DoubleAnimation）：用于改变对象的位置。
透明度动画（DoubleAnimation）：用于改变对象的透明度。
缩放动画（ScaleTransform）：用于改变对象的大小。
旋转动画（RotateTransform）：用于改变对象的旋转角度。
颜色动画（ColorAnimation）：用于改变颜色。

1. 缩放动画

在XAML文件中添加按钮

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><StackPanel><Button Name="AnimatedButton" Content="点击缩放!" Width="100" Height="50"RenderTransformOrigin="0.5, 0.5" Click="AnimatedButton_Click" Margin="20"><Button.RenderTransform><ScaleTransform /></Button.RenderTransform></Button></StackPanel>
</Window>

编辑动画

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;namespace Animation.Views
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void AnimatedButton_Click(object sender, RoutedEventArgs e){// 获取当前的缩放变换ScaleTransform scale = (ScaleTransform)AnimatedButton.RenderTransform;// 创建一个位移动画DoubleAnimation scaleAnimationX = new DoubleAnimation{From = 1.0, // 起始缩放To = 1.3,   // 结束缩放Duration = TimeSpan.FromSeconds(0.1), // 动画持续时间AutoReverse = true // 自动反转};DoubleAnimation scaleAnimationY = new DoubleAnimation{From = 1.0, // 起始缩放To = 1.3,   // 结束缩放Duration = TimeSpan.FromSeconds(0.1), // 动画持续时间AutoReverse = true // 自动反转};// 应用动画到缩放变换scale.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimationX);scale.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimationY);}}
}

动画效果

WPF缩放动画

2. 位移动画

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><Canvas Name="MyCanvas"><Button Content="Start Animation" Click="Button_Click" Name="MyButton"/></Canvas>
</Window>

在按钮的点击事件中编辑动画

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;
using System.Windows.Controls;
using Example;namespace Animation.Views
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void Button_Click(object sender, RoutedEventArgs e){// 创建位移动画DoubleAnimation animation = new DoubleAnimation{From = 0,To = MyCanvas.ActualWidth-MyButton.ActualWidth,Duration = new Duration(TimeSpan.FromSeconds(2)),AutoReverse = true};// 应用动画到按钮的X轴位移TranslateTransform translateTransform = new TranslateTransform();MyButton.RenderTransform = translateTransform;// 开始动画translateTransform.BeginAnimation(TranslateTransform.XProperty, animation);}}
}

动画效果

WPF位移动画

3. 旋转动画

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><Canvas Name="MyCanvas"><Button Content="Start Animation" Click="Button_Click" Name="MyButton"/><Grid><Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49"><Button.RenderTransform><RotateTransform x:Name="ButtonRotateTransform" Angle="0"/></Button.RenderTransform></Button></Grid></Canvas></Window>

编辑动画

using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;
using System.Windows.Controls;
using Example;namespace Animation.Views
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void Button_Click(object sender, RoutedEventArgs e){// 创建位移动画DoubleAnimation animation = new DoubleAnimation{From = 0,To = MyCanvas.ActualWidth-MyButton.ActualWidth,Duration = new Duration(TimeSpan.FromSeconds(2)),AutoReverse = true};// 应用动画到按钮的X轴位移TranslateTransform translateTransform = new TranslateTransform();MyButton.RenderTransform = translateTransform;// 开始动画translateTransform.BeginAnimation(TranslateTransform.XProperty, animation);}private void MyButton_Click1(object sender, RoutedEventArgs e){// 创建旋转动画DoubleAnimation animation = new DoubleAnimation{From = 0,To = 360, // 旋转360度Duration = new Duration(TimeSpan.FromSeconds(1)),RepeatBehavior = RepeatBehavior.Forever // 无限循环};// 应用动画到按钮的旋转角度ButtonRotateTransform.BeginAnimation(RotateTransform.AngleProperty, animation);}}}

动画效果

WPF旋转动画

4. 颜色动画

在页面中直给Button2接定义颜色动画

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><Window.Resources><Storyboard x:Key="ColorAnimationStoryboard"><ColorAnimationStoryboard.TargetName="MyButton2"Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"From="Green"To="GreenYellow"Duration="0:0:1.5"AutoReverse="True"RepeatBehavior="Forever" /></Storyboard></Window.Resources><Canvas Name="MyCanvas"><Button Content="Start Animation" Click="Button_Click" Name="MyButton"/><Grid><Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49"><Button.RenderTransform><RotateTransform x:Name="ButtonRotateTransform" Angle="0"/></Button.RenderTransform></Button></Grid><Button Name="MyButton2" Width="100" Height="50" Content="点击我" Click="MyButton_Click2" Canvas.Left="162" Canvas.Top="167"/></Canvas></Window>

点击按钮时触发动画

 private void MyButton_Click2(object sender, RoutedEventArgs e){// 从资源中获取Storyboard并开始动画Storyboard storyboard = (Storyboard)FindResource("ColorAnimationStoryboard");storyboard.Begin();}

动画效果

WPF颜色动画

5. 透明度动画

<Window x:Class="Animation.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"prism:ViewModelLocator.AutoWireViewModel="True"Title="{Binding Title}" Height="350" Width="525" ><Window.Resources><Storyboard x:Key="ColorAnimationStoryboard"><ColorAnimationStoryboard.TargetName="MyButton2"Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"From="Green"To="GreenYellow"Duration="0:0:1.5"AutoReverse="True"RepeatBehavior="Forever" /></Storyboard></Window.Resources><Canvas Name="MyCanvas"><Button Content="Start Animation" Click="Button_Click" Name="MyButton"/><Grid><Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49"><Button.RenderTransform><RotateTransform x:Name="ButtonRotateTransform" Angle="0"/></Button.RenderTransform></Button></Grid><Button Name="MyButton2" Width="100" Height="50" Content="点击我" Click="MyButton_Click2" Canvas.Left="162" Canvas.Top="167"/><Button Name="MyButton3" Width="100" Height="50" Content="点击我" Click="MyButton_Click3" Background="Blue" RenderTransformOrigin="0.897,3.506" Canvas.Left="162" Canvas.Top="245"/></Canvas></Window>

编辑动画

 private void MyButton_Click3(object sender, RoutedEventArgs e){// 创建透明度动画DoubleAnimation opacityAnimation = new DoubleAnimation{From = 1.0,  // 初始透明度To = 0.4,    // 目标透明度Duration = new Duration(TimeSpan.FromSeconds(1)), // 动画持续时间AutoReverse = true  ,// 动画反向播放RepeatBehavior = RepeatBehavior.Forever // 无限循环};// 应用动画到按钮的透明度MyButton3.BeginAnimation(UIElement.OpacityProperty, opacityAnimation);}

动画效果

WPF透明度动画

WPF动画的应用很广泛和也很灵活，如关键帧动画的设计，动画的数据绑定，这里只是简单的示范，后续在使用过程中会再更。。