1

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

像这样的东西：

<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>.

我基本上是在尝试找到一种方法来显示一个路径元素并隐藏所有其他路径，稍等片刻，显示下一个路径元素并隐藏所有其他路径，依此类推，使其看起来像一个翻转动画。

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

4

1 回答 1

2

好吧试试这个。请注意，每个Path都会有自己的Storyboard. 所以如果你有 4Path秒，你就会得到 4Storyboard秒。

<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属性以确保Paths 消失（即动画反转）。这应该给你的想法。

于 2013-10-07T21:16:00.287 回答