当前运行的动画完成后停止 StoryBoard [英] Stop StoryBoard after currently running animation is completed

问题描述

我想在控件 IsAnimating 的属性更改为 false 后停止 WPF StoryBoard，但我需要不是立即停止动画，而是首先完成当前正在运行的动画循环然后停止它(我现在正在使用这个 XAML，但它立即停止我的动画):

I want to stop WPF StoryBoard after property of control IsAnimating is changed to false, but I need to stop animation not instantly, but first complete currently running animation cycle and then stop it (I'm using this XAML now, but it stops my animation instantly):

<UserControl x:Class="App.Controls.ProgressCircle"
             x:Name="me"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" >
    <Ellipse Name="Circle" Width="30" Height="30" Fill="Green" >
        <Ellipse.Style>
            <Style>
                <Style.Resources>
                    <Storyboard x:Key="Pulsing">
                        <DoubleAnimation  From="30.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" 
                                                      Storyboard.TargetProperty="Width" />

                        <DoubleAnimation  From="30.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" 
                                                      Storyboard.TargetProperty="Height" />
                    </Storyboard>
                </Style.Resources>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsAnimating, ElementName=me}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Name="Pulsing" Storyboard="{StaticResource Pulsing}" />
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="Pulsing"  />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
</UserControl>

推荐答案

快速而肮脏"的解决方案是在 DataTrigger.ExitActions 中启动一个新动画，该动画为高度和宽度属性设置动画到整个动画开始之前的值.这可能看起来像这样:

A "quick and dirty" solution would be to start a new animation in the DataTrigger.ExitActions that animates the height and width properties to the values they had before the whole animation was started. This could look like this:

<Style.Triggers>
    <DataTrigger Binding="{Binding IsAnimating, ElementName=me}" Value="True">
        <DataTrigger.EnterActions>
            <BeginStoryboard Name="Pulsing" Storyboard="{StaticResource Pulsing}" />
        </DataTrigger.EnterActions>
        <DataTrigger.ExitActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Duration="0:0:1" 
                                     Storyboard.TargetProperty="Height" />
                    <DoubleAnimation Duration="0:0:1" 
                                     Storyboard.TargetProperty="Width" />
                </Storyboard>
            </BeginStoryboard>
        </DataTrigger.ExitActions>
    </DataTrigger>
</Style.Triggers>

重要的是，如果您没有在动画上设置 To 值，那么目标值将是依赖属性先前拥有的值(本地值在这种情况下为 30.0). 在这种情况下，您不必停止脉冲"故事板，因为当您启动一个为相同依赖属性设置动画的新故事板时，这会自动完成.

The important thing is that if you do not set the the To value on an animation, then the target value will be the one that the dependency property previously had (the local value of 30.0 in this case). You do not have to stop the 'Pulsing' storyboard in this case because this is automatically done when you start a new storyboard that animates the same dependency properties.

显然，这不是最佳解决方案，因为您没有整合脉冲动画的当前状态(即 IsAnimating 设置为 false 时的时间点).据我所知，WPF 中没有内置功能来实现这种功能，但有可能实现自定义 ConstrallableStoryboardAction 尊重所有这些信息并且可以在 DataTrigger.ExitActions 中设置 代替.检查一些动画可能也值得您花时间MSDN 库中的操作方法主题.

Obviously, this is not the optimal solution as you do not integrate the current status of the Pulsing animation (i.e. at which point in time it was when IsAnimating is set to false). As far as I know, there is no built-in functionality in WPF to achieve this kind of functionality, but it might be possible to implement a custom ConstrallableStoryboardAction that respects all these information and that can be set in the DataTrigger.ExitActions instead. It might also be worth your while to check some of Animation How-To topics in the MSDN library.

这篇关于当前运行的动画完成后停止 StoryBoard的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！