WPF中的动画控制

引用网址：https://zhuanlan.zhihu.com/p/37107692

通过使用WPF中的动画控制方法，可以对故事板动画进行开始、暂停、恢复和停止控制。

效果如下

 

前台代码

<Window x:Class="Animation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Animation"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="600">

    <Window.Triggers>
        <EventTrigger SourceName="btnStart" RoutedEvent="Button.Click">
            <BeginStoryboard Name="CircleAnimation">
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Icircle" Storyboard.TargetProperty="(Canvas.Left)"
                                     From="100" To="400" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True">
                        <DoubleAnimation.EasingFunction>
                            <PowerEase EasingMode="EaseInOut"/>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger SourceName="btnPause" RoutedEvent="Button.Click">
            <PauseStoryboard BeginStoryboardName="CircleAnimation"/>
        </EventTrigger>
        <EventTrigger SourceName="btnResume" RoutedEvent="Button.Click">
            <ResumeStoryboard BeginStoryboardName="CircleAnimation"/>
        </EventTrigger>
        <EventTrigger SourceName="btnStop" RoutedEvent="Button.Click">
            <StopStoryboard BeginStoryboardName="CircleAnimation"/>
        </EventTrigger>
    </Window.Triggers>

    <Canvas>
        <Ellipse x:Name="Icircle" Canvas.Top="100" Canvas.Left="100" Width="50" Height="50" Fill="#FF02C373"/>
        <Button x:Name="btnStart" Canvas.Left="50" Canvas.Bottom="100" Width="100" Height="40" Content="开始" FontSize="28"/>
        <Button x:Name="btnPause" Canvas.Left="180" Canvas.Bottom="100" Width="100" Height="40" Content="暂停" FontSize="28"/>
        <Button x:Name="btnResume" Canvas.Right="180" Canvas.Bottom="100" Width="100" Height="40" Content="恢复" FontSize="28"/>
        <Button x:Name="btnStop" Canvas.Right="50" Canvas.Bottom="100" Width="100" Height="40" Content="停止" FontSize="28"/>
    </Canvas>
</Window>

 

后台无需添加代码，所有的触发控制都在XAML里的Window.Triggers里实现了。代码比较简单，见名知意，无需过多解释。

tip：通过EasingFunction可以设置缓动效果，具体参见