XAML C# WPF Best efficient way to do an ordered sequence of animations
I would like to do a sequence of animations on a label, for example, first do opacity animations from values 0 to 1 and vice versa and just at the end of opacity animation and not before a foreground animation. I would like to do it in XAML code and then start and finish de animation from C# code. Which is the best and efficient way to do it?
开发者_如何学编程All replies are welcome!
Thanks in advance.
The easiest way is to define the entire animation in a single storyboard with suitable BeginTime
and Duration
properties. This way the entire animation can be started and stopped as a unit, but you can have different sequences.
For example:
<Storyboard Duration="0:00:06">
<DoubleAnimation Duration="0:0:4" Storyboard.TargetName="gear1RotateTransform" Storyboard.TargetProperty="Angle" From="-600" To="0"/>
<DoubleAnimation Duration="0:0:4" Storyboard.TargetName="gear2RotateTransform" Storyboard.TargetProperty="Angle" From="600" To="0"/>
<DoubleAnimation Duration="0:0:4" Storyboard.TargetName="gear3RotateTransform" Storyboard.TargetProperty="Angle" From="-600" To="0"/>
<DoubleAnimation BeginTime="0:0:1" Duration="0:00:02" Storyboard.TargetName="firstLetter" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/>
<DoubleAnimation BeginTime="0:0:2" Duration="0:00:02" Storyboard.TargetName="secondLetter" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/>
<DoubleAnimation BeginTime="0:0:3" Duration="0:00:02" Storyboard.TargetName="thirdLetter" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/>
<DoubleAnimation BeginTime="0:0:4" Duration="0:00:02" Storyboard.TargetName="siteLink" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/>
<DoubleAnimation BeginTime="0:0:4" Duration="0:00:02" Storyboard.TargetName="siteLinkTop" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/>
</Storyboard>
This storyboard changes the values on the 3 rotate transforms for the first 4 seconds, but the opacity on the firstLetter
item doesn't start to change until after one second has passed and it only runs for 2 seconds. The siteLink
and siteLinkTop
elements don't have their opacity changed until after 4 seconds (and the gear rotation animation has finished).
精彩评论