Question

假设我想在每次按下按钮时将UI元素顺时针旋转45度。

我定义了8个视觉状态，在它们之间设置不同的RotateTransform值。所以，每当我按下按钮，我就会移动到下一个视觉状态：

VisualStateManager.GoToElementState(MyElement, "Position2", True)

等

问题是当从VisualState 8移动到VisualState 1时，元素向后旋转。似乎合乎逻辑，因为它从315º移动到0º。

问题是，按下按钮后如何实现始终向前的目标？

Answer 1

动画的基本示例如下所示：

<Grid>
    <Rectangle Fill="Black" Width="100" Height="100" RenderTransformOrigin=".5,.5">
        <Rectangle.RenderTransform>
            <RotateTransform x:Name="rotation"/>
        </Rectangle.RenderTransform>
    </Rectangle>
    <Button Content="Rotate" VerticalAlignment="Bottom" Click="Button_Click"/>
</Grid>

使用此按钮单击处理程序：

private void Button_Click(object sender, RoutedEventArgs e)
{
    const double rotSpeed = 180; // °/s, i.e. 45° in 0.25 seconds

    var newAngle = Math.Floor(rotation.Angle / 45 + 1) * 45; // integer multiple of 45°
    var duration = TimeSpan.FromSeconds((newAngle - rotation.Angle) / rotSpeed);

    rotation.BeginAnimation(
        RotateTransform.AngleProperty, new DoubleAnimation(newAngle, duration));
}

Answer 2

我在C＃中为你写了一个简单的例子; VB应该非常相似。

在您的主窗口中放置Rectangle和Button。然后，在Xaml示例中为RenderTransformOrigin设置Rectangle。

在您的代码中，声明您的RotateTransform并将其附加到Rectangle，如下所示。每次按Button时，Angle的{{1}}属性都会增加45。

<强> @EDIT：我喜欢@Clemens公式来增加角度（避免溢出）。我编辑了我的答案。

<强> XAML：

RotateTransform

Window Code-Behind：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Rectangle x:Name="myRect" RenderTransformOrigin=".5,.5" Grid.Row="0" Width="100" Height="100" Fill="LightBlue" >

    </Rectangle>
    <Button Grid.Row="1" Width="100" Height="50" Margin="10" Click="Button_Click">Rotate</Button>
</Grid>

以45度为单位旋转元素，始终向前

2 个答案: