Image Animations Problems in Silverlight 3

I was working on a new version of hacking silverlight (the sight) at mix using Silverlight 3 and one of the things I wanted todo was have more of a cloud sort of display of hightlights as opposed to a billboard and do this fakem up 3d using Faisels ViewPanel3D he sent me. it was all great but when the images animated to their new positions it was not smooth and no matter what I did I couldn't seem to be them to animation smoothly.

I talked to a few designers about this and some one mentioned pixel slitting or something like that so I did a bit of research (IE. paid attention to all the items in intellisence for images) and found a nifty setting that fix's the problem.

so it turns out there is not really pixel split or whatever it is they were saying or maybe there is under the covers but for pref reason it is turned off. So the magic setting that puts it back is:

UseLayoutRounding="False"

which seems to turn this thing off so what I think happens normally is that Silverlight is moving the image to the next pixel as opposed to pixel splitting and that can make slow moving images look like they are jerking a bit. So the images then look like:

<Image x:Name="CloudImageElement" Cursor="Hand" Stretch="UniformToFill" Opacity=".8" UseLayoutRounding="False"
MouseEnter="CloudImageElement_MouseEnter"
MouseLeave="CloudImageElement_MouseLeave"
MouseLeftButtonDown="CloudImageElement_MouseLeftButtonDown"
MouseLeftButtonUp="CloudImageElement_MouseLeftButtonUp" >
<Image.Effect>
<DropShadowEffect ShadowDepth="5" Opacity=".7"/>
</Image.Effect>
</Image>

and this seemed to work great. :)

Animation in-depth with Silverlight 2.0 Beta

A friend of mine Faisal Khan from Bangladesh did an articled with the above title. Its a pretty good article on the topic of Animation in Silverlight :)

http://dotnetslackers.com/articles/silverlight/AnimationInDepthWithSilverlight20Beta1.aspx

Anatomy of a Silverlight Animation

For the most part we should be using Storyboards to do animations. Though it is possible to do programmatic animation and we do sometimes programmatically set properties the Storyboard infrastructure in Silverlight provides a standard easy to use and optimized way to-do animation and is a key tenet of the Silverlight technology especially around performance.

Storyboards like other elements in Xaml are defined with tags. The Storyboard element then can be a resource or in a trigger. We can also point a Storyboard at a specific element where each animation can target a different property and we can also target each specific animation at a given element and property separately. Let us start with a Storyboard then like this example:

<Storyboard x:Name="MyFirstStoryBoard"></Storyboard>

From this Storyboard we will build out our animations. The individual animations go in the story board. There are several kinds of animations such as color, point, key frame and key spline animations but we will start with point and color animations. Now look at this simple double animation.

<DoubleAnimation Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Canvas.Left)"
To="48" Duration="0:0:3" />

This is a DoubleAnimation that, when the Storyboard is triggers changes one property value to another over the course of the duration. In this case the animation is targeted on the PolygonElement at the Left value. This animation does not have a ‘From’ setting so the property goes from whatever value it at to the ‘To’ setting and then over the duration of the ‘Duration’ setting in this case 3 seconds. We could also set a ‘BeginTime’ using the same time format as that of the Duration like this code sample:

<DoubleAnimation Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Canvas.Left)" From="5"
To="48" Duration="0:0:3" BeginTime="00:00:02" />

This animation then targets the Canvas.Left property of the element named ‘PolygonElement’. At 2 seconds past the trigger of the animation it will change the left value from 5 to 48 over the course of 3 seconds. This was a double animation and you can have any number of these in a given story board. You can also use color animations in the same way with double animations. Take this code example:


<ColorAnimation
Storyboard.TargetName="PolygonElement"
Storyboard.TargetProperty="(Fill).(Color)"
From="#3c5f0c" To="#728f4a" Duration="0:0:5" />

Like the double animation earlier this ‘ColorAnimation’ is targeted at the same element but on a different property namely one that is a color ‘Fill.Color’. When this animation is triggered the ‘Fill.Color starts at one color and transforms to the other over the course of 5 seconds.