WPF中的缓动动画
在WPF中，为了使我们的动画看起来更加自然，WPF提供了很多的缓动动画，缓动动画，根据一定的缓动函数来执行动画，使动画看起来更加自然；
先看效果：
贴代码：
<StackPanel HorizontalAlignment="Left" Height="205" VerticalAlignment="Top" Width="371" Margin="29,143,0,0">
<Button Margin="5" Content="普通动画" Height="31" Width="200">
<Button.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Duration="0:0:1.5" To="300" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Duration="0:0:1.5" To="200" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Content="BounceEase" Width="200" Height="31">
<Button.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:1.5" To="300" Storyboard.TargetProperty="Width">
<!--设置动画的EasingFunction属性-->
<DoubleAnimation.EasingFunction>
<BounceEase EasingMode="EaseOut" Bounces="5"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard >
<Storyboard>
<DoubleAnimation Duration="0:0:1.5" To="200" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<!--弹跳到最终值，但不会超过设定的值-->
<BounceEase EasingMode="EaseOut" Bounces="5"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="200" Height="31" Content="BackEase">
<Button.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="300" Duration="0:0:1.5" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<!--动画先拉出设定值，再拉回设定值-->
<BackEase EasingMode="EaseOut" Amplitude="1"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="200" Duration="0:0:1.5" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<BackEase EasingMode="EaseInOut" Amplitude="1"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="200" Height="31" Content="ElasticEase">
<Button.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="300" Duration="0:0:1.5" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<!--ElasticEase按钮弹跳出最终的结果-->
<ElasticEase EasingMode="EaseOut" Oscillations="5"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="200" Duration="0:0:1.5" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="5"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="200" Height="31" Content="CircleEase">
<Button.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="300" Duration="0:0:1.5" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="200" Duration="0:0:1.5" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<!--使用圆函数加速和减速-->
<CircleEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button Width="200" Height="31" Content="CubicEase">
<Button.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="300" Duration="0:0:1.5" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation To="200" Duration="0:0:1.5" Storyboard.TargetProperty="Width">
<DoubleAnimation.EasingFunction>
<!--使用基于时间立方的函数加速-->
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
可以通过DoubleAnimation.EasingFunction给动画添加缓动效果，官方也提供了很多的缓动函数，有很多的缓动效果看起来差不多，仔细看才能发先他们其中的不同之处。
好了，今天就到这里啦，欢迎大家评论和点赞哦！
