my pet project: AnimationBehaviors
I’ve been working on a project in my spare time called “AnimationBehaviors”.Now that I’ve got it working reasonably well I’d like to share it with the world.The animation system in WPF is really powerful, however it’s not always easy to create certain effects in XAML without falling down to code.Even when code is not required, it’s not always easy to create reusable animation effects.Enter AnimationBehaviors.
AnimationBehaviors is a library that makes it easy to add common animations to elements in XAML with little effort.By utilizing attached properties I’ve created a system where adding (sometimes) complicated animations becomes as easy as adding an attribute to an elements tag in XAML.
An example:
<Rectanglemy:AnimationBehaviorHost.LoadedBehavior="SlideInFromTop"
my:AnimationBehaviorHost.ClickBehavior="Jiggle"
my:AnimationBehaviorHost.UnloadedBehavior="SlideOutToBottom"
Width="200"Height="100"
Fill="red" />
The above snippet adds 3 behaviors to a rectangle.The first simply animates the rectangle when the page is loaded from the top (typically of the page) to its natural position.Then when the user clicks on it, the rectangle gets a nice “jiggle” animation.Finally, when the user navigates to another page (either hitting back/forward or any other navigation action) the rectangle will first animate off the page toward the bottom _BEFORE_ the navigation takes place.What’s important to note here is that doing the slide animations normally require code because you have to calculate where to slide from based on the elements position and size (or if you hard code it, it becomes difficult to change later).Additionally, if you’ve ever tried to do transition animations in WPF when the user navigates away from a page, then you know how tedious that can be.With AnimationBehaviors all of details are hidden from the user and he can simply slap “behavior” attributes onto the appropriate elements.
Here is another effect that is really easy to do with this library, but can be seriously tedious to do (in a reusable way) on your own.
<RectangleWidth="{Binding DocumentRoot.Width}"Height="{Binding DocumentRoot.Height}"Fill="black"
my:AnimationBehaviorHost.LoadedBehavior="FadeOut"
my:AnimationBehaviorHost.UnloadedBehavior="FadeIn"
IsHitTestVisible="false"/>
This is an easy way to make it so your pages “fade in” when entered and “fade out” when exited.It’s very cinematic looking.
Can you guess what this does?
<WrapPanelx:Name="pan"Width="200">
<RectangleMouseDown="AddRect"
my:AnimationBehaviorHost.LayoutBehavior="Smooth"
Width="20"Height="20"
Margin="5"
Fill="Pink" />
<RectangleMouseDown="AddRect"
my:AnimationBehaviorHost.LayoutBehavior="Smooth"
Width="20"Height="20"
Margin="5"
Fill="Pink" />
<RectangleMouseDown="AddRect"
my:AnimationBehaviorHost.LayoutBehavior="Smooth"
Width="20"Height="20"
Margin="5"
Fill="Pink" />
</WrapPanel>
Currently I have support for 4 types of behaviors.LoadedBehaviors, UnloadedBehaviors, ClickBehaviors, and LayoutBehaviors.Each type has several different pre-packaged animations, and I hope as the project development continues that the community will be able to contribute additional behaviors as needs arise. FYI, the AnimationBehaviorHost class (omitted above) is a Decorator that is only needed once per page in most cases because attached properties work on all decendents. In the case of the slide animations, the host is used to determine where to slide to/from. Generally I make my root element the behavior host so the slides are relative to the page.
I’m working on getting a CodePlex projects setup for this so others can add behaviors and improve the code, but until then you can download the code and a demo app on my website:
http://www.brandonfurtwangler.com/software/AnimationBehaviors.zip
Does this looks like something you’d be interested in?I’m looking for feedback, questions, and suggestions on additional behaviors.Thanks for checking out this project, and sorry for such a long post!
-Brandon Furtwangler
This is fantastic! The WPF animation system begs for more abstraction and I've been waiting for someone to take up the challenge. Nice work! I look forward to seeing where this goes.
Wow...that looks great
I for one have been very reluctant to put animations into my app, purely because of the reasons you have stated. This looks to be a very neat solution.
Simon
Good stuff! The designers in the equation are never going to want to have to wait for developers to come along to provide animation in these types of scenarios and would be elated to use tools like this to get the job done on their own. I think if you spend some time on making sure it has a great design time experience you'd have a hell of a product offering on your hands.
Good luck,
Drew
This is a very slick approach. Very modular and very extensible.
But tell me what I am doing wrong. I have set "Test" as the startup project and it works fine but I get all kinds of messages saying that I am missing an assembly reference and Intellisense does not work for the the AnimationBehaviors classes.
Do I have to do something more than set the Reference to point to the dll?
hum...I'm not getting that error. Is anyone else having the same problem?
I was able to extract the zip, set Test as startup, hit f5 and it ran without error. All the references should already be set on the Test project, but just in case here is a list of what I've got for Test:
AnimationBehaviors
PresentationCore
PresentationFramework
PresentationFramework.Luna
System
System.Xml
WindowsBase
Of course you will also need the beta 2 version of WPF installed.
If it's still not working try doing Build->Clean Solution and then Build->Build Solution
Hope that helps.
The project runs fine. And I do have beta2. But the errors are appearing in VS in the xaml files.
I have the same references that you have and I cleaned the solution and rebuilt. But still get messages in design environment.
The Test project's scene1.xaml and scene2.xaml files have squiggly lines under the mapping directive to xmlns:my as well as under all the my:AnimationBehaviorHost tags.
The project runs fine (and it's an excellent set of tools) but just annoying that the assembly references aren't working quite right in the design environment. I'm running on XP not Vista but I can't imagine why that should matter.
Ok, I misunderstood your problem. I do not get the squiggles that you are reporting but I suspect this is because I dont have Cider installed. When I did have it installed I got several "errors" innaccurately reported on a different project, so I uninstalled it. I dont think there is anything we can do to fix this unfortunately.
VS support for XAML is still pretty weak from what I've seen but I'd expect this to be fixed in later releases.
No problem. I thought it might be just a beta quirk. Thanks for your quick help.
It's a great little project. Keep posting as you make inprovements.
I just finished some new features and did a lot of refactoring.It looks like people might be interested in using the library so I’m still working on getting it on CodePlex but they haven’t yet accepted the project.For now, I’ve simply updated the zip on my website with the new code and demo.
http://www.brandonfurtwangler.com/software/AnimationBehaviors.zip
Currently AnimationBehaviors supports the following behaviors (27 total):
· LoadedBehavior
o FadeIn
o FadeOut
o ZoomIn
o ZoomInSpringy
o ZoomInRotate
o SlideInFromLeft
o SlideInFromTop
o SlideInFromRight
o SlideInFromBottom
o ScaleInVertically
o ScaleInHorizontally
· UnloadedBehavior
o FadeIn
o FadeOut
o ZoomOut
o ZoomOutRotate
o SlideOutToLeft
o SlideOutToTop
o SlideOutToRight
o SlideOutToBottom
o ScaleOutVertically
o ScaleOutHorizontally
· ClickBehavior
o Jiggle
o Throb
o Rotate
o Snap
· LayoutBehavior
o Smooth
o Springy
Loaded and Unloaded behaviors both support a delay to create cascaded animations, and all 4 categories support an attribute to control the duration of the animations.To give an idea on how these can be used the following is the full XAML for the first page of the demo app “Test”.The only code behind is to navigate to the next page (Can this be done form XAML?).
<ab:AnimationBehaviorHost
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ab="clr-namespace:AnimationBehaviors;assembly=AnimationBehaviors"
x:Name="DocumentRoot"
x:Class="AnimationBehaviors.Scene1"
Width="800" Height="600">
<Grid>
<Canvas Width="500" Height="500">
<Rectangle ab:AnimationBehaviorHost.LoadedBehavior="SlideInFromBottom"
ab:AnimationBehaviorHost.LoadedDelay="0:0:0"
ab:AnimationBehaviorHost.ClickBehavior="Jiggle"
ab:AnimationBehaviorHost.UnloadedBehavior="SlideOutToTop"
Canvas.Top="0" Canvas.Left="0"
Width="200" Height="200"
Fill="blue" />
<Rectangle ab:AnimationBehaviorHost.LoadedBehavior="SlideInFromLeft"
ab:AnimationBehaviorHost.LoadedDelay="0:0:1"
ab:AnimationBehaviorHost.ClickBehavior="Throb"
ab:AnimationBehaviorHost.UnloadedBehavior="SlideOutToRight"
Canvas.Top="0" Canvas.Left="300"
Width="200" Height="200"
Fill="green" />
<Rectangle ab:AnimationBehaviorHost.LoadedBehavior="SlideInFromTop"
ab:AnimationBehaviorHost.LoadedDelay="0:0:2"
ab:AnimationBehaviorHost.ClickBehavior="Snap"
ab:AnimationBehaviorHost.UnloadedBehavior="ScaleOutVertically"
ab:AnimationBehaviorHost.UnloadedDelay="0:0:1.5"
Canvas.Top="300" Canvas.Left="300"
Width="200" Height="200"
Fill="red" />
<Rectangle Canvas.Top="300" Canvas.Left="0"
Width="200" Height="200"
Fill="yellow"
ab:AnimationBehaviorHost.LoadedBehavior="SlideInFromRight"
ab:AnimationBehaviorHost.LoadedDelay="0:0:3"
ab:AnimationBehaviorHost.UnloadedBehavior="SlideOutToLeft"
ab:AnimationBehaviorHost.ClickBehavior="Rotate"/>
<Grid ab:AnimationBehaviorHost.LoadedBehavior="ZoomInRotate"
ab:AnimationBehaviorHost.LoadedDelay="0:0:4"
ab:AnimationBehaviorHost.UnloadedBehavior="ZoomOutRotate"
Canvas.Top="150" Canvas.Left="150"
Width="200" Height="200"
Background="orange"
MouseUp="NextPage">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Click for page 2</TextBlock>
</Grid>
</Canvas>
<RectangleWidth="{Binding DocumentRoot.Width}" Height="{Binding DocumentRoot.Height}" Fill="black"
ab:AnimationBehaviorHost.LoadedBehavior="FadeOut"
ab:AnimationBehaviorHost.UnloadedBehavior="FadeIn"
ab:AnimationBehaviorHost.UnloadedDelay="0:0:2.5"
IsHitTestVisible="false"/>
</Grid>
</ab:AnimationBehaviorHost>
-Brandon Furtwangler
