Pendulum-like animation in silverlight.

Question

Hi I would like to make animation start from the center and then swing like see-saw. Basiclly, it is what I posted in XAML but I cannot get it working.

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

Should I use Keyframes? How after animation starts change the duration of it? Maybe I should use other approach?

Answer 1

What you could do is create a single Animation from -20 to +20, but start the Animation in the middle.

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

And the code to start the animation:

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

Edit: Alternatively, you can create two animations, targeting two different transforms:

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

Now you animate both of the RotateTransforms at the same time:

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

With this approach you do not need to seek the Storyboard to the middle before starting it. Either one of these approaches should enable you to achieve what you are looking to do.

Also, to make the animation look a bit more natural, you probably want to apply an EasingFunction to it.