Dynamic Animations in WPF

Question

2.00/5 (1 vote)

See more:

Hi all

I am sure I've seen a way to do an animation in WPF similar to how Cocoa does it, where I do it all in one line, using a static method telling the object what I want moved. However, all the examples I can find on MSDN are creating storyboards, etc. Am I right ? Is there a way to do simple, dynamic animations without creating a lot of objects ?

I found this:

C++

DoubleAnimation da = new DoubleAnimation();
da.From = this.Top;
da.To = height - 50;
da.Duration = new Duration(TimeSpan.FromSeconds(1));

this.BeginAnimation(Window.TopProperty, da);

If this is how I do things dynamically, how do I animate more than one thing at once ? I guess that needs a StoryBoard and I'm back where I started ?

Posted 29-Apr-10 16:31pm

Christian Graus

Updated 29-Apr-10 16:40pm

v2

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Kolkman · Accepted Answer · 2010-05-12T11:07:00

To animate more than one property at once - yes you'll need a Storyboard.

As for moving an element, the difficulty lies with the element not really having a set Left/Top property. In WPF everything is based on Margins and Alignments.

I've never tried it, but you might be able to setup an animation on a margin. Though you'll most likely end up with some stretching effects.

The way I animate a move is to use a TranslateTransform.

You'll need an animation for each axis you want to move on so for moving on a diagonal you'll need a total of 2 animations.

Here is a quick example of how to move an element 150 on a diagonal:

Sorry about the VB - though it shouldn't be hard to convert to C#

'This creates the new TranslateTransform that changes how the element is rendered
' (x = 0, y = 0) means no translation is done
'[new] is the element to be animated
[new].RenderTransform = New TranslateTransform()

'The animation requires a NameScope within which to operate, as the animations must be using a registered name for the object
Dim ns As New NameScope()
NameScope.SetNameScope(_manager.Panel, ns) '_manager.Panel in my case was the container of the element
ns.RegisterName("newTransform", [new].RenderTransform) 'Register the name

Dim board As New Storyboard()
Dim animLength As New TimeSpan(0, 0, 0, 0, 1500) '1.5 seconds

'Handle YProperty (moving 150 units down)
'A FillBehavior of Stop resets the animation after it has completed
'A FillBehavior of Hold keeps the element at the intended target, but you won't be able to manually set the property in question anymore
Dim dblNewY As New DoubleAnimation(150, New Duration(animLength), FillBehavior.Stop) 
Storyboard.SetTargetName(dblNewY, "newTransform") 'tell the animation what to animate against
Storyboard.SetTargetProperty(dblNewY, New PropertyPath(TranslateTransform.YProperty)) 'tell the animation which property
board.Children.Add(dblNewY)

'Handle XProperty (moving 150 units to the right)
Dim dblNewX As New DoubleAnimation(150, New Duration(animLength), FillBehavior.Stop)
Storyboard.SetTargetName(dblNewX, "newTransform")
Storyboard.SetTargetProperty(dblNewX, New PropertyPath(TranslateTransform.XProperty))
board.Children.Add(dblNewX)
board.Begin(_manager.Panel) 'the storyboard wanted a reference point for the namespace - this works with the NameSpace registered above and is again the container of the element to animate

I realize this is creating a number of objects, but it is a dynamic animation. I've been using some of this to create a whole animation framework for animating elements on/off of a given container. Clipping and reveal animations are easier as you can animate a whole rectangle with one animation.

I hope that helps you out.

Dynamic Animations in WPF

1 solution

Solution 1

Add your solution here

Preview 0

Dynamic Animations in WPF

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us