ross - ah, not sure why nested storyboards didn't occur to me earlier (I'm doing this by hand, not with Blend). Sounds like it'll do the trick.
.net noobie - This is what I'm doing at the moment, although in code. Unfortunately it doesn't seem to work as smoothly as I want it to (I created a StoryboardQueue class that chains storyboards in the queue together using the completed event). There is a stutter/jump/pause when going from one storyboard to another. Thanks guys. On 19 May 2010 02:05, .net noobie <[email protected]> wrote: > you can also use a Trigger, then you don't need to know about the > Time/Duration > > <i:Interaction.Triggers> > <ei:StoryboardCompletedTrigger Storyboard="{StaticResource SB_1}"> > <ei:ControlStoryboardAction Storyboard="{StaticResource SB_2}" > ControlStoryboardOption="Play"/> > </ei:StoryboardCompletedTrigger> > </i:Interaction.Triggers> > > On Tue, May 18, 2010 at 10:19 PM, ross <[email protected]> wrote: >> >> 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 > > > _______________________________________________ > ozsilverlight mailing list > [email protected] > http://prdlxvm0001.codify.net/mailman/listinfo/ozsilverlight > > _______________________________________________ ozsilverlight mailing list [email protected] http://prdlxvm0001.codify.net/mailman/listinfo/ozsilverlight
