Animation en forme de pendule en silverlight

Question

Salut, je voudrais faire démarrer l'animation depuis le centre et ensuite balancer comme une bascule. Basiclly, c'est ce que j'ai posté dans XAML mais je n'arrive pas à le faire fonctionner.

<Storyboard x:Name="wiggleAnimation" > 
     <DoubleAnimation Storyboard.TargetName="rotateSlider" 
         Duration="0:0:1" To="20" 
         Storyboard.TargetProperty="Angle"> 
     </DoubleAnimation> 
     <DoubleAnimation Storyboard.TargetName="rotateSlider" 
         Duration="0:0:1" To="-20" 
         RepeatBehavior="Forever" 
         AutoReverse="True" 
         Storyboard.TargetProperty="Angle"> 
     </DoubleAnimation> 
    </Storyboard> 

Dois-je utiliser des images clés? Comment, après le début de l'animation, changez-en la durée? Peut-être que je devrais utiliser une autre approche?

Answer 1

Ce que vous pouvez faire est de créer une seule animation de -20 à +20, mais commencez l'animation au milieu.

<Storyboard x:Name="wiggleAnimation" > 
    <DoubleAnimation Storyboard.TargetName="rotateSlider" 
        Duration="0:0:2" From="-20" To="20" 
        RepeatBehavior="Forever" 
        AutoReverse="True" 
        Storyboard.TargetProperty="Angle"> 
    </DoubleAnimation> 
</Storyboard> 

Et le code pour lancer l'animation:

wiggleAnimation.Begin(); 
wiggleAnimation.Seek(TimeSpan.FromSeconds(1)); 

Edit: Sinon, vous pouvez créer deux animations, ciblant deux transformations différentes:

<Button Content="Click" Click="button_Click" RenderTransformOrigin="0.5 0.5" > 
    <Button.RenderTransform> 
     <TransformGroup> 
      <RotateTransform x:Name="rotateSlider" /> 
      <RotateTransform x:Name="rotateSlider2" /> 
     </TransformGroup> 
    </Button.RenderTransform> 
</Button> 

Maintenant, vous animez les deux le RotateTransforms en même temps:

<Storyboard x:Name="wiggleAnimation" 
      RepeatBehavior="Forever" 
      AutoReverse="True" 
      Duration="0:0:3" > 
    <DoubleAnimation Storyboard.TargetName="rotateSlider" 
        Duration="0:0:1" From="0" To="20" 
        Storyboard.TargetProperty="Angle"> 
    </DoubleAnimation> 
    <DoubleAnimation Storyboard.TargetName="rotateSlider2" 
        Duration="0:0:2" From="0" To="-40" 
        BeginTime="0:0:1" 
        Storyboard.TargetProperty="Angle"> 
    </DoubleAnimation> 
</Storyboard> 

Avec cette approche, vous n'avez pas besoin de chercher le Storyboard au milieu avant de le démarrer. L'une ou l'autre de ces approches devrait vous permettre de réaliser ce que vous cherchez à faire. Pour que l'animation soit un peu plus naturelle, vous devez probablement lui appliquer un EasingFunction.