首页 文章

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

提问于
浏览 次
0

我有一组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>

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

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

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

c# wpf animation

1 回答

  • 1

    好吧试一试 . 请注意，每个 Path 将获得自己的 Storyboard . 所以，如果你有4个 Path 秒，那么你得到4个 Storyboard 秒 .

    <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 消失（即动画反转） . 这应该给你的想法 .

    回复于

相关问题