Анимация RadialGauge - PullRequest
Новая
       5

Анимация RadialGauge

0 голосов
/ 10 ноября 2018

Я новичок в анимации, и я хотел бы, чтобы анимированные значения 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>

1 Ответ

0 голосов
/ 12 ноября 2018

Например, если свойство Value изменяется с 0 на 100, я бы хотел, чтобы theRadialGauge` прошел через все промежуточные значения, например, за 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 , значение является свойством зависимости, угол иглы изменился при изменении Value. Что вы сказали «без добавления кода позади», я предположил, что вы могли бы использовать XAML Behaviors для запуска анимации, но он не предоставил никаких событий для вас. Я не думал, что это проще, чем звонить storyboard.Begin().

Вы можете изменить исходный код и добавить для него анимацию. При изменении Value будет запущен метод OnValueChanged, в котором вы можете запустить анимацию. Затем вы можете скомпилировать свою пользовательскую версию для Microsoft.Toolkit.Uwp.UI.Controls и использовать ее в своем проекте. Но я не думал, что это проще, чем просто написать однострочный код storyboard.Begin() в коде позади.

...