WPF：在角度动画之前更改 RotateTransform 中心

WPF: Change the RotateTransform center before angle animation

提问by user3364152

I try to do a simple rotation animation for my user control. This animation is triggered when the control get the keyboard focus. I want it to rotate around its center.

我尝试为我的用户控件做一个简单的旋转动画。当控件获得键盘焦点时触发此动画。我希望它围绕它的中心旋转。

The problem is, I set the original center point on the lower left corner of the control for the loaded animation. So, to correct that, I set the center in the middle of the control on the trigger IsFocused.

问题是，我在控件的左下角为加载的动画设置了原始中心点。所以，为了纠正这个问题，我将中心设置在触发器 IsFocused 上的控件中间。

But my GetKeyboardFocus animation keep the original center.

但是我的 GetKeyboardFocus 动画保持原来的中心。

Is the trigger executed after the eventtrigger? Or I'm doing something wrong.

触发器是否在 eventtrigger 之后执行？或者我做错了什么。

<UserControl x:Class="testtuile.rectangle"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" Height="150" Width="300" Padding="4" Focusable="True" MouseDown="UserControl_MouseDown" IsTabStop="True">
<UserControl.RenderTransform>
    <RotateTransform Angle="0" CenterX="0" CenterY="150"></RotateTransform>
</UserControl.RenderTransform>
<UserControl.Style>
    <Style>
        <Style.Triggers>
            <Trigger Property="Control.IsFocused" Value="True">
                <Setter Property="Control.BorderBrush" Value="Gold"></Setter>
                <Setter Property="Control.BorderThickness" Value="2"></Setter>
                <Setter Property="Control.RenderTransform">
                    <Setter.Value>
                        <RotateTransform CenterX="150" CenterY="75"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Style>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
                        From="90" To="0" Duration="0:0:0.8" 
                        AutoReverse="False" 
                    />
                    <DoubleAnimation
                        Storyboard.TargetProperty="Opacity"
                        From="0" Duration="0:0:0.6"
                        AutoReverse="False"
                    />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="GotKeyboardFocus">
        <EventTrigger.Actions>
            <BeginStoryboard Name="ButtonFocusedAnimation">
                <Storyboard>

                    <DoubleAnimation
                        Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
                        From="-2" To="2" Duration="0:0:1" 
                        AutoReverse="True" RepeatBehavior="Forever" 
                    />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="LostKeyboardFocus">
        <StopStoryboard BeginStoryboardName="ButtonFocusedAnimation" />
    </EventTrigger>
</UserControl.Triggers>

<Grid Background="Aquamarine">


</Grid>

Thank you for your help.

感谢您的帮助。

回答by dkozl

You don't have to change it before animation. To rotate round centre point set UIElement.RenderTransformOriginagainst UserControl:

您不必在动画之前更改它。旋转圆中心点设置UIElement.RenderTransformOrigin为UserControl：

<UserControl RenderTransformOrigin="0.5,0.5" ...>

Gets or sets the center point of any possible render transform declared by RenderTransform, relative to the bounds of the element

获取或设置由 RenderTransform 声明的任何可能的渲染变换的中心点，相对于元素的边界

and later

然后

RenderTransformOrigin has a somewhat nonstandard use of the Point structure value, in that the Point does not represent an absolute location in a coordinate system. Instead, values between 0 and 1 are interpreted as a factor for the range of the current element in each x,y axis. For example, (0.5,0.5) will cause the render transform to be centered on the element, or (1,1) would place the render transform at the bottom right corner of the element

RenderTransformOrigin 对 Point 结构值的使用有些不标准，因为 Point 不代表坐标系中的绝对位置。相反，0 到 1 之间的值被解释为每个 x,y 轴中当前元素范围的一个因子。例如，(0.5,0.5) 将导致渲染变换以元素为中心，或者 (1,1) 将渲染变换放置在元素的右下角