Easy animation with Artefact Animator by Anton

October 25, 2010 Anton Silverlight 0

You know that Silverlight has a big even huge abilities in animation programming. Design-time or in code – creation of animation is very simple if we talk about small changes. Gradients, rotations or location changing. But what about programming of animation which duration is about 30 minutes? To make sure that everything will be fine we will use foreign libraries and code tricks.
When you want to change some properties of elements of application standard animation can’t help you. In this case, use ObjectAnimationUsingKeyFrames with the Storyboard.
In example, we want to change Image Source in animation:

//Creating storyboard
Storyboard storyboard = new Storyboard();
//Setting the duration  
storyboard.Duration = new Duration(TimeSpan.FromSeconds(10));
//Creating Animation
ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();
//Setting the target of animation (it must be element where we want to change 
//Source value)
Storyboard.SetTarget(animation,image);
//Seting the property to change. If you are changing the common property like 
//Opacity, Width which are common for all objects use UIElement.*. Where 
//will be property name.
Storyboard.SetTargetProperty(animation, new PropertyPath("Image.Source")); 
//Creating frame
DiscreteObjectKeyFrame frame = new DiscreteObjectKeyFrame();
//Setting time of frame appearance. In this code it's 4th second.
frame.KeyTime = TimeSpan.FromSeconds(4);
//Now we need to set the value which we need to set for our object's property
frame.Value=(Object)newImageSource.
//Adding the frame to animation
animation.KeyFrames.Add(frame);
//Adding animation to the storyboard
storyboard.Children.Add(animation);

That is a simple example. In big applications code for animation can be very large. We need to separate animation and exclude it to simplify the structure of the program.

How can we change object’s opacity in animation fast and efficient?

//Creating a function for animation creation
public Storyboard HideObject(UIElement objectToHide)
{
//Creating DoubleAnimation. It's the fastest way.
DoubleAnimation animation = new DoubleAnimation();
//Setting duration to 1 second
da.Duration = new Duration(TimeSpan.FromSeconds(1));
//Setting object to animate
Storyboard.SetTarget(animation, objectToHide);
//Setting property to change
Storyboard.SetTargetProperty(animation, new PropertyPath("UIElement.Opacity"); 
//Setting begin value
animation.From = 1;
//Setting end value
animation.To = 0;
//Creating storyboard
Storyboard story = new Storyboard();
//Also, setting duration to 1 second
story .Duration = new Duration(TimeSpan.FromSeconds(1));
//Adding animation
story.Children.Add(animation);
}

 

This function will return the storyboard where the object’s opacity will be changed from 100 to 0 in 1 second.

To add more colorful animation you can use Artefact Animator. It provides an easy to use framework for procedural time-based animations in Silverlight and WPF. Animator provides the same functionality that we’ve created before, but it’s not using Storyboard:

//The main procedure for animation adding
ArtefactAnimator.AddEase ( object, properties, values, time, ease, delay );

What are the other features?

  • Use strings as shortcuts to animations like “x”, “y”, “alpha”, and more!
  • Extensions help reduce coding time by wrapping common animations.
  • Artefact Animator updates every time the UI layer refreshes using CompositionTarget.Rendering. This allows for the most responsive animations possible.
  • Limited error checking to increases performance
  • Includes ported Robert Penner easing equations ( WPF ) ( from DoublePennerAnimation )
  • Includes native easing equations ( Silverlight )
  • Allows custom easing functions
  • Custom Animation support ( Advanced )
  • Animate any property you want with very little effort
  • Create your own custom wrapper using getter/setter functions
  • Register your custom animations and reference them by name later
  • Animations don’t conflict resulting in smooth transitions from one call to the next
  • Call the SlideTo method 1000 times with delays and never worry – the latest animation will always take over when it starts.
  • If errors occur when easing your program is not affected, the ease is simply stopped
  • Begin, Update, Completed, and Stopped events
  • Perfect for sequencing and callbacks
  • Add callbacks via extensions to maintain calls on one line
  • An EaseObjectGroup can be used to report when a group of animations have been completed
  • Includes methods to make sure an objects transform group is in place and in the right sequence before animating any transforms – UIElement.NormalizeTransformGroup()
  • Doesn’t use Storyboards so every aspect of Artefact Animator can be customized and controlled by you.
  • Constructs animations through composition resulting in the ability to extend functionality later on.
  • Adding an Ease to Artefact Animator will produce an EaseObject that allows you to Start or Stop that animation anytime.

Let’s hide image with it!

//Add ArtefactSL.dll to your project and type 
//using Artefact.Animation;
ArtefactAnimator.AddEase(objectToHide, UIElement.Opacity, 0, 1.0, AnimationTransitions.CubicEaseOut, 0);

This procedure will hide the object in 1 second with no delays.

You can find more at the official website. There are examples and well-formed documentation. It’s very popular and with ability to create custom animation it will make your application much more beautiful.