停止特定元素的情节提要动画

Question

我正在使用以下代码来启动/维护故事板动画：

private Storyboard storyboard = null;
private DoubleAnimation leftArrow = null;
private DoubleAnimation rightArrow = null;
public void AnimateArrows(bool left = true, bool right = true)
{
    if (storyboard != null) storyboard.Stop();
    else storyboard = new Storyboard();

    storyboard.Children.Clear();

    if (left)
    {
        leftArrow = new DoubleAnimation();
        leftArrow.From = 0.5;
        leftArrow.To = 1;
        leftArrow.Duration = TimeSpan.FromSeconds(0.3);
        leftArrow.AutoReverse = true;
        leftArrow.RepeatBehavior = RepeatBehavior.Forever;
        Storyboard.SetTargetProperty(leftArrow, new PropertyPath(Image.OpacityProperty));
        Storyboard.SetTargetName(leftArrow, btnLeftAS.Name);
        storyboard.Children.Add(leftArrow);
    }
    else
    {
        storyboard.Remove(btnLeftAS);
    }

    if (right)
    {
        rightArrow = new DoubleAnimation();
        rightArrow.From = 0.5;
        rightArrow.To = 1;
        rightArrow.Duration = TimeSpan.FromSeconds(0.3);
        rightArrow.AutoReverse = true;
        rightArrow.RepeatBehavior = RepeatBehavior.Forever;

        Storyboard.SetTargetName(rightArrow, btnRightAS.Name);
        Storyboard.SetTargetProperty(rightArrow, new PropertyPath(Image.OpacityProperty));
        storyboard.Children.Add(rightArrow);
    }
    else 
    {
        storyboard.Remove(btnRightAS);
    }

    storyboard.Begin(this, true);
}

我需要能够在任何给定点禁用箭头/元素的动画，同时保持其他动画。

我正在尝试暂停其中一个箭头的动画，如下所示：

private void btnLeftAS_MouseEnter(object sender, MouseEventArgs e)
{
    AnimateArrows(false, true);
    ((Image)sender).Opacity = 1;
}

但是，在调用这个之后，动画会继续。我已经尝试了http://msdn.microsoft.com/en-us/library/aa970493(v=vs.110).aspx中列出的每个选项

我在这里缺少什么？如何停止一个元素的动画？

Answer 1

我建议您在设计 UI 时学习使用 XAML，而不是尝试在代码中做这些事情。完全不需要任何代码就可以实现您想要的。这当然可以扩展以适合您的目的，但请尝试以下操作：

<Button>
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Path Name="Arrow" Data="M10,0 20,20 11,10 11,30 9,30 9,10 0,20Z" 
                Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard Name="FadeStoryboard">
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation Storyboard.TargetName="Arrow" 
                                Storyboard.TargetProperty="Opacity" From="0.5" To="1.0"
                                Duration="0:0:0.3" AutoReverse="True" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseEnter">
                    <PauseStoryboard BeginStoryboardName="FadeStoryboard" />
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <ResumeStoryboard BeginStoryboardName="FadeStoryboard" />
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>