Question

I am animating an image rotation using a doubleanimation linked to a click event of a button. the animation has an ease in and ease out + a duration of 10 seconds.

what i want to do is at the same time animate another image so that in the last 3 seconds of the first animation the second image is faded in and out using an opacity animation.

I have no experience of storyboards and am not sure how to accomplish this effect.

regards,

Dan

Answer 1

If you’re controlling the durations explicitly, then probably the easiest way to do it is to set the BeginTime of the opacity animation to start at 7 seconds and set the Duration to last 3 seconds. If they’re both in the same storyboard and you start the storyboard, the timing will be handled for you by setting those properties.

Here’s a very rough example.

<!-- 10 second storyboard -->
<Storyboard Duration="00:00:10.000">
    <!-- 10 second animation -->
    <DoubleAnimation BeginTime="00:00:00.000" Duration="00:00:10.000"  />
    <!-- 3 second opacity animation that starts at 7 seconds -->
    <DoubleAnimation BeginTime="00:00:07.000" Duration="00:00:03.000" />
</Storyboard>

You’ll need to set the To/From/Storyboard.TargetName/Storyboard.TargetProperty properties on those animations as well, obviously. But this gives you the idea of the concept.

Look at the MSDN article for more information on Storyboards in general.