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 :
|
<!-- 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>
|
|
|
<!-- 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>
|
|
// 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);
}
|
