基于可见性停止/开始故事板动画答案

【问题标题】：Stop / start storyboard animation based on Visibility基于可见性停止/开始故事板动画
【发布时间】：2013-07-10 15:05:16
【问题描述】：

我有一个动画，当前在加载 Control 时开始（动画本质上是一个等待微调器，应用于空的 ContentControl）。

然而，动画会不断旋转占用资源。我想要的是根据动画控件是否可见来启动/停止动画，这可能吗？

<Canvas.Triggers>
    <EventTrigger RoutedEvent="ContentControl.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                Storyboard.TargetName="SpinnerRotate"
                Storyboard.TargetProperty="Angle"
                From="0" To="360" Duration="0:0:01.3"
                RepeatBehavior="Forever" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Canvas.Triggers>

我必须让这对 Silverlight 和 WPF 都有效。

【问题讨论】：

您是否只在寻找 XAML 方式来执行此操作？另一种方法是在代码隐藏中停止动画 - 你只需要给你的故事板一个 x:Name
如果可能，XAML 会是最整洁的吗？

标签： wpf silverlight animation eventtrigger

【解决方案1】：

我创建了一个基于Visibility 属性旋转Ellipse 的示例。也许您可以从中使用一些东西。

 <Canvas>
    <Ellipse x:Name="Circle" Width="30" Height="30"
             Canvas.Left="50"
             Canvas.Top="50">
        <Ellipse.Fill>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Ellipse.Fill>
        <Ellipse.RenderTransform>
            <RotateTransform x:Name="SpinnerRotate" CenterX="15" CenterY="15"/>
        </Ellipse.RenderTransform>
        <Ellipse.Style>
            <Style TargetType="Ellipse">
                <Style.Triggers>
                    <Trigger Property="Visibility" Value="Visible">
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="SpinStoryboard">
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
                                                     From="0" To="360" Duration="0:0:01.3"
                                                     RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="SpinStoryboard"></StopStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
</Canvas>

【讨论】：

如果父 Canvas 不可见，这仍然有效吗？
这个答案有效，但要注意一个问题。使父控件不可见（隐藏/折叠）将使微调器形状（代码示例中的椭圆）也消失没有设置其可见性属性，因此触发器不会触发并且动画将继续（吃CPU）不可见。为了真正停止动画，您必须确保直接设置微调器形状的可见性，或者将其绑定到适当的父控件（其可见性将被更改的那个）。

【解决方案2】：

可能不优雅，但有效。

<Border x:Name="square" Height="20" Width="20" Background="Aqua">
        <Border.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard x:Name="spinner">
                        <DoubleAnimation
                            Storyboard.TargetName="square"
                            Storyboard.TargetProperty="Opacity"
                            From="1" To="0" Duration="0:0:01.3"
                            AutoReverse="True"
                            RepeatBehavior="Forever" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <Border.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Source={RelativeSource Self}, Path=Visibility}" Value="{x:Static Visibility.Collapsed}">
                        <DataTrigger.EnterActions>
                            <StopStoryboard BeginStoryboardName="spinner"/>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
    </Border>

【讨论】：

这看起来很有希望 - 我如何让它在Visible开始故事板
用 BeginStoryboard 添加 DataTrigger.ExitAction （抱歉，我不在我的开发计算机附近尝试它）...实际上，我会反转它...检查 Visibility.Visible 到BeginStoryboard 在“进入”和停止 - 在“退出”