Question

我有一组WPF <Path>元素形式的字形。

这样的事情：

<Grid>
    <Path Data="..." Height="33.333" Stretch="Fill" Width="33.334"/>
    <Path Data="..." Height="33.333" Stretch="Fill" Width="33.334"/>
    <Path Data="..." Height="33.333" Stretch="Fill" Width="33.334"/>
    <Path Data="..." Height="33.333" Stretch="Fill" Width="33.334"/>
</Grid>

这些只是图像或图标字形。我试图找到一种方法来切换或翻转这些不同的Path元素，使它看起来像一个动画。我是WPF的新手，并试图寻找示例，但在网上或其他地方找不到类似的东西。我发现的最接近的示例是使用<Image>和Storyboard删除一个DoubleAnimation元素，但我无法弄清楚如何将其应用于<Path>。

我基本上试图找到一种方法来显示一个路径元素并隐藏所有其他路径，等待一秒，显示下一个路径元素并隐藏所有其他路径，依此类推，使其看起来像一个翻转动画。< / p>

如果有人能发布一个简单的例子或指出我正确的方向，我将不胜感激。感谢。

Answer 1

好吧试一试。请注意，每个Path都会获得自己的Storyboard。因此，如果您有4 Path s，则会得到4 Storyboard s。

<Path>
    <Path.Style>
        <Style TargetType="{x:Type Path}">
            <Setter Property="Opacity" Value="0"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                             From="0" 
                                             To="1" 
                                             Duration="00:00:1"
                                             BeginTime="00:00:1" 
                                             AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>
<Path>
    <Path.Style>
        <Style TargetType="{x:Type Path}">
            <Setter Property="Opacity" Value="0"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                             From="0" To="1" 
                                             Duration="00:00:1" 
                                             BeginTime="00:00:2"
                                             AutoReverse="True"/>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>
<Path>
    <Path.Style>
        <Style TargetType="{x:Type Path}">
            <Setter Property="Opacity" Value="0"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                                             From="0" To="1"
                                             Duration="00:00:1"
                                             BeginTime="00:00:3"
                                             AutoReverse="True"/>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>
<Path>
    <Path.Style>
        <Style TargetType="{x:Type Path}">
            <Setter Property="Opacity" Value="0"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                             From="0" 
                                             To="1" 
                                             Duration="00:00:1"
                                             BeginTime="00:00:4" 
                                             AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Path.Style>
</Path>

注意我们如何使用FrameworkElement.Loaded事件来触发动画。您几乎可以在任何UI元素上使用此事件。每个故事板在1秒内将不透明度从0（不可见）更改为1（完全可见）（您可以使用Duration属性更改此值）。此外，每个故事板的BeginTime属性都不同，这是确保项目一个接一个地动画化所必需的。最后，我们设置AutoReverse属性以确保Path s消失（即动画反转）。这应该会给你一个想法。

如何在WPF中为多个Path元素设置动画

1 个答案: