Question

我是动画的新手，我想设置RadialGauge值从 x 更改为 y 的动画，以使过渡更加平滑。

例如，如果Value property changes from 0 to 100, I would like the RadialGauge`在例如250毫秒内经历所有中间值。

我该如何实现？

注意：我正在使用MVVM，并通过Value设置了Binding属性。我希望有一种方法可以做到，而无需添加任何代码后置功能（最好仅使用XAML）。

谢谢！

我正在尝试使用“隐式动画”，但我不了解它们如何为属性中的变化设置动画。我尝试过的代码是这样的：

<controls:RadialGauge Value="{Binding Status.Speed, Converter={StaticResource Speed}}">
    <animations:Implicit.Animations>
        <animations:ScalarAnimation ImplicitTarget="Value" Duration="0:0:0.3" />
    </animations:Implicit.Animations>
</controls:RadialGauge>

Answer 1

例如，如果Value属性从0变为100，我希望RadalGauge`可以在250毫秒内浏览所有中间值。

您可以使用简单的DoubleAnimation来实现目标，如下所示：

<Page.Resources>
    <Storyboard x:Name="storyboard" >
        <DoubleAnimation Storyboard.TargetName="RadialGaugeControl" Storyboard.TargetProperty="Value" From="0" To="100" Duration="0:0:3" EnableDependentAnimation="True"></DoubleAnimation>
    </Storyboard>
</Page.Resources>
<Grid>
    <controls:RadialGauge x:Name="RadialGaugeControl"  Value="70" Minimum="0" 
Maximum="180" TickSpacing="20" ScaleWidth="26" Unit="Units" TickBrush="Gainsboro"
ScaleTickBrush="{ThemeResource ApplicationPageBackgroundThemeBrush}"
NeedleWidth="5" TickLength="18" IsInteractive="True">
    </controls:RadialGauge>
</Grid>

storyboard.Begin();

通过这种方式，您至少需要在代码背后调用storyboard.Begin();。

我希望有一种无需添加代码后置代码的方法（最好仅使用XAML）。

如果您检查RadialGauge控件的source code，则该值是一个依赖项属性，更改Value时，针的角度也发生了更改。您所说的“无需在代码后面添加代码”，我假设您可以使用一些XAML Behaviors来启动动画，但是它没有为您提供任何事件。我不认为这比调用storyboard.Begin()更简单。

您可以选择更改源代码并为其添加动画。更改Value后，将触发OnValueChanged方法，您可以在其中启动动画。然后，您可以为“ Microsoft.Toolkit.Uwp.UI.Controls”编译自定义版本，并在项目中使用它。但是我不认为它比在代码背后编写一个行代码storyboard.Begin()更简单。

动画RadialGauge

1 个答案: