Partager via

Comment : mettre un élément en rotation

  • Article

Cet exemple montre comment mettre un élément en rotation à l'aide d'un RotateTransform et d'un DoubleAnimation.

L'exemple suivant applique le RotateTransform à la propriété RenderTransform de l'élément. L'exemple utilise un DoubleAnimation pour animer l'Angle du RotateTransform. Pour mettre un élément en rotation, l'exemple définit la propriété RenderTransformOrigin de l'élément sur le point (0.5, 0.5).

Exemple

<!-- RotateAboutCenterExample.xaml
     This example shows how to make an element spin
     about its center. -->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.RotateAboutCenterExample" 
  WindowTitle="Rotate About Center Example">    
  <StackPanel Margin="50">

    <Button
      RenderTransformOrigin="0.5,0.5"
      HorizontalAlignment="Left">
        Hello,World
      <Button.RenderTransform>
        <RotateTransform x:Name="MyAnimatedTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedTransform"
                Storyboard.TargetProperty="(RotateTransform.Angle)"
                From="0.0" To="360" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button> 
  </StackPanel> 
</Page>

Pour obtenir l'exemple complet, qui inclut des exemples de transformation supplémentaires, consultez Transformations 2D, exemple.

Voir aussi

Concepts

Vue d'ensemble de l'animation

Vue d'ensemble des transformations