WPF 中的动画主要分为 AnimationTimeline（简单动画） 和 Storyboard（一组协同的动画）。

一、简单线性动画

 <Button Height="80" Width="200" Content="Move" Click="ButtonBase_OnClick"> <Button.RenderTransform> <TranslateTransform x:Name="tt" X="0" Y="0"></TranslateTransform> </Button.RenderTransform> </Button>

 private void ButtonBase_OnClick(object sender, RoutedEventArgs e) { DoubleAnimation dx = new DoubleAnimation(); DoubleAnimation dy = new DoubleAnimation(); // 指定起点 dx.From = 0; dy.From = 0; // 指定终点 dx.To = new Random().NextDouble() * 200; dy.To = new Random().NextDouble() * 200; //// 指定幅度 //dx.By = 100; //dy.By = 100; // 指定时长 dx.Duration = new Duration(TimeSpan.FromMilliseconds(1000)); dy.Duration = new Duration(TimeSpan.FromMilliseconds(2000)); // 动画主体（TranslateTransform） tt.BeginAnimation(TranslateTransform.XProperty,dx); tt.BeginAnimation(TranslateTransform.YProperty,dy); }

二、高级动画控制

 <!--弹跳移动--> <Button Margin="0,0,600,350" Content="弹跳" Click="ButtonBase_OnClick1"> <Button.RenderTransform> <TranslateTransform x:Name="tt1" X="0" Y="0"></TranslateTransform> </Button.RenderTransform> </Button>

 private void ButtonBase_OnClick1(object sender, RoutedEventArgs e) { DoubleAnimation dx=new DoubleAnimation(); DoubleAnimation dy=new DoubleAnimation(); // 设置弹跳 BounceEase be=new BounceEase() { Bounces = 4, // 弹跳次数 Bounciness = 2,// 弹跳值 }; dy.EasingFunction = be; // 设置终点 dx.To = 300; dy.To = 300; // 设置时长 dx.Duration = new Duration(TimeSpan.FromMilliseconds(2000)); dy.Duration = new Duration(TimeSpan.FromMilliseconds(2000)); // 动画主体 tt1.BeginAnimation(TranslateTransform.XProperty,dx); tt1.BeginAnimation(TranslateTransform.YProperty, dy); }

三、关键帧动画

 <!--路径--> <PathGeometry x:Key="MovePath" Figures="M0,150 C300,-100 300,400 600,120"></PathGeometry> <!--路径移动--> <Button Margin="0,100,600,250" Content="路径移动" Click="ButtonBase_OnClick2"> <Button.RenderTransform> <TranslateTransform x:Name="tt2" X="0" Y="0"></TranslateTransform> </Button.RenderTransform> </Button>

 private void ButtonBase_OnClick2(object sender, RoutedEventArgs e) { PathGeometry path=this.FindResource("MovePath") as PathGeometry; Duration duration =new Duration(TimeSpan.FromMilliseconds(3000)); // 创建动画 DoubleAnimationUsingPath dx=new DoubleAnimationUsingPath() { PathGeometry = path, Source = PathAnimationSource.X, Duration = duration, }; DoubleAnimationUsingPath dy = new DoubleAnimationUsingPath() { PathGeometry = path, Source = PathAnimationSource.Y, Duration = duration, }; // 执行动画 tt2.BeginAnimation(TranslateTransform.XProperty,dx); tt2.BeginAnimation(TranslateTransform.YProperty, dy); }

四、场景——Storyboard

例如：实现三个小球（红球、绿球、蓝球）分别沿着跑到运动的动画，具体示例如下：

 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="100"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" BorderBrush="Red"> <Ellipse x:Name="RedEllipse" Width="36" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Left" Fill="Red"> <Ellipse.RenderTransform> <TranslateTransform x:Name="RedTransform"></TranslateTransform> </Ellipse.RenderTransform> </Ellipse> </Border> <Border Grid.Row="1" Grid.Column="0" BorderThickness="2" BorderBrush="Green"> <Ellipse x:Name="GreenEllipse" Width="36" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Left" Fill="Green"> <Ellipse.RenderTransform> <TranslateTransform x:Name="GreenTransform"></TranslateTransform> </Ellipse.RenderTransform> </Ellipse> </Border> <Border Grid.Row="2" Grid.Column="0" BorderThickness="2" BorderBrush="Blue"> <Ellipse x:Name="BlueEllipse" Width="36" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Left" Fill="Blue"> <Ellipse.RenderTransform> <TranslateTransform x:Name="BlueTransform"></TranslateTransform> </Ellipse.RenderTransform> </Ellipse> </Border> <Button Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Content="GO!"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="RedTransform" Storyboard.TargetProperty="X" To="650" Duration="0:1:0" ></DoubleAnimation> <DoubleAnimation Storyboard.TargetName="GreenTransform" Storyboard.TargetProperty="X" To="650" Duration="0:0:0.8" ></DoubleAnimation> <DoubleAnimation Storyboard.TargetName="BlueTransform" Storyboard.TargetProperty="X" To="650" Duration="0:0:10" ></DoubleAnimation> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> </Grid>