Gradient Animation Obsession Redux

karstenj — Fri, 05 Jan 2007 01:02:00 GMT

I guess I didn't call it an obsession without reason, as I can't seem to keep away from those hyponotizing gradient animations. I modified the tool I posted last month so that it would output the XAML, such that a designer could actually use the tool and never touch a line of XAML. I set up the tool to output either WPF or WPF/E XAML, as WPF/E doesn't support everything (yet) that the tool uses, such as AccelerationRatio, as well as having a different namespace.

I ran into some problems with XAMLWriter and the way it strips x:Name from the XAML it produces, so there is some hacky string replace code in there that I'm not proud of. I could have used property paths as an alternative.

Because you can't use XAMLWriter in an XBAP, I made the tool a ClickOnce .application that doesn't get installed on your machine but just runs in the ClickOnce cache. Hopefully, we'll see more and more of these types of apps -- mini applications that never get installed but can do more than in-browser applications.

Download the source or run the tool. Also, check out some of the gradient animations I made with the tool and put into a WPF/E page here (screenshot below, although it doesn't do justice to the hypnotizing effect...)

Animation Handoff Bug and Workaround for current WPF/E CTP

karstenj — Wed, 13 Dec 2006 21:39:00 GMT

My good friend Hans Hugli, who doesn't have a blog but sits down the hall from me, hit the following issue with the current CTP of WPF/E and wanted to get it out to the world, so I'm posting it on his behalf. You can see what he's talking about in action (source also) here.

***************************************

I set out to create a slideshow of Flickr images with transitions using WPFe, and I quickly ran into a problem which prevented me from being able do animation beyond simple animation (an element moving from point A to point B and back again or repeating it’s movement.) I needed move element through an arbitrary set of points, so that I could do several scales, translations, and rotations consecutively.

The behavior that I was seeing was that the first Storyboard animation would happen after calling Begin(), but all other Storyboard Begin() calls would be ignored. Of course, my first thought was that I was doing something wrong, so I scoured the code. I thought that perhaps the Timeline associated with the Storyboard needed to be reset. But apparently the Begin() method resets the TimeLine. I played around with the multiple ways that you can define values in the DoubleAnimation class: By, From, To. From and To are explicit position values and By is a relative movement from the target elements starting property value. But neither solved the issue.

I then stumbled across a solution a few hours later. By stopping the Storyboard immediately before calling the Begin() method of the next Storyboard the animations successfully and smoothly transitioned from the first animation to the next.

It turns out that it was a WPFe bug. The post animation target element property values for the Storyboard were not being handed off to the next Storyboard being called. This bug was fixed shortly after the December CTP, and it should make it into the next CTP.

So let’s say you want to move a rectangle from point A to point B and then to point C and then back to A again. I would do it so:

Environment.js:

…

function root_Loaded(s, a) {

StartNextAnimation(1);

}

function anim_completed(s,a) {

switch(s.Name){

case "sb1":

setTimeout("StartNextAnimation(2)", 2000); // two second pause between animations.

break;

case "sb2":

setTimeout("StartNextAnimation(3)", 2000);

break;

case "sb3":

setTimeout("StartNextAnimation(1)", 2000);

break;

}

function StartNextAnimation(s) {

switch(s){

case 1:

sb3.Stop(); // previous Storyboard animation must be stopped immediately prior to next Storyboard animation's Begin() method for smooth positioning behavior.

sb1.Begin();

break;

case 2:

sb1.Stop();

sb2.Begin();

break;

case 3:

sb2.Stop();

sb3.Begin();

break;

}

…

Multpointanimation.xml:

…

</Storyboard>

</BeginStoryboard>

</Storyboard>

</BeginStoryboard>

</Storyboard>

</BeginStoryboard>

</TriggerActionCollection>

…

</Canvas>

IRhetoric - Karsten Januszewski : WPF/e

Gradient Animation Obsession Redux

Animation Handoff Bug and Workaround for current WPF/E CTP