WPF中的动画缓动

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>