WPF中的动画缓动
1. 使用缓动函数
<Grid Background="White">
<Button x:Name="Button1" Width="200" Height="45" Content="This button grow">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Button1" Storyboard.TargetProperty="Width"
To="400" Duration="0:0:1.5"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>

2. 在动画开始时应用缓动与在动画结束时应用缓动
<Grid Background="White">
<Button x:Name="Button1" Width="200" Height="45" Content="This button grow">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Button1" Storyboard.TargetProperty="Width"
To="300" Duration="0:0:1.5">
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseInOut" Oscillations="10"></ElasticEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Button1" Storyboard.TargetProperty="Width"
Duration="0:0:0.3">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
3. 创建自定义缓动函数
- 定义一个继承自
EasingFunctionBase
的类,并在EaseInCore
中定义一个函数
public class RandomJitterEase :EasingFunctionBase
{
protected override Freezable CreateInstanceCore()
{
return new RandomJitterEase();
}
protected override double EaseInCore(double normalizedTime)
{
return Math.Pow(normalizedTime, 3);
}
}
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Ellipse1" Storyboard.TargetProperty="(Canvas.Left)"
To="450" Duration="0:0:3"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Ellipse2" Storyboard.TargetProperty="(Canvas.Left)"
To="450" Duration="0:0:3" >
<DoubleAnimation.EasingFunction>
<local:RandomJitterEase EasingMode="EaseIn"></local:RandomJitterEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
<Canvas Margin="10">
<Ellipse x:Name="Ellipse1" Canvas.Left="0" Fill="Red" Width="20" Height="20"></Ellipse>
<Ellipse x:Name="Ellipse2" Canvas.Top="150" Canvas.Left="0" Fill="Blue" Width="20" Height="20"></Ellipse>
</Canvas>
