Question

我正在开发一种类似指南针的＆＃39;控制，能够沿0-360度的值旋转;即全圆。通过在ViewModel中设置属性，Grid将设置为新角度的动画。但是，当动画从10度旋转到350度时，动画不会使用到新角度的最短路径。它几乎整个圆圈都会顺时针旋转。

但我想要实现的是它沿着最短的路线动画：从10到350应该使逆时针动画仅20度。

下面我添加了我的代码的一个组成示例，但它没有绑定到ViewModel中的属性，而是使用绑定到ListBox（复制粘贴应该让它运行）。选择ListBox中的项目会旋转网格（包含＆＃39;针＆＃39;）。

如果可能的话，我宁愿选择＆＃34;所有XAML＆＃34;解。它是完全可行的，我想要实现的目标吗？

<Window x:Class="CompassRotation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="375" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>

        <Grid>
            <Ellipse Width="300" Height="300" Fill="DarkCyan" />
            <Label Content="{Binding SelectedItem.Content, ElementName=Angle, UpdateSourceTrigger=Explicit}"
                   FontSize="36" />
            <Grid Width="300" Height="300"
                  RenderTransformOrigin="0.5,0.5"
                  Tag="{Binding SelectedItem.Content, ElementName=Angle, UpdateSourceTrigger=PropertyChanged,NotifyOnTargetUpdated=True}">
                <Grid.Triggers>
                    <EventTrigger RoutedEvent="Binding.TargetUpdated">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="(Grid.RenderTransform).(RotateTransform.Angle)"
                                    Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Grid.Triggers>

                <Grid.RenderTransform>
                    <RotateTransform Angle="{Binding SelectedItem.Content, ElementName=Angle, FallbackValue=45}" />
                </Grid.RenderTransform>

                <Rectangle Width="15" Height="300">
                    <Rectangle.Fill>
                        <LinearGradientBrush>
                            <GradientStopCollection>
                                <GradientStop Color="Red" Offset="0" />
                                <GradientStop Color="Green" Offset="1" />
                            </GradientStopCollection>
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </Grid>
        </Grid>
        <ListBox Grid.Column="1" Name="Angle">
            <ListBoxItem>0</ListBoxItem>
            <ListBoxItem>45</ListBoxItem>
            <ListBoxItem>90</ListBoxItem>
            <ListBoxItem>135</ListBoxItem>
            <ListBoxItem>180</ListBoxItem>
            <ListBoxItem>225</ListBoxItem>
            <ListBoxItem>270</ListBoxItem>
            <ListBoxItem>305</ListBoxItem>
            <ListBoxItem>360</ListBoxItem>
        </ListBox>
    </Grid>
</Window>

Answer 1

DoubleAnimation有一个From property，你可以绑定它来设置动画的起始值。

因此，在逆时针将ViewModel的Angle值从10更新为350之前，将ViewModel的From值设置为370，动画将从370逆时针滚动（= 10）度数回到350。

如果您要将From从值Angle更新为from，则会出现如何确定要设置的to值的问题。< / p>

我们知道的一件事是要设置的From属性应该在[to - 180, to + 180]区间内，以确保轮换采用到to的最短路径。

如果我们调用此区间lowerbound = to - 180的下限，那么

From = lowerbound + (from - lowerbound) % 360

或者实际上，自% behaves oddly for negative values以来，适用于from范围内的to和[-360,360]角度的更安全的公式是

From = lowerbound + (from - lowerbound + 720) % 360

沿着最短路线使用故事板旋转网格＆＃39;

1 个答案: