Animation (StoryBoard)

De Banane Atomic
Aller à la navigationAller à la recherche
Utiliser Blend pour faciliter la création d'animation.
Voir aussi VisualStateManager

Pour une animation dans un canvas, utiliser : Storyboard.TargetProperty="(Canvas.Left)"
Le StoryBoard possède un event Completed, qui se déclenche à la fin de l'animation.
Bouton qui tourne :

Xaml.svg
<!-- Ici, l'animation est contenu dans le style du bouton -->
<Button Content="Bouton">
    <!-- Définit la transformation comme une rotation -->
    <Button.RenderTransform>
        <RotateTransform />
    </Button.RenderTransform>
    <Button.RenderTransformOrigin>
        <Point X="0.5" Y="0.5"/>
    </Button.RenderTransformOrigin>
    <!-- Définit l'animation dans le style -->
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation From="360" To="0" Duration="0:0:1.0" RepeatBehavior="1x" 
                                                 Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>
Xaml.svg
<!-- Définit l'animation dans les Triggers de la fenêtre -->
<Window.Triggers>
    <EventTrigger RoutedEvent="Button.Click" SourceName="bt">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From="0" To="360" Duration="0:0:0.5" RepeatBehavior="4x" Storyboard.TargetName="bt"
                                     Storyboard.TargetProperty="(Button.RenderTransform).(RotateTransform.Angle)" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>
Csharp.svg
// Définit l'animation dans le code behind
private void Button_Click(object sender, RoutedEventArgs e)
{
    var doubleAnimation = new DoubleAnimation(360, 0, new Duration(TimeSpan.FromSeconds(1)));
    var rotateTransform = new RotateTransform();
    bt.RenderTransform = rotateTransform;
    bt.RenderTransformOrigin = new Point(0.5, 0.5);
    doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    rotateTransform.BeginAnimation(RotateTransform.AngleProperty, doubleAnimation);
}