Jose Fajardo

Friday April 24, 2009

"Follow the Cursor" Animation - lets do it with behaviors :)

Most day’s I spend lunch time looking at what animation interactions people are building. There’s one particular animation pattern that seems to be popular for pre-loaders and it’s what I’m happily calling “follow the cursor” pattern :)

Basically while the application is downloading they put a cool little distracting animation where a graphic asset follows the cursor around the screen.

I have 2 examples that I’ve recorded for you… check them out…

 

Up and Away – Cursor Animation

Check out the cool delayed animation of the balloons following the cursor as it moves around the screen.

 

Coke – Cursor Animation

Check out the coke bottle following the cursor around the screen as the main application continues to load.

 

So lets do it in Silverlight the old way prior to Behaviors

First step is to create a “Shape” – this is what follows the cursor around the screen. This can be anything even another usercontrol.

The second step is to setup the “Canvas” – this is the area across which the cursor moves across. We will wire up the mousemove event on the canvas and trap the mouse movement coordinates and use them to move the shape around the screen. I’ll discuss this in more detail later after we cover the storyboard.

 

 

Third step is to create a “Storyboard” – this is what dictates the motion of the shape as it moves around the canvas.

 

 

The storyboard above basically updates the “TranslateTransform” (X, Y) over a period of 1 second.

The “KeySpline” dictates how the animation actually behaves I’ve molded the easing so that the shape moves slow to begin with then speeds up then slows towards the end. The result is that the shape moves in a similar motion to that of the videos.

So the glue that binds this all together is code. Basically we wire up the “mousemove” event of the screen and pass the latest co-ordinates of the mouse to the storyboard. When we run the storyboard it moves the shape towards the cursor.

 

Basically the above event is triggered whenever the cursor is moved around the “canvas” layer.

In the event we get an instance of the storyboard “sbMoveCircle”, once we have it we update the X,Y  co-ordinates from the current position of the mouse.

Here is the demo as a Silverlight 2 version , I’ve left it plane as I’ll be jazzing it up in a future blog post.

[ demo starts here ]

[ demo ends here ] 

 

 

Now lets do it in Silverlight 3 the new way using Behaviors

So let’s get our hand’s dirty with my new best friend “behaviors” …

What we know from above is that the behavior we create needs the following pieces

1. A shape that follows the cursor

2. A storyboard to animate the shape’s movement

3. The canvases “mousemove” event that triggers the entire interaction

 

Let’s start building …..

 

 

Step 1: Create the basic template of our behavior. I chose a “TriggerAction” for my behavior because i want to perform an “action” that is initiated from a “Trigger”. I also called it “TrailingCursor” because when this behavior is applied to a <FrameworkElement> it trail’s the cursor :)

 

Step 2: Allow our behavior to accept a storyboard, we do this by adding a dependency property “Storyboard Name” to our behavior. [in the image immediately following I’ve minimized the region. If you want to see what the dependency code looks like just click on the picture]

 

Step 3: Allow our behavior to now accept a shape, again we do this with a dependency property “Shape Name”. [as mentioned above I’m only showing the closed region but if you want to see the actual dependency code then click on the picture ]

 

Step 4: Allow our behavior to listen to the “MouseMove” event of the supplied frameworkElement, as chosen by the designer. [again I have minimized the region, click image to see the actual code]. What you will notice if you look at the detailed code is that it resembles the mousemove logic from the previous section “Layout_MouseMove”. All we are doing is when the event fires pass the cursor’s point position to the storyboard and have the storyboard run so as to push the shape towards the cursor.

Don’t get too bogged down in the details of the code, just know that we now have a behavior that takes as input a storyboard, shape and listens to a trigger event. When it hears that trigger event it will perform some action.

So now let’s bring the designer in and see how he/she uses this newly defined behavior…

 

Step 5: A designer creates a blank canvas that will contain the entire interaction.

 

Step 6: The designer now adds the shape that will trail the cursor. In this example we are just going to use an ellipse shape.

 

Step 7: The designer creates a storyboard that will dictate how the cursor moves during the interaction. Basically the designer just creates a storyboard and creates a simple 1 second animation with the shape from step 6 above. He/she can add special keysplines or easing as he/she sees fit.

 

 

It should be pointed out that the Designer has full control of how this animation is defined, the behavior does not dictate anything it only coordinates and facilitates. The power is in the hands of the designer :)

You can see from the image above I am using the new Blend 3 /Silverlight 3 “easing functions”. Rather than using the KeySpline I am now selecting from a list of predefined eases, makes life so much simpler. And again this is all in the control of the Designer, no the behavior or the developer!!!!

 

Step 8: This is where all the magic happens. The designer finds the behavior and drags it onto the canvas. Then he/she wires up the properties, setting the storyboard and shape on the behavior, ITS HONESTLY THAT SIMPLE!

Choose the behavior and drag it onto the white area to associate it to the “LayoutRoot”

 

Now wire up the storyboard and Shape to the behavior, make sure the trigger is the “MouseMove” and …….  MAGIC , ALL DONE !!!!!!!!!!

 

Seeing as Silverlight 3 doesn’t have a public go live license I can’t upload a working version of the demo, you’ll have to take my word for it that it all works. I will however do a quick clip of it working, and you’ll notice that I've created 4 shapes that follow the cursor. That’s the power of behaviors, once the logic is defined you can use it as many times as you want, assuming you’ve designed it correctly :)

 

note: I’ve intentionally kept the shapes simple as in my next couple of post’s I’ll be reusing this behavior and go wild with the design.

 

Conclusion

Behaviors are powerful and they do get very difficult very quickly. Hands on practice is needed to master this technology, no amount of reading blog posts or watching videos will give you that comfort level. So hit Blend 3 and Visual Studio as soon as you can, the feature sets keep growing and your dangerously at risk of being left behind!

I should also mention that right now, within the early adopters of SL3 and Blend 3 community, there are a lot of heated debates regarding what should and what shouldn’t be turned into behaviors and how far you should go with them. All I suggest is that you be aware of the debates BUT spend your time turning what you can into behaviors, practice is what you need right now. You may find out that after you’ve turned something into a behavior that it wasn’t worth the pain BUT at least you came to that conclusion thru trial and error :)

Also with these demo’s I’ll slowly work my way up in complexity, I know that this one may have been too easy for a lot of you readers and I apologize for that.

If you didn’t catch my first behavior demo it was done a couple of days ago, “5 minute behavior” ,  it was the easiest type of behavior that you’ll ever encounter. If you haven’t read it yet I suggest you click that link and go read it now.

Today’s demo was a bit more complex because it needed some design time input’s, this is probably the most common type of behavior that you will encounter on a daily basis.

Stay tuned for my next one, It’s gonna make you go woooah!!!