CODEWITHSUNDEEP
.netwpfanimationstoryboard
user764754
user764754

Reputation: 4246

Continue WPF animation with other storyboard (not from start)

Using WPF 3.5 I want to move a canvas and after finishing this animation move it further using a second storyboard. I have the following:

<Storyboard x:Key="Move" Completed="OnMoveCompleted" AutoReverse="False" FillBehavior="HoldEnd">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="canvas">
        <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="-50"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

<Storyboard x:Key="Move2" AutoReverse="False">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="canvas">
        <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="-75"/>
    </DoubleAnimationUsingKeyFrames>            
</Storyboard>

And in Code behind i got:

public void OnMoveCompleted(object sender, EventArgs e)
{
  var moveStoryboard = (Storyboard)FindResource("Move2");
  moveStoryboard.Begin();
}

Move2 only moves the canvas 75 - 50 = 25 pixels. I want the canvas to move 50 pixels first and then another 75 pixels afterwards. I thought it could work because of FillBehaviour="HoldEnd" so the next storyboard could work with the transformed Y property value from the first storyboard but it seems that the second storyboard just works with the initial value (although the canvas doesn't seem to jump back to the very beginning, at least visually).

Please i need a solution apart from just putting the transformations into one storyboard.

Upvotes: 1

Views: 1507

Answers (1)

user764754
user764754

Reputation: 4246

There is an IsAdditive property which can be set, so the second animation is relative to the first one. One can simply write the following Xaml:

<Storyboard x:Key="Move2" AutoReverse="False">
<DoubleAnimationUsingKeyFrames IsAdditive="True" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="canvas">
    <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="-75"/>
</DoubleAnimationUsingKeyFrames>

Another solution would be updating the underlying animated properties during the Completed event handlers: Remove storyboard but keep animated value?

Upvotes: 2

Related Questions