如何在WPF中跨用户控件同步动画

时间:2012-04-18 20:43:27

标签: wpf animation synchronization

我在包装面板中创建了几个usercontrol。我有一个绑定到usercontrol的视图模型,我有一个动画触发到视图模型中的属性。非常简单的切换颜色,从红色到透明,以模拟闪烁。

<Storyboard x:Key="alertAnimation" RepeatBehavior="Forever" AutoReverse="True" >
    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                                  Storyboard.TargetName="TileBorder"
                                  BeginTime="00:00:00"
                                  RepeatBehavior="Forever"
                                  AutoReverse="True"
                                  >
        <DiscreteColorKeyFrame Value="Red"/>
        <DiscreteColorKeyFrame KeyTime="00:00:00.500" Value="Transparent" />
    </ColorAnimationUsingKeyFrames>

</Storyboard>

这很好用。但是,由于我异步加载多个用户控件,因此闪烁的动画不会同步,因此它们会在不同的时间闪烁。现在要求屏幕上闪烁的任何内容都需要以相同的速率/时间闪烁。有没有办法同步这些动画?我似乎无法找到适合我想要完成的任何地方的例子。有没有办法使用ParallelTimeline,添加所有动画并从单个控制器启动/停止它们?任何例子如何实现这一目标?

编辑4/20 将动画定义在style.xaml文件中并拥有一个“全局”故事板,每个控件添加其“闪烁”动画并使主UI启动故事板会更好吗?

2 个答案:

答案 0 :(得分:3)

我找不到跨多个用户控件控制多个动画的好方法,所以我最终没有在usercontrol中使用动画,而是使用动画来简单地更改静态对象中的dependencyproperty并让所有需要闪烁的用户控件一些时尚绑定到该属性。有多种方法可以产生我想要的结果,但最终我现在有办法让所有控件知道什么时候眨眼然后关闭以便一切都是同步的。

我从以下网站获得了想法和示例代码: How to synchronize animations across usercontrols in wpf

我对它进行了一些修改,但总的来说它完全符合我的要求。

答案 1 :(得分:0)

显然,这需要进行修改,但在颜色转换时尝试持续时间为0可能会让您眨眼,开销更少。它可能不会。只是尝试一下。

    <Rectangle Name="MyRectangle" Width="100" Height="100">
        <Rectangle.Fill>
            <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
        </Rectangle.Fill>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation 
            Storyboard.TargetName="MyRectangle"
            Storyboard.TargetProperty="Width"
            From="100" To="200" Duration="0:0:1" />

                        <ColorAnimation 
            Storyboard.TargetName="MySolidColorBrush"
            Storyboard.TargetProperty="Color"
            From="Blue" To="Red" BeginTime="0:0:1"  Duration="0:0:0"  />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>