Flex and WPF: A comparison – Part 3a

In this installment of the comparison posts I will look at the Animation framework in WPF and Flex. Both these technologies have vastly simplified the programming model for doing animations on your User Interface. Both of them allow animations to be created using markup (XAML/MXML) or code (C#/AS3). There are a number of animations that can be used out-of-the-box and you can also create your own custom animations.

Since this part is again pretty long, I am splitting it into 2 subparts. In this subpart I’ll cover the way it is done in WPF.

In WPF…

Animations in WPF are typically created using Storyboards. Storyboards are timeline-based animations that run for a specific period of time and target specific elements on the UI. Let’s look at the XAML for a simple Storyboard that fades an Ellipse from opaque to transparent in one second.


<Grid>


<Canvas
Margin=”30″
Width=”230″
Height=”230″
Background=”Gray”>


<Canvas.Resources>


<Storyboard
x:Key=”fade”>


<DoubleAnimation
Storyboard.TargetProperty=”(Ellipse.Opacity)”

Storyboard.TargetName=”e1″ From=”1″
To=”0″
Duration=”0:0:1″
/>


</Storyboard>


</Canvas.Resources>


<Ellipse
Name=”e1″
Canvas.Left=”100″
Canvas.Top=”0″
/>


</Canvas>


</Grid>

The Storyboard.TargetName and Storyboard.TargetProperty target the property of the UI element that needs to be animated (in our case the Opacity property of Ellipse). We are using a DoubleAnimation because the Opacity property is of type double. The From, To and Duration values should be self-explanatory. Note that the format of the Duration property is HH:MM:SS.

More than one animation at the same time

The Storyboard class actually derives from ParallelTimeline, which means you can put multiple DoubleAnimations inside your Storyboard and all of them will animate in parallel. So if you wanted to move the Ellipse from x=100 to x=400 and also fade it out, you could so something like this:


<Storyboard
x:Key=”translateAndFade”>


<DoubleAnimation
Storyboard.TargetProperty=”(Ellipse.Opacity)”

Storyboard.TargetName=”e1″ From=”1″
To=”0″
Duration=”0:0:1″
/>


<DoubleAnimation
Storyboard.TargetProperty=”(Canvas.Left)”

Storyboard.TargetName=”e1″ From=”100″
To=”400″
Duration=”0:0:1″
/>


</Storyboard>

Note how I added an extra DoubleAnimation to do the translation. It will now animate in parallel with the fading animation.

Playing in sequence

What if you wanted an animation to start only after the previous one has completed? Sure, you can do it using the BeginTime property. In the previous example if we wanted the translate animation to happen after the fade completes we can do it this way:


<Storyboard
x:Key=”translateAndFade”>


<DoubleAnimation
Storyboard.TargetProperty=”(Ellipse.Opacity)”

Storyboard.TargetName=”e1″ From=”1″
To=”0″
Duration=”0:0:1″
/>


<DoubleAnimation
Storyboard.TargetProperty=”(Canvas.Left)”

Storyboard.TargetName=”e1″ From=”100″
To=”400″
Duration=”0:0:1″

BeginTime=”0:0:1″
/>


</Storyboard>

Note that since my BeginTime has been set to “0:0:1″, it will only start after the fade-animation completes. So the total time-length of the storyboard is 2 seconds as opposed to 1 second for the previous storyboard. You can also nest ParallelTimelines and mix and match with BeginTime to achieve pretty much any sequence of animations.

There are also other properties on the XXXAnimation classes (XXX denotes the type like Double, Color, etc) like

  • AutoReverse – which automatically reverses the animation
  • RepeatBehavior – which sets the number of times you want to repeat the animation. RepeatBehavior=”Forever” results in non-stop animation.
  • AccelerationRatio, DecelerationRatio – easing in/out values specified as a fraction of the Duration. AccelerationRatio=”0.25″ will accelerate the animation in the first quarter followed by constant-speed animation for the remaining 3/4th.

Using keyframes

The animations I described earlier were of the From/To kind, where you have a starting value and an ending value. If you wanted the animation to pass through multiple states in between the start and end values, you need to use keyframe animation. Here is an example right out of the Windows SDK with the comments explaining exactly what I want to convey!

<Ellipse
Width=200
Height=200>

<Ellipse.Fill>

<SolidColorBrush
x:Name=MyAnimatedBrush
Color=Green/>

</Ellipse.Fill>

</Ellipse>

<Storyboard>

<!– Animate from green to red using a linear key frame, from red to

yellow using a discrete key frame, and from yellow back to green with

a spline key frame. This animation repeats forever. –>

<ColorAnimationUsingKeyFrames


Storyboard.TargetProperty=(SolidColorBrush.Color)


Storyboard.TargetName=MyAnimatedBrush


Duration=0:0:6
FillBehavior=HoldEnd
RepeatBehavior=Forever>

<ColorAnimationUsingKeyFrames.KeyFrames>

<!– Go from green to red in the first 2 seconds. LinearColorKeyFrame creates

a smooth, linear animation between values. –>

<LinearColorKeyFrame
Value=Red
KeyTime=0:0:2 />

<!– In the next half second, go to yellow. DiscreteColorKeyFrame creates a

sudden jump between values. –>

<DiscreteColorKeyFrame
Value=Yellow
KeyTime=0:0:2.5 />

<!– In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame

creates a variable transition between values depending on the KeySpline property. In this example,

the animation starts off slow but toward the end of the time segment, it speeds up exponentially.–>

<SplineColorKeyFrame
Value=Green
KeyTime=0:0:4.5
KeySpline=0.6,0.0 0.9,0.00 />

</ColorAnimationUsingKeyFrames.KeyFrames>

</ColorAnimationUsingKeyFrames>

</Storyboard>

The keyframe animation classes follow the same naming convention of XXXAnimationUsingKeyFrames, where XXX is the type. In the above example we are using ColorAnimationUsingKeyFrames but you could also use DoubleAnimationUsingKeyFrames when animating properties of type Double.

Creating Custom animations

For most cases you should be able to get away with the default animation classes. However for some cases you do need to create your own animation classes. I did a blog post sometime back detailing this technique. The basic idea is that you have a <Type>AnimationBase class from which you derive your animation class, for eg. DoubleAnimation derives from DoubleAnimationBase. Inside the <Type>Animation class you override the CreateInstanceCore() Factory method that returns an instance of <Type>Animation. You can also define additional DependencyProperties on your animation class for further customization. The blog post I mentioned has all these details.

So Storyboards are pretty much the defacto way of describing animations in WPF. However you could also use DoubleAnimation or other animation classes directly without nesting inside a Storyboard. In my experience I have always found it best to have it inside a Storyboard. All the event-based triggering of animations consume Storyboards instead of <Type>Animation instances. I have skipped the part about creating Storyboards and animations in code but it is not much different. Since the tag-names map directly to the class-names, you could recreate the same object hierarchy in code.

The next post will be about Effects – the Flex way of doing animations!

About these ads

2 Responses to “Flex and WPF: A comparison – Part 3a”

  1. Pooja Says:

    Hello Pavan,

    very nice posting. Seems like you have developed a lot. This is very interesting.

  2. Scottie Taghon Says:

    Excuse me really pleasant site!! Man .. I will take the rss feeds


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: