You can nest storyboards, and when nested, a child always starts at
the same time as the parent.
As a result, you can do any number of animations in parallel without
any special markup, you just nest one or more storyboards inside a
parent.
As for sequential animations, you have to set a start time and a
duration, but if you just keep nesting the storyboards each storyboard
will start at the same time as its parent. The advantage of this is
that if you need to modify one part of a complex orchestration, you
only have to modify a pair of things at any time, the rest will remain
correct.
This makes it quite easy, as all you need to do for a sequence is nest
each follower in its parent's storyboard, and make sure each BeginTime
matches its parent's Duration. You don't need to keep a track of a
grand total of the time, and you can add remove links in the chain
without resetting all of your BeginTimes.
The set of nested storyboards seen below will animate the height of
three rectangles in parallel, and when finished will animate the
height of a 4th,5th,6th,7th in sequence one after each other. You
could remove the 5th animation (and its storyboard) and the only thing
you would need to do is make sure the former 6th animation had the
same BeginTime as the Duration of the 4th.
<Storyboard x:Name="sbParent" >
<DoubleAnimation Storyboard.TargetName="rGreen"
Storyboard.TargetProperty="Height"
Duration="0:0:2" From="10" To="50"/>
<Storyboard x:Name="sbChild" >
<DoubleAnimation Storyboard.TargetName="rRed"
Storyboard.TargetProperty="Height"
Duration="0:0:2" From="10" To="50"/>
</Storyboard>
<Storyboard x:Name="sbTrailer">
<DoubleAnimation Storyboard.TargetName="rYellow"
Storyboard.TargetProperty="Height"
Duration="0:0:2" From="10" To="50"/>
</Storyboard>
<Storyboard BeginTime="0:0:2">
<DoubleAnimation Storyboard.TargetName="rBlue"
Storyboard.TargetProperty="Height"
Duration="0:0:2" From="10" To="50"/>
<Storyboard BeginTime="0:0:2" >
<DoubleAnimation Storyboard.TargetName="rOrange"
Storyboard.TargetProperty="Height"
Duration="0:0:2" From="10" To="50"/>
<Storyboard BeginTime="0:0:2" >
<DoubleAnimation Storyboard.TargetName="rPink"
Storyboard.TargetProperty="Height"
Duration="0:0:2" From="10" To="50"/>
<Storyboard BeginTime="0:0:2" >
<DoubleAnimation Storyboard.TargetName="rPurple"
Storyboard.TargetProperty="Height"
Duration="0:0:2" From="10" To="50"/>
</Storyboard>
</Storyboard>
</Storyboard>
</Storyboard>
</Storyboard>
On Tue, May 18, 2010 at 7:14 PM, Sam Lai <[email protected]> wrote:
> The talk about animations today reminds me of a question I've been
> meaning to ask -
>
> Having played with Flex, and a little with WPF and Silverlight, I
> still find Flex animations much easier to do for simple things. For
> example, if I want a panel to move and resize in parallel, and a label
> to slide in after that has completed, I'd do the following in Flex:
>
> <mx:Transition id="toShowBrandingPopupState" fromState=""
> toState="showBrandingPopup">
> <mx:Sequence>
> <!-- animate branding popup -->
> <mx:Parallel>
> <mx:Move duration="1000"
> target="{brandingPopupPanel}" xBy="-270"
> yBy="-270" />
> <mx:Resize duration="1000"
> target="{brandingPopupPanel}"
> widthTo="270" heightTo="270" />
> </mx:Parallel>
> <!-- this is the label's width + space for a
> gap between this and
> the logo -->
> <mx:Move duration="500" target="{logoLabel}"
> xBy="-120" />
> </mx:Sequence>
> </mx:Transition>
>
> I know how to replicate that in WPF/Silverlight by setting the times
> to emulate the parallel and sequence tags, but it feels tedious; I
> don't really care about actual time values. And if I change the
> duration of any component, I'd have to shift the times for everything
> else after it. Also, if I want to dynamically create the
> transition/storyboard, I'd have to account for the times for each
> component, and shift things if I add animation components in between
> others etc.
>
> Is there any wrapper/library in WPF/SL that provides a Flex-style
> animation API? It just feels so much simpler for animations like this.
>
> Or do I just need some re-education to bend my brain to the SL way?
> _______________________________________________
> ozsilverlight mailing list
> [email protected]
> http://prdlxvm0001.codify.net/mailman/listinfo/ozsilverlight
>
>
_______________________________________________
ozsilverlight mailing list
[email protected]
http://prdlxvm0001.codify.net/mailman/listinfo/ozsilverlight
