C# 如何在WPF中设置多个路径元素的动画
我有一组符号,它们以WPFC# 如何在WPF中设置多个路径元素的动画,c#,wpf,animation,C#,Wpf,Animation,我有一组符号,它们以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" Wid
元素的形式出现
大概是这样的:
<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的新手,曾尝试过寻找示例,但在这里或web上的其他地方都找不到类似的示例。我发现的最接近的例子是使用情节提要和双动画用另一个元素擦除一个
元素,但我不知道如何将其应用于
我基本上是想找到一种方法来显示一个路径元素并隐藏所有其他路径,等等,显示下一个路径元素并隐藏所有其他路径,以此类推,使它看起来像一个翻转动画
如果有人能举个简单的例子或给我指出正确的方向,我将不胜感激。谢谢。好的,试试这个。请注意,每个路径
将获得自己的情节提要
。因此,如果你有4个路径
s,你会得到4个情节提要
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
属性以确保路径
消失(即动画反转)。这应该会给你一个想法。你想设置什么属性的动画?是否要同时设置所有路径的动画?不确定这是否合理,但我基本上是尝试显示一个路径元素并隐藏所有其他路径,等等,显示下一个路径元素并隐藏所有其他路径,依此类推。有意义。触发动画的条件是什么?可以是任何条件。Window.Loaded对我来说已经足够好了。PoweredByOrange,谢谢你把这个小样本放在一起。我将把你的帖子标记为答案,因为它确实实现了我在问题中提出的要求。情节提要
似乎也能产生淡入淡出的效果,这很酷——我对C#很在行,但WPF新手仍然在学习。然而,我有30个路径元素,所以我放弃了XAML解决方案,决定对代码隐藏/显示路径。它不是MVVM,但可以工作。@user785286如果你有很多路径
s,你可以在代码后面创建一个通用情节提要
,并将其应用于所有路径。棘手的部分是找出一种添加延迟的方法。@PoweredByOrange,如果我为所有元素设置相同的起始时间,是否可以保证所有项目将并行/同时设置动画?