2010-10-14 6 views
2

Je travaille avec WPF et je n'arrive pas à réaliser une animation.WPF rotate animation

J'ai un rectangle qui tourne de x degré avec une origine de transformation de rendu de 0,0. Je veux que ce rectangle tourne de y degrés avec une origine de transformation de rendu de 0,1 après 2 secondes.

Bien sûr, je veux garder la position rectangle pour la deuxième animation. Mon problème est que lorsque je change l'origine du rendu de rendu et que j'applique la deuxième rotation, la position actuelle n'est pas conservée et il se déplace de l'emplacement initial.

Une idée de comment je peux y parvenir?

Merci pour votre aide.

<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> 
+0

Il y a quelque chose que je ne comprends pas très bien dans ce que vous essayez de faire. Pourriez-vous expliquer un peu différemment. D'après ce que je comprends, vous essayez de faire pivoter le rectangle de 40 vers la gauche à partir du point d'origine, alors vous déplacez le point à 0,1 et vous voulez qu'il tourne toujours à partir de là? Voulez-vous qu'il tourne d'un coin différent du rectangle pour la deuxième animation? Je cherche juste une clarification du résultat souhaité. –

+0

Je c'est exactement ça. Je veux faire une rotation depuis le premier point avec la première animation. Et puis déplacez à nouveau d'un point différent, mais en gardant l'emplacement précédent. J'espère que c'est plus clair –

Répondre

0

Cela semble être ce que vous cherchez, j'ai utilisé Microsoft Expression Blend. Votre point d'ancrage n'a pas été au bon endroit (je ne suis pas sûr si vous passez des points Pivoter pour chaque animation, mais cela suppose que vous secouent avant et en arrière.

<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> 

+1

Désolé mais je ne peux pas faire fonctionner votre échantillon. Pourriez-vous donner le code entier pour la fenêtre. En fait, je n'utilise que VS 2010 –

2

RenderTransformOrigin fait référence au point de départ de, dans ce cas, le rectangle dans la fenêtre. Lorsque vous faites une rotation en fonction du point (0,0), le rectangle tourne autour du coin supérieur gauche de lui-même. Si vous modifiez RenderTransformOrigin pour tourner maintenant autour de (0,1), vous ne tournez pas maintenant en fonction du coin inférieur gauche du rectangle dans sa position actuelle, mais vous tournez en fonction de la position d'origine du rectangle. Mes pensées à ce sujet seraient de définir l'origine de la transformation de rendu à quelque chose comme (0,0,5) pour obtenir le mouvement de bascule que vous recherchez.