Foundation Silverlight 3 Animation- P4 doc

If you are using Blend, each time a keyframe is created on the timeline, a corresponding entry is made into an animation container.Like the @kq^ha=jei]pekj type, @kq^ha=jei]pekjQoejcGauB

Keyframe animations are containers that hold keyframe definitions If you are using Blend, each time a keyframe is created on the timeline, a corresponding entry is made into an animation container.

Like the @kq^ha=jei]pekj type, @kq^ha=jei]pekjQoejcGauBn]iao animations also define P]ncapJ]iaandP]ncapLnklanpu values However, the length of the animation is determined by the keyframes within the animation, not by a duration value

>acejPeia is specified to tell Silverlight when the animation should start In this example, >acejPeia

is,,6,,6,,, so it will start with no delay when called

Within the @kq^ha=jei]pekjQoejcGauBn]iao container is an A]oejc@kq^haGauBn]iaGauPeia tion that defines a keyframe at 5 seconds and specifies that the value of the X Translate transform should be -1,

defini-Color

Color animations are animations that change colors over time Instead of manipulating values of type

`kq^ha, color animations change the hex values that define a color Like animations that use `kq^ha,color animations also come in two varieties: ?khkn=jei]pekj and ?khkn=jei]pekjQoejcGauBn]iao

With color values in Silverlight, hex values are preceded by a value representing the alpha ency of the color being defined For example, #FFFF0000 is 100% opaque red, while #7FFF0000 is 50% red If the alpha transparency value is left off of a hex color, Silverlight will assume the color to be 100% opaque

transpar-The ColorFromTo project for Chapter 3 contains an example ?khkn=jei]pekj Open the project and press F5 to run it When you move the mouse over the red ellipse, it will begin to turn dark blue

If the mouse leaves the ellipse, it will turn back to red Each of the two color animations happens over 5 seconds, and as with the @kq^ha=jei]pekj example, the Bnki attribute is omitted from the

?khkn=jei]pekj to give a smooth animation effect

When working with color animations in Blend, the default type of animation that will be created is

?khkn=jei]pekjQoejcGauBn]iao Like @kq^ha=jei]pekjQoejcGauBn]iao, this type of animation will create a container within your storyboard that contains entries for each keyframe you create

In the following code listing, a keyframe has been created at 5 seconds and contains a pure blue value

of #FF0000FF When the animation runs, the A]oejc?khknGauBn]ia specifies that the ellipse’s color is

to change from the current color to the blue defined by the keyframe in 5 seconds

an object Even simple objects can become complex when viewed in the context of point animations

Open the PointFromTo project for Chapter 3 This project contains a simple path that is in the shape

of an ellipse, the XAML for which is shown following:

to its original position, as shown in Figure 3-3

Figure 3-2 The bottom point of the circle Figure 3-3 The bottom point of the circle

drops when the mouse pointer enters the circle returns to its starting position when the mouse

pointer leaves the circle

Lkejp=jei]pekj definitions are a little more complex than the @kq^ha=jei]pekj and ?khkn=jei]pekjexamples shown The following code shows the storyboards and animations:

Inside of the L]pdBecqna container, we can see four segments, numbered from 0 to 3 The next tion of the P]ncapLnklanpu tells Silverlight to which segment the animation will apply:

por-$L]pdBecqna*Oaciajpo%W-Y

Figure 3-4 The BezierSegments that make up the Sphere object

This information directs Silverlight to the second segment in the list (the first segment is W,Y), which

This is the x,y coordinate where the point will end up With both @kq^ha=jei]pekj and ?khkn=jei]pekj,

it is relatively simple to make changes to an object using just a single animation This is not the case withLkejp=jei]pekj, because each point affects its adjoining spline segment As a result, more ani-mations are necessary

When creating Lkejp=jei]pekjs that return points to their original position, it is important to pay attention to the values being used Unlike a @kq^ha=jei]pekj that undoes a translation by returning

it to 0, the values used for Lkejp=jei]pekjs need to come from the XAML markup, because they represent the x,y location of the point being manipulated

This becomes especially difficult when the XAML for an object is written in the traditional path language notation For example, the preceding elliptical path typically appears in XAML as follows:

anima-Blend generates the Lkejp=jei]pekjQoejcGauBn]iao animation type when the points of an object are manipulated over time As points are moved, keyframes are added to the timeline

The PointUsingKeyframes project from Chapter 3 contains a red path similar to the one in the last

project, as well as a storyboard that will move the bottom point of the ellipse down As demonstrated

in the previous Lkejp=jei]pekj example, three animations are necessary to move a single point down

In Blend, use the Open a storyboard icon on the Objects and Timeline panel to open the IkraLkejp@ksjstoryboard Click Play to see the bottom of the path deform downward The IkraLkejp@ksj story-board is shown in the following listing for reference:

Once you have spent a little time working with paths and Lkejp=jei]pekjs, the code will become a little easier to read It is best to spend some time with a few simple objects in order to get a feel for how the code changes in relation to changes you make to an object As you can imagine, point anima-tions can get complex very quickly.

A note about from/to

The from/to animation types with which you have been working have an additional attribute called

>u that you can use in lieu of a Pk value The DoubleByAnimation project contains a storyboard that

moves an ellipse using a @kq^ha=jei]pekj that is declared as a from/by

When using the >u property, leave the Pk property off The animation will alter the P]ncapLnklanpu of

an object by the specified amount In this example, the ellipse’s X transform property is moved from

a value of 0 by 150 pixels over 1 second One use for this type of animation may be specifying a range

of motion for an object

Open the project, and press F5 to see the animation in a browser The storyboard that moves the ellipse is shown following:

Linear

Linear keyframes do what you might expect from their name—provide a way to move in a linear ion from one keyframe to the next

fash-Open the LinearKeyframe project for Chapter 3 This project contains an example of a rectangle that

uses linear keyframes to move in a diamond pattern Press the F5 key to compile and run the tion

applica-The storyboard is shown in the following listing Even though the rectangle moves to four positions,

if you look through the code listing, you can count eight This is because there are two sets of tions: one handles the X transform, and the other the Y Each one is four keyframes, for a total of eight

While working in Blend, what you will typically see is easing keyframes added to your animations, even

if the animations define linear movement for your objects This is because easing keyframes are the default type of animation Easing keyframes allow you to utilize one of the 11 built-in easing func-tions to create interesting or organic movements to your objects If no easing function is selected, the motion between keyframes is equivalent to that provided by linear keyframes

Open the EasingKeyframe project for Chapter 3 If you press F5 to run the project, you will find that

it contains the same rectangle and animation as the linear keyframe example did In this project, ever, the animations are defined using A]oejc@kq^haGauBn]iao, as shown following:

As it stands, the motion and timing of the storyboard are

iden-tical to the one that used linear keyframes The distinction

comes when you select keyframes in the timeline in Blend and

add an easing function to an object In all likelihood, you’re

going to want to spend some time experimenting with all of

the nuances of the different types of easing functions available

to you, but let’s take a look at how to add easing functions and

the effect doing so has on the XAML

1. With the EasingKeyframe project open, click the Open

a Storyboard drop-down, and select the Storyboard1

item in the list

2. The storyboard will open, displaying the keyframes

within the animation on the timeline Ctrl-click each of

the four keyframes to select them With the keyframes

selected, the Properties panel should change to show

theEasing pane

3. Notice that the functions are arranged in three columns:

In,Out, and InOut (both) This allows you to affect the

motion of an object as it approaches a keyframe (In),

leaves a keyframe (Out), or as it approaches and leaves

a keyframe (InOut) Select the Elastic easing function, in

theInOut column, as shown in Figure 3-5

4. In the XAML, Blend has modified the keyframes and

inserted the A]oejcBqj_pekj, as shown following

Notice how they differ from the listing shown earlier in

Spend some time experimenting with the different types of easing functions available; you can create

a lot of interesting movements with the functions Don’t get locked into creating the type of ment shown here either For example, you can apply the easing functions to the 3D perspective trans-forms I’ll describe later in the book as well

move-Figure 3-5 The EasingFunction pane

in Blend

Spline keyframes act similarly to easing keyframes but differ in that they allow you to create the motion curve yourself Spline keyframes contain a property called GauOlheja that defines the easing motion

Open and run the SplineKeyframe project for Chapter 3, you will see that it contains the same

rect-angle and animation as the easing keyframe example

1. To convert the easing keyframes to spline keyframes, begin by clicking the Open a Storyboard

button and selecting the Storyboard1 item from the drop-down

2. Ctrl-click each of the four keyframes on the timeline

3. Select the KeySpline tab on the Easing pane of the Properties panel, as shown in Figure 3-6 Blend will convert the easing keyframes to spline keyframes

4. The yellow handles on the KeySpline shown on the Easing pane can be manipulated with the mouse, or you can type in values As you are working, Blend will add the GauOlheja property

to the XAML code for your keyframes

Earlier, you saw that without an easing function applied, easing keyframes act like linear keyframes Similarly, without the GauOlheja property, spline keyframes also act just like linear keyframes The GauOlheja property affects the way an object moves as it approaches or leaves a keyframe and can

be added to a spline keyframe by directly editing the XAML or by modifying the keyframe via Blend’s interface, as you saw in the previous exercise

Figure 3-6 The

Key-Spline pane in Blend

You can test it out—in the example project, edit the XAML, and modify the first Olheja@kq^haGauBn]ia

to include a GauOlheja property:

8Olheja@kq^haGauBn]iaGauOlheja9-(,,(-GauPeia9,,6,,6,,*1,,,,,,

R]hqa9.,,+:

Play the animation, and notice the change in motion Spline animations are used to add what is known

as ease to an object’s motion I’ll talk more about ease in the next section of this chapter.

Discrete

Discrete keyframes create a type of motion that holds an object in place until a keyframe is reached,

at which time the object is moved to the value of the new keyframe This type of motion is useful when creating frame-by-frame animations

The DiscreteKeyframe project contains the same storyboard as the linear, easing, and spline projects,

only this time, the storyboard is written with discrete keyframes, as shown in the next code listing

Once again, you will see that none of the values changed, only the type of keyframe being used PressF5 to compile and run the project, and notice how the rectangle holds its position until a keyframe is reached, at which time it jumps to the value specified in the next keyframe

8Opknu^k]n`t6J]ia9Opknu^k]n`-:

8@kq^ha=jei]pekjQoejcGauBn]iaoOpknu^k]n`*P]ncapJ]ia9Na_p]jcha

Figure 3-7 Select Hold In to convert

keyframes to discrete types

Even though each of the example projects shown here illustrates the use of a specific type of frame, you can freely mix and match them in your storyboards to achieve different effects When working with GauOlheja curves for spline keyframes, motion control can be a little tricky to accom-plish by hand-coding XAML; this is where a tool such as Blend comes in very handy

key-From this look at storyboards, animations, keyframes, and keyframe interpolation, you should have

a pretty good idea of the types of tools available to you when making objects move using XAML in Silverlight You should also be able to see that a tool like Blend does a lot of behind-the-scenes work for you to make the job of animating objects easier With a solid grip on how storyboards work, it’s time to take a look at how to go about making storyboards play when you want them to The next section takes a look at events and how they are captured in order to give you control over when the storyboards you have created will play

To this point, we have worked with animations fairly extensively but always within the confines of Blend We haven’t yet done anything to get our animations running in the browser, where Silverlight applications are usually presented Events are used to add interactivity to applications, whether from user input or based on some condition within the application itself In this section, we’re going to take

a look at what events are and how they can be wired up

1. Open the Truck project from Chapter 3 This project contains the truck scene from Chapter 2,

as well as a storyboard that will scale the truck down to make it appear to be moving away

2. Use the Open a storyboard icon, and select the ScaleTruck item from the storyboard list

3. Play the timeline to preview the animation

4. Now press F5 to test the project A browser window will open—and nothing happens This is because there is nothing telling Silverlight to play the timeline in the application

The way to go about telling Silverlight what to do with various storyboards is through events Eventsconsist of three parts: an event listener, an event, and an event handler The event listener, as you

may have guessed, tells Silverlight to listen for a particular event, such as IkqoaAjpan, IkqoaHa]ra,

IkqoaHabp>qppkjQl, or Hk]`a`

When the specified event occurs, the event listener tells Silverlight which event handler to use The event handler is a set of instructions that tells Silverlight what to do Events can be caused by users,

as is the case with a mouse click, or they can occur from within the application, such as when a

story-board has ended When an event occurs, it is said to be raised.

There are two ways to create events for objects in Silverlight One is by adding them directly in the XAML, and the other is by creating them entirely in the code-behind file When created using XAML,

a typical event hookup looks like this:

8Na_p]jchaDaecdp9-,,Se`pd9-,,Behh9BBBB,,,,

t6J]ia9IuNa_pIkqoaAjpan9IuNa_p[IkqoaAjpan+:

This code creates a small red square named IuNa_p An event listener is added to listen for the IkqoaAjpan event If the pointer is placed over this object, the IkqoaAjpan event will be raised, and the event handler—in this case, a set of instructions (or function) called IuNa_p[IkqoaAjpan—will be executed

Remember earlier when you were told that, as a designer, a time would come when you’d have to roll

up your sleeves and get your hands dirty? Start rolling

The following sections describe adding events first from a designer’s perspective and then from a developer’s perspective If you are a designer, there isn’t really a way around having to add some code

to create interactivity, so after reading through your section, take the time to go through the oper section and see that it’s not difficult or scary to do You will probably find that it is faster, easier, and far more flexible

devel-Getting back to the Truck project, we want to find an event that will cause the storyboard we

cre-ated to play when the application is opened in a browser The appropriate event in this case is called Hk]`a`, and will be attached to our main Canvas object, called H]ukqpNkkp When the Canvas loads, a trigger will be used to play our storyboard

For designers

1. With the Truck project open, press F11 until you are in XAML view Scroll to the top of the XAML window, and beginning around line 6, you will see a section that contains the storyboard resources that have been created for this project It looks like this:

2. OpenPneccano@k_qiajp*ptp, and then cut the storyboard from your Blend project, and paste

it into the Pneccano@k_qiajp*ptp code, where it says 8))EjoanpOpknu^k]n`dana)): You will have something that looks like the following code listing:

4. Paste the entire contents from the text file just after the opening tag for the H]ukqpNkkpCanvas in Blend Don’t panic if Blend reports that the XAML is invalid—the trigger section should still compile and run correctly.

5. Press F5 to run the project again, and when the browser opens, you should see the truck tailing it away

high-That was a lot of cutting, copying, and pasting of code What just happened?

By default, storyboards are available to an application as a global resource Rather than have the storyboard available this way, we placed it inside of a trigger, which is a XAML method for attaching

an event The Nkqpa`Arajp9?]jr]o*Hk]`a` tag in the XAML sets up an event handler that waits for the Canvas to be loaded, which occurs when an application runs When the Hk]`a` event is raised for the Canvas, the 8ArajpPneccan*=_pekjo: actions are performed—in this case, the actions list our storyboard animations

There’s a significant limitation to using triggers—at this time, Hk]`a` is the only trigger available directly within XAML This means that, at the moment, if you are hoping for anything more than basic animations that run when an application loads, it will be necessary to wire them up in the code-behind file

If you are now questioning your ability to use Silverlight because it requires some programming, don’t fret—hooking up events in the code-behind is more automated (and therefore less tedious) than the process you just worked through The tight integration between Blend and Visual Studio makes wir-ing events easier than you may have thought, so work through the next section to get a feel for how events are added in C#

For developers

1. Start in Blend with the freshly opened Truck project

2. Select the Project tab to the left of the Properties tab, and expand the I]ejL]ca*t]ih item so you can see the I]ejL]ca*t]ih*_o code-behind file