WPF вращать анимацию

Question

Я работаю с WPF и не могу добиться анимации.

У меня есть прямоугольник, который вращается от x градусов с начала преобразования преобразования от 0,0. Я хочу, чтобы этот прямоугольник вращался от y градусов с началом преобразования преобразования от 0,1 через 2 секунды.

Конечно, я хочу сохранить положение прямоугольника для второй анимации.

Моя проблема в том, что когда я изменяю начало рендеринга преобразования и применяю второе вращение, текущая позиция не сохраняется, и он перемещается из начальной позиции.

Есть идеи, как мне этого добиться?

Спасибо за помощь.

<Window x:Class="SimpleMove"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="OpenWWindow" Height="900" Width="900">
  <Grid >
    <Rectangle Name="rec1" Width="100" Height="400" Fill="DimGray" RenderTransformOrigin="0,0">
      <Rectangle.RenderTransform>
        <RotateTransform x:Name="Rec1_Rotate"/>
      </Rectangle.RenderTransform>
    </Rectangle>

    <Button Width="45" Height="30" Name="Button1">Start
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard TargetProperty="Angle">                
                <DoubleAnimation Storyboard.TargetName="Rec1_Rotate" By="40" Duration="00:00:1" BeginTime="00:00:00"/>                                                
                <PointAnimation Storyboard.TargetName="rec1" Storyboard.TargetProperty="RenderTransformOrigin" To="0,1" Duration="00:00:0" BeginTime="00:00:02" />
                <DoubleAnimation Storyboard.TargetName="Rec1_Rotate" By="-80" Duration="00:00:2" BeginTime="00:00:03"/>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </Grid>
</Window>

Answer 1

RenderTransformOrigin ссылается на начальную точку, в данном случае, прямоугольника в окне. При вращении на основе точки (0,0) прямоугольник будет вращаться вокруг верхнего левого угла самого себя. Если вы измените RenderTransformOrigin, чтобы он теперь вращался вокруг (0,1), вы не вращаетесь сейчас, основываясь на левом нижнем углу прямоугольника в его текущей позиции, но вы вращаетесь, основываясь на исходной позиции прямоугольника. Я подумал об этом, чтобы установить начало трансформирования рендеринга в что-то вроде (0,0.5), чтобы получить искрящее движение, которое вы ищете.

Answer 2

Кажется, это то, что вы ищете, я использовал Microsoft Expression Blend. Ваша точка привязки была не в правильном месте (я не уверен, что вы переключаете точки поворота для каждой анимации, но это предполагает, что вы качаете ее вперед и назад.

<Window x:Class="SimpleMove"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="OpenWWindow" Height="900" Width="900">
<Window.Resources>
    <Storyboard x:Key="AnimateRectangle">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-60"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource AnimateRectangle}"/>
        <BeginStoryboard Storyboard="{StaticResource AnimateRectangle}"/>
    </EventTrigger>
</Window.Triggers>