CODEWITHSUNDEEP
c#wpfxaml
Dark Coder TheDarkInCode
Dark Coder TheDarkInCode

Reputation: 81

Reusable animations

I am a complete newbie to WPF and XAML.

I have created a simple fade-in and fade-out animation for a textbox:-

<Storyboard x:Key="storyFadeInOutTop" Name="storyFadeInOutTop">
    <DoubleAnimation From="0" To="1" Duration="00:00:01" 
                    Storyboard.TargetName="txtTopCredit" 
                    Storyboard.TargetProperty="Opacity">
    </DoubleAnimation>
    <DoubleAnimation From="10" To="0" Duration="00:00:01" BeginTime="00:00:01"
                    Storyboard.TargetName="blurTop" 
                    Storyboard.TargetProperty="Radius">
    </DoubleAnimation>
    <DoubleAnimation From="0" To="10" Duration="00:00:01" BeginTime="00:00:05"
                    Storyboard.TargetName="blurTop" 
                    Storyboard.TargetProperty="Radius">
    </DoubleAnimation>
    <DoubleAnimation From="1" To="0" Duration="00:00:01" BeginTime="00:00:06"
                    Storyboard.TargetName="txtTopCredit" 
                    Storyboard.TargetProperty="Opacity">
    </DoubleAnimation>
</Storyboard>

What I would like to do is run this storyboard several times within the lifecyle of the animation.

Something like:-

<Storyboard>
   <!-- (Run my fade-in-fade out with BeginTime of 00:00:00) -->
   <StringAnimationUsingKeyFrames Duration="00:00:01" BeginTime="00:00:07"
           Storyboard.TargetName="txtTopCredit" 
           Storyboard.TargetProperty="Text">
          <DiscreteStringKeyFrame Value="Game design and concept by" KeyTime="0:0:1" />
    </StringAnimationUsingKeyFrames>
   <!-- (Run my fade-in-fade out again with BeginTime of 00:00:07) -->
   <StringAnimationUsingKeyFrames Duration="00:00:01" BeginTime="00:00:07"
           Storyboard.TargetName="txtTopCredit" 
           Storyboard.TargetProperty="Text">
          <DiscreteStringKeyFrame Value="Look Ive changed to another credit" KeyTime="0:0:1" />
    </StringAnimationUsingKeyFrames>
    <!-- (etc etc) -->
</Storyboard>

I hope you understand the gist of what I'm trying to do. I know I could just add the code in the storyboard to each section of the above but that would be very tedious. Is there an elegant way to do this?

Upvotes: 8

Views: 373

Answers (1)

Nick Mertin
Nick Mertin

Reputation: 1209

You should be able to set the RepeatBehavior property on the storyboard (inherited from Timeline)

<Storyboard x:Key="storyFadeInOutTop" Name="storyFadeInOutTop" RepeatBehavior="Forever">
    <DoubleAnimation From="0" To="1" Duration="00:00:01" 
                    Storyboard.TargetName="txtTopCredit" 
                    Storyboard.TargetProperty="Opacity">
    </DoubleAnimation>
    <DoubleAnimation From="10" To="0" Duration="00:00:01" BeginTime="00:00:01"
                    Storyboard.TargetName="blurTop" 
                    Storyboard.TargetProperty="Radius">
    </DoubleAnimation>
    <DoubleAnimation From="0" To="10" Duration="00:00:01" BeginTime="00:00:05"
                    Storyboard.TargetName="blurTop" 
                    Storyboard.TargetProperty="Radius">
    </DoubleAnimation>
    <DoubleAnimation From="1" To="0" Duration="00:00:01" BeginTime="00:00:06"
                    Storyboard.TargetName="txtTopCredit" 
                    Storyboard.TargetProperty="Opacity">
    </DoubleAnimation>
</Storyboard>

RepeatBehavior can also be set to a positive integer.

Upvotes: 1

Related Questions