Search

I’ve been explaining the concept of Fluid UI, as a means to animate discrete properties.  The first example that comes to mind is the Visibility property of an element.  Its either Visible or Collapsed, there is no way to interpolate between the two values. When you change the Visibility property between different VisualStates and check the “Use Fluid UI” button, rather than instantly disappearing, Fluid UI will animate the opacity and scale transform to provide a visual transition between the discrete values.

It moves the text up and rotates it at the same time resulting in a spiraling effect. It is done by giving the TextBlock elements a PlaneProjection each and animating the RotationY and GlobalOffsetY properties.

The TextBlock elements are positioned below the bottom of the Canvas. The Canvas has a Clipping Mask so no one will see them until the animation starts.

This is part 5 of the series “Silverlight in Action”:

1. Visuals staring at the mouse cursor.
2. Floating Visual Elements.
3. Flipping Panels.
4. Flying objects against you.
5. Smoke effect
6. Book Folding effect using Pixel Shader
7. Navigation in 3D world of 2D objects
8. Animated navigation between Pages

Here we’re sharing our experience from the amazing CompletIT web site.

Maybe the hardest feature to implement from the entire site was the Smoking menu effect. We’ve tried out a lot of ideas and I’m going to summarize some of them:

1. We thought to use a video as a background, but its performance was bad. Blending the video with the background washard to do.

In the context of animation, one of the biggest features in Flash that is missing from Silverlight 3 is an Opacity Mask layer. I haven't seen any mention of this in to Silverlight 4, but I could be mistaken. The only feature that we have in Silverlight 3 is the OpacityMask on each element, which is either a Brush or an image - (Image Brushes don't tile either, but that's a post for another day).

This is part 4 of the series “Silverlight in Action”:

Here we’re sharing our experience from the amazing CompletIT web site.

This time we will cover how to build kind of particle system with flying “3D” objects against you. In our example the objects are thrown against you when you click to open a menu item.

Lets first see how it looks.

And double click on the surface to see ‘Flying Objects against you’ in action.

This is part 3 of the series “Silverlight in Action”:

1. Visuals staring at the mouse cursor.
2. Floating Visual Elements.
3. Flipping Panels.
4. Flying objects against you.
5. Smoke Effect
6. Book Folding effect using Pixel Shader
7. Navigation in 3D world of 2D objects
8. Animated navigation between Pages

Here we’re sharing our experience from the amazing CompletIT web site.

In this ‘”how to” session, we’ll cover one of the most interesting and hardest to implement part of the site - How to flip the menu item and simultaneously show the actual page behind. The result of the effect should be like the page text is on the back of the menu.

Lets first see how it looks.

Here we’re sharing our experience from the amazing CompletIT web site.

As you may already know, every Silverlight application “must” have some objects floating around in a quite 3D manner. For example, let’s make a panel with happy faces floating around the screen in a controlled way, like this one.

Floating in Action

Idea

The idea is to create an attached behavior for a panel, so that when enabled, through attached property it’ll make all panel’s children float around.

I wanted to do this animation at runtime. I’ve noticed that XAML is great when you know exactly which pre-created object you want to animate in a pre-determined way. If you however haven’t created the object yet or want to use some custom parameters, using C# code can sometimes be a better way to achieve your goals.

After finding out about the Artefact Animator,  written by Jesse Graupmann, I knew I wanted to try it out.

The Artefact Animator library is based on the same concept as Tweener for Flash, which provides an easy way to do procedural animations in WPF and Silverlight.

I found some time last night to put together this little Xbox Live avatar mosaic and was very pleased with the results.