gpt4 book ai didi

wpf - 为什么我的 WPF 路径动画闪烁?

转载 作者:行者123 更新时间:2023-12-04 20:46:44 26 4
gpt4 key购买 nike

为什么下面的动画会闪烁并且在 MouseLeave 上表现得很愚蠢?如果可以复制,我会发布截屏视频。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas>
<Path Fill="Blue" Margin="15,15,15,15">
<Path.Data>
<!-- Describes an ellipse. -->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="200,100" RadiusX="15" RadiusY="15" />
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard>
<Storyboard Duration="0:0:.5">
<DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry"
Storyboard.TargetProperty="RadiusX"
From="15" To="100" />
<DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry"
Storyboard.TargetProperty="RadiusY"
From="15" To="100" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard>
<Storyboard Duration="0:0:.5">
<DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry"
Storyboard.TargetProperty="RadiusX"
From="100" To="15" />
<DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry"
Storyboard.TargetProperty="RadiusY"
From="100" To="15" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>

最佳答案

原因是您在 DoubleAnimation 上指定了一个 From

如果 MouseLeave 发生时半径小于 100,则 From 属性会使它跳到 100 并可能导致 MouseEnter。然后,您有两个相互竞争的动画,鼠标事件变得疯狂,因为椭圆半径在光标下方闪烁。

解决方案是省略 From 属性,这将导致动画从当前半径的任何位置开始:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1">
<Canvas>
<Path Margin="15,15,15,15" Fill="Blue">
<Path.Data>
<!-- Describes an ellipse. -->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="200,100" RadiusX="15" RadiusY="15"/>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusX" To="100"/>
<DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusY" To="100"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusX" To="15"/>
<DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusY" To="15"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
</Page>

与此无关,当您设置 Storyboard.Duration 时,它不会加速您的子动画,它只会提前结束 Storyboard。您真的想在您的子 DoubleAnimation 上设置 Duration - 我已经修改了上面的 XAML 来执行此操作。

关于wpf - 为什么我的 WPF 路径动画闪烁?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/660919/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com