DevDave - Dave Relyea's Silverlight Blog : Animation

Layout Transitions - An Animatable WrapPanel

Dave Relyea — Thu, 17 Jul 2008 18:37:00 GMT

I've been playing around with RenderTransforms and decorators and such to make layout transitions, but for this WrapPanel, my goal was to introduce no additional UI elements, animations or transforms. I also wanted to use some easing equations to do some cool transitions, and separate that logic from the WrapPanel. I wanted the elements the be "live" while they were on the screen, and I wanted them to enter the screen in a nice fashion. I also wanted each element to animate individually. One of my earlier versions of this kept track of a single starting time for all animations, and it wasn't cool enough. Sometimes, it is important to be cool.

WrapPanels

A WrapPanel is a layout container that places its elements in rows. It fills up one row, then moves on to the next one. The logic isn't all that tough. What I wanted to do was to make the items move smoothly when the WrapPanel was resized, and also enter the WrapPanel from the upper left and move to their new position.

Below are some of the interesting bits of the panel.

Using a zero-duration Storyboard to simulate a per-frame callback

Not using animations was one of my requirements, since I wanted to use something other than linear interpolation. The AnimateableWrapPanel uses a zero-duration Storyboard to simulate a per-frame callback. Here's how that is done. In the constructor, an empty Storyboard is created and started.

public AnimatedWrapPanel()

{

// This sets up the per-frame callback that we use for animation.

_tick = new Storyboard();

_tick.Duration = new Duration(TimeSpan.Zero);

_tick.Completed += Tick;

_tick.Begin();

}

The Tick method does whatever I want to do each frame, and restarts the Storyboard.

/// <summary>

/// This tells the layout system to call Arrange on the Panel if there are any elements that

/// must be moved.

/// </summary>

private void Tick(object sender, EventArgs e)

{

// If there are still elements to be animated, make sure that ArrangeOverride will

// get called. Note that the InvalidateArrange may already have been called due to

// other operations, but calling it again does not hurt, and all of the work will

// be done in ArrangeOverride regardless of where the invalidation came from.

if (_animatingElements > 0)

{

InvalidateArrange();

}

// Restart the storyboard so we get called back on the next frame.

_tick.Begin();

}

This technique does not guarantee smooth animations. It is possible to overload the panel with too many elements for the framewrate to animate 100% smoothly, or maybe the rest of the app is doing so much work that the framerate slows down, but since I use the elapsed time to figure out where to put the elements, the animations will take the same amount of time on all machines. If there is too much going on in the panel and the app, on a low-end machine, the animation might be choppy, but will still finish in the specified time, or one frame longer if the timing is just off.

Using layout to "animate" the elements

I'm a little conflicted about this technique, but I have seen other people use it, so I thought I'd try it. It is a two stage process. The MeasureOverride call figures out where everything should go, and is the only place where the animations are started. This works because MeasureOverride will be called if the AnimatedWrapPanel changes size, or any of its children change size, or children are added or removed. So size changes, adding items etc. kicks off the animations. In ArrangeOverride, any element that is not where it is supposed to be is moved in that direction according to how much it should be done, and the interpolations. Here's what the ArrangeOverride looks like:

/// <summary>

/// A "normal" ArrangeOverride would just put things where they belong. What this one does

/// is to move the children towards their destinations according to the virtual animation

/// data that has been attached to each element. When they get there, the virtual animation

/// is turned off.

/// </summary>

protected override Size ArrangeOverride(Size finalSize)

{

DateTime now = DateTime.Now;

foreach (UIElement child in Children)

{

AnimatedWrapPanelAttachedData data = GetAnimatedWrapPanelAttachedData(child);

TimeSpan elapsed = data.GetElapsed(now);

if (elapsed < Duration || data.TargetPosition != data.CurrentPosition)

{

// The virtual animation is not done yet, so figure out how far along it is...

double progress = (Duration.TimeSpan != TimeSpan.Zero) ? Math.Min(elapsed.TotalMilliseconds / Duration.TimeSpan.TotalMilliseconds, 1.0) : 1;

// ...and what the next position is.

Point newPosition = BlendPoint(_interpolation, data.StartPosition, data.TargetPosition, progress);

child.Arrange(new Rect(newPosition.X, newPosition.Y, child.DesiredSize.Width, _rowHeights[data.Row]));

data.CurrentPosition = newPosition;

}

else

{

// This element is not animating, but it might have become invalid on its own, so it still

// needs to be arranged. The layout system will do as little as possible.

child.Arrange(new Rect(data.CurrentPosition.X, data.CurrentPosition.Y, child.DesiredSize.Width, _rowHeights[data.Row]));

if (data.IsAnimating)

{

--_animatingElements;

// This is the only place where IsAnimating is set to false. This turns off the virtual animation.

data.IsAnimating = false;

}

return finalSize;

}

Attached property bag

Rather than have a bunch of hash tables or something in the panel itself, I wanted to keep all of the state that I needed on the elements, which sounded like a job for attached DependencyProperties. However, I got tired of creating and modifying them as I changed my mind, and decided that it would be easier at design-time and more efficient at run-time if I had a single attached property that was actually a class that had a bunch of properties--an attached property bag. This would be efficient because I always used all of the properties for each element.

Interpolations using easing equations

Rather then hard-coding animations into the panel, or using a simple linear interpolation, I wanted to use pluggable interpolations. The interpolations take a double that indicates progress, where zero is "just starting" and one is "completed". They return a number (alpha) where zero refers to the start position, and one refers to the end position, although the number may be less than zero or greater than one. The general equation is:

alpha = fn(progress)

The linear interpolation is the simplest: it just gives returns the progress, i.e. alpha = progress.

In practice, the interpolations are used to blend the starting and target positions. Here's how the intermediate points are arrived at:

/// <summary>

/// Given an interpolation, the starting and ending positions and a number from 0-1 that represents how

/// far along the virtual animation is, calculate the new position.

/// </summary>

Point BlendPoint(Interpolation interpolation, Point from, Point to, double progress)

{

Point p = new Point();

double alpha = interpolation.GetAlpha(progress);

p.X = from.X + alpha * (to.X - from.X);

p.Y = from.Y + alpha * (to.Y - from.Y);

return p;

}

I used some standard interpolations, but it is possibly and easy to define your own, and then just plug them into the panel. I set up the interpolations with some default values that I thought looked nice, but it is possible to get quite creative.

Using the demo app

This should be pretty self-explanatory, but you can add pretty, randomly-colored Rectangles, text and image thumbnails. Clicking on a Rectangle deletes it from the panel. You can also change the size of all of the children, select the duration of the animations, and the interpolation that will be used. Resize the browser to watch the UI move around. I had wanted to have UI to modify the interpolation parameters, but at some point, you have to stop polishing and move one. Shipping is the art of stopping. So that bit of UI is left as an exercise for the developer.

Update:

Karen Corby has posted a live version of my sample app, and a version of her FlickrViewr that she modified to use the AnimatingWrapPanel, here. I love how the images come in as they are downloaded.

Using an Attached DependencyProperty to Implement Pixel Snapping as an Attached Behavior

Dave Relyea — Sun, 22 Jun 2008 20:30:00 GMT

In a previous post, I introduced the Snapper element, which is a UserControl subclass that snaps its Content to an integer pixel. Now I'll show how to implement snapping as an attached behavior using a custom attached DependencyProperty.

To use the Snapper element, you put it into your tree, and "wrap" the element that you want to snap, like this:

<local:Snapper>
<Rectangle Height="40" Width="40" Stroke="Black" Margin="2"/>
</local:Snapper>

That's not bad, but there's a cooler way to do it. We can add pixel snapping to any element by using an attached property to attach a behavior, like this:

Attached Properties

Using XAML's attached properties, it is possible to put a property on an element that doesn't know about the property at compile time. In other words, "normal" properties have to be implemented on an element's class or base classes. Attached properties do not have this restriction. Some examples of attached properties include Canvas.Left, Canvas.Top, Canvas.ZIndex, Grid.Row, Grid.Column, etc. (If you have to put a "dot" in the property name, it is an attached property.) You can also create your own attached properties, and get and set their values on other objects. Before describing how to create your own attached properties, let's review regular DependencyProperties.

Dependency Properties

A "regular" DependencyProperty is a property that you define for a given class, and it is only valid on that class, like a CLR property. You register the DependencyProperty, and define a CLR property for it. A change notification callback is optional--you can pass null instead of the PropertyMetadata. Here are the elements needed to define a DependencyProperty. Note that the property and the change notification are static. Also note that the class you define the property on must descend from DependencyObject. In this case, I'm using a UserControl.

public class DPExample : UserControl

{

static DependencyProperty DistanceProperty = DependencyProperty.Register("Distance", typeof(double), typeof(DPExample), new PropertyMetadata(OnDistanceChanged));

static private void OnDistanceChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)

{

Debug.WriteLine("Distance property changed from {0} to {1}", e.OldValue, e.NewValue);

}

public double Distance

{

get { return (double)GetValue(DistanceProperty); }

set { SetValue(DistanceProperty, value); }

}

You use the DPExample.Distance property like you would use any CLR property, but the underlying storage is provided by the Silverlight property system. You can set the property in code, in XAML, etc. and you will get change notification. You can also animate it if it is of a type that can be animated.

Attached DependencyProperties

An attached DependencyProperty is defined on one class, but made to by used (mostly) on instances of other classes. It is not necessary for the other classes to know about this property at compile time, so you can set an attached DependencyProperty on any object that descends from DependencyObject--even objects provided in the Silverlight framework. The property is now registered with RegisterAttached (the parameters are the same.) The property get has been replaced by a public static void Get<propertyName> method, and the property setter has been replaced by a public static <type> Set<propertyName> method.

static DependencyProperty MassProperty = DependencyProperty.RegisterAttached("Mass", typeof(double), typeof(DPExample), new PropertyMetadata(OnMassChanged));

static private void OnMassChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)

{

Debug.WriteLine("Mass property changed from {0} to {1}", e.OldValue, e.NewValue);

}

public static void SetMass(DependencyObject obj, double value)

{

obj.SetValue(MassProperty, value);

}

public static double GetMass(DependencyObject obj)

{

object result = obj.GetValue(MassProperty);

return result != null ? (double)result : DefaultMass;

}

public const double DefaultMass = 1;

You will notice that when the GetMass method calls GetValue, it does not immediately cast to a double. This is because if the property has not been set on the instance passed in by the obj parameter, GetValue will return null. In this case, it is typical to return a default value (as above) or some value that signals "not set". This attached DependencyProperty can be set in code by calling the SetMass method, set in XAML, and animated.

Attached Behaviors

If we define a behavior as "doing something" then when we attach a behavior to an element, we are getting it to do something that it could not do before. This is typically done by attaching an event handler or handlers to an elements events. The behavior is in the event handler, which is defined elsewhere. This is obviously easy enough to do in code, but it can also be done in XAML (and code) by leveraging attached DependencyProperties. When an attached DependencyProperty is set on an instance, the property changed notification method is called. This is where you can hook into the element's events.

The Code

Here is a class that implements pixel snapping as an attached behavior.

using System;

using System.Collections.Generic;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Diagnostics;

namespace CustomAttachedDP

{

public class PixelSnapBehavior

{

// Define the attached DependencyProperty

public static DependencyProperty PixelSnapProperty = DependencyProperty.RegisterAttached(

"PixelSnap", typeof(PixelSnapType), typeof(PixelSnapBehavior), new PropertyMetadata(SnapPropertyChanged));

// In the property changed notification method, we will add the element to a list of objects that will

// be snapped when we get a LayoutUpdated event. We have to do a bunch of fancy stuff with weak references,

// our own list, etc. because there is no Unloaded event.

public static void SnapPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

PixelSnapType newSnap = (PixelSnapType)e.NewValue;

int index = 0;

while (index < _objects.Count)

{

if (_objects[index].Target == d)

break;

++index;

}

if (index < _objects.Count)

{

if (newSnap == PixelSnapType.None)

{

if (_objects[index].IsAlive)

{

Debug.WriteLine("Removing RenderTransform");

((FrameworkElement)_objects[index].Target).RenderTransform = null;

}

_objects.RemoveAt(index);

}

else if (newSnap != PixelSnapType.None)

{

_objects.Add(new WeakReference(d));

}

if (!_attached && _objects.Count > 0)

{

FrameworkElement element = d as FrameworkElement;

if (element != null)

{

element.LayoutUpdated += new EventHandler(LayoutUpdated);

_attached = true;

}

else if (_attached && _objects.Count == 0)

{

FrameworkElement element = d as FrameworkElement;

if (element != null)

{

element.LayoutUpdated -= new EventHandler(LayoutUpdated);

_attached = false;

}

// The attached DependencyProperty setter

public static void SetPixelSnap(DependencyObject obj, PixelSnapType value)

{

obj.SetValue(PixelSnapProperty, value);

}

// The attached DependencyProperty getter

public static PixelSnapType GetPixelSnap(DependencyObject obj)

{

object result = obj.GetValue(PixelSnapProperty);

return result == null ? PixelSnapType.None : (PixelSnapType)result;

}

// A utility method to remove all snapped objects from the list.

public static void RemoveAll()

{

while (_objects.Count > 0)

{

if (_objects[0].IsAlive)

{

SetPixelSnap((DependencyObject)_objects[0].Target, PixelSnapType.None);

}

else

{

_objects.RemoveAt(0);

}

// The event handler for the LayoutUpdated event. It will snap everything that it thinks is

// still alive. This is not 100% bulletproof but it should work in most scenarios.

private static void LayoutUpdated(object sender, EventArgs e)

{

int index = 0;

while (index < _objects.Count)

{

if (_objects[index].IsAlive == false)

{

_objects.RemoveAt(index);

}

else

{

Snap(_objects[index].Target as FrameworkElement);

++index;

}

// Try to align an element on an integer pixel

private static void Snap(FrameworkElement target)

{

if (target == null)

return;

PixelSnapType snap = PixelSnapBehavior.GetPixelSnap(target);

// Remove existing transform

TranslateTransform savedTransform = target.RenderTransform as TranslateTransform;

if (savedTransform != null)

{

target.RenderTransform = null;

}

// Calculate actual location

MatrixTransform globalTransform = target.TransformToVisual(Application.Current.RootVisual) as MatrixTransform;

Point p = globalTransform.Matrix.Transform(_zero);

double deltaX = snap == PixelSnapType.Closest ? Math.Round(p.X) - p.X : (int)p.X - p.X;

double deltaY = snap == PixelSnapType.Closest ? Math.Round(p.Y) - p.Y : (int)p.Y - p.Y;

// Set new transform

if (deltaX != 0 || deltaY != 0)

{

if (savedTransform == null)

savedTransform = new TranslateTransform();

target.RenderTransform = savedTransform;

savedTransform.X = deltaX;

savedTransform.Y = deltaY;

}

private static readonly Point _zero = new Point(0, 0);

private static List<WeakReference> _objects = new List<WeakReference>();

private static bool _attached = false;

}

public enum PixelSnapType

{

None,

Closest,

TopLeft

}

Navigation with Animated Transition Effects

Dave Relyea — Fri, 13 Jun 2008 20:21:00 GMT

One of the common things that developers want to do is to navigate between pages of their application. Once they have that, then they want to make the transitions look pretty. The attached project (see below) show how to do use a TransitionControl to do both. The TransitionControl is extensible, so you can even write your own transitions. You can download the project by clicking on the Attachment links on the bottom of the post. Here is a snapshot of the demo app that shows the Image Page in mid-spin as it appears on top of the Controls Page:

How it works

The TransitionControl is subclassed from UserControl. This is its public API:

public partial class TransitionControl : UserControl

{

public TransitionControl();

public void GoTo(FrameworkElement newContent, ITransition transition, TimeSpan duration);

public void Completed();

public void CurrentToBack();

public void CurrentToFront();

public FrameworkElement New { get; }

public FrameworkElement Current { get; }

}

The GoTo method is the only method that you'll call to display new content. You pass in the new content, the transition that you wish to use, and how long you want the transition to take. The other methods and properties are for use by the transition. The sample application uses a TransitionControl for its main, but not the entire page. There is nothing magic about it; it is just a control. You can use more than one, make them any size you like, fill up the page with it, etc.

ITransition

The ITransition interface is as follows:

public interface ITransition

{

void GoTo(TransitionControl control, TimeSpan duration);

void Stop();

}

The Goto method is called by the TransitionControl, which passes in itself and the duration it received in its GoTo method. The Stop method is called by the TransitionControl when the TransitionControl.GoTo method is called before the a transition already in progress can finish.

The simplest implementation of ITransition included in the project is Swap:

/// <summary>

/// This is the simplest transition class, and is about all you can really do

/// without animating. This is a synchronous transition.

/// </summary>

public class Swap : ITransition

{

public void GoTo(TransitionControl control, TimeSpan duration)

{

control.CurrentToBack();

control.Completed();

}

public void Stop()

{

// Nothing to do here, since this is not async

}

The Swap transition ignores the duration and simply bring the new content to the front by calling control.CurrentToBack() and lets the control know that the transition is finished by calling control.Completed.

Animated transitions

Of course, merely swapping the content is not all that interesting. To get some nice effects, we'll need to animate. There is an abstract class in the sample that helps with this.

/// <summary>

/// The StoryboardTransition classs is designed to encapsulate an asynchronous,

/// animated transition.

/// </summary>

public abstract class StoryboardTransition : ITransition

{

public void GoTo(TransitionControl control, TimeSpan duration)

{

_control = control;

_storyboard = new Storyboard() { Duration = duration };

Storyboard.Completed += storyboardCompleted;

control.New.Resources.Add("storyboard", _storyboard);

GoToCore(duration);

Storyboard.Begin();

}

public void Stop()

{

_storyboard.Stop();

}

protected Storyboard Storyboard { get { return _storyboard; } }

protected TransitionControl Control { get { return _control; } }

// The subclass adds their animations to the Storyboard in this override.

protected abstract void GoToCore(TimeSpan duration);

protected void storyboardCompleted(object sender, EventArgs e)

{

CompletedCore();

_control.Completed();

}

// The subclass can remove the stuff needed only for the transition,

// such as clips or transforms.

protected virtual void CompletedCore() {}

private Storyboard _storyboard;

private TransitionControl _control;

}

To implement a subclass of the StoryboardTransition, you'll need to override GoToCore and add your animations to the Storyboard provided. You may also need to add some things to the new content, such as RenderTransforms or Clips. By overriding the CompletedCore transition, you get the opportunity to remove whatever you added that is no longer needed.

The FadeIn transition

The FadeIn transition is a simple animated transition that gives you an idea of how to subclass StoryboardTransition:

public class FadeIn : StoryboardTransition

{

protected override void GoToCore(TimeSpan duration)

{

Control.CurrentToBack();

DoubleAnimation opacityAnimation = new DoubleAnimation() { From = 0, To = 1, Duration = duration, FillBehavior=FillBehavior.HoldEnd };

Storyboard.SetTarget(opacityAnimation, Control.New);

Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath("Opacity"));

Storyboard.Children.Add(opacityAnimation);

}

The GoToCore method is overridden (as it must be, since it abstract). The first thing it does is send the current content to the back, since the new content will be appearing in front of it. They it sets up the opacity animation and adds it to the Storyboard. That's all there is to do, because there is nothing to clean up. Note that the FillBehavior has been set to HoldEnd, meaning that if the animation is stopped, it will jump to the To value and stay there.

Other transitions

Here are the transitions that the project supplies:

Swap
Wipe (you can specify the direction)
FadeIn
FadeOut (I thought there would be a difference between fading in and out, but now I'm not so sure...)
Open (a circle opens up to reveal the new content)
Close (a circle closes, hiding the old content)
Grow (the new content zooms in from a point in the middle of the screen; spinning is optional)
Shrink (the old content disppears to a point in the middle of the screen; spinning is optional)

You can also write your own. If you make a cool transition, I'd love to see it.