[Convert] Expression blend instance Chinese tutorial (8)-animation design Quick Start storyboard

In the previous article, we introduced the basic knowledge of Silverlight animation design. Silverlight animation is based on time series. The implementation of animation is actually the modification process of object attributes. There are two types of Silverlight animation classification,From/to/by AnimationAndKey Frame Animation. For Silverlight animation design, storyboard is a very important function. storyboard can not only manage animations, but also control animation details, such as controlling playing and pausing animations, stop and jump to the animation position. To simplify the design process for developers and designers, blend provides specialized tools to design and manage storyboard, with this tool, designers and developers can easily complete a Silverlight animation design without even writing a sentence of code. This article describes how to use storyboard to design animations in blend.

 

We know from the above that there are two types of Silverlight Animation,From/to/by AnimationAndKey Frame Animation. Note that blend uses storyboard to design animations only to design and manage key frame animations. The following uses a simple example to describe how to use storyboard in blend.

 

Description Example: we want to implement a simple image control movement process. After the Silverlight page is run, the control will move according to the specified trajectory.

 

Create a demo project, storyboarddemo.

 

After the project is created, there is a tab on the left of the blend design window. The "objects and timeline" object and timeline can be seen literally as an option for designing animations,

 

Select "objects and timeline". In the design window, you can see that the newly created usercontrol has only one layoutroot layout control.

Now, we add a new image control, select the newly added image control, and specify the image source from the properties attribute bar on the right.

 

 

 

After the image control is created, the new control is added under layoutroot in objects and timeline.

 

We can see from the above that the current control "No storyboard open", that is, there is no animation effect, we start to create a new storyboard,

 

 

Select "new" to create a storyboard named "myfirststoryboard"

 

Click "OK". The objects and timeline edit box loads the created storyboard. The animation control button, key frame setting button, and timeline Display Panel appear on the right.

In the design main window, a red box is displayed, which indicates that the control is in the animation recording status.

In the upper-left corner of the red box, a message is displayed, "myfirststoryboard timeline recording is on". Click the red button to switch the animation recording switch "On/Off". On

 

 

After completing the preceding steps, the simplest storyboard definition is completed. Next, we will create an image control animation.

Select the image control in objects and timeline. On the Timeline panel, each object corresponds to a shadow line. After the image control is selected, the following operations are only valid for the image control.

 

When the yellow process line is 0:00:00, click Add a keyframe,

Then move the yellow process line to the "" location,

 

Return to the main design page. The current image control status is selected. Drag the image control directly to any position to be moved. A moving track appears on the design page.

 

After creating a moving track, return to the objects and timeline design panel and you will find that the new key frame has been created, a light gray connection line appears from 0:00:00.

 

At this point, a simple animation has been created. Click the play button to see the animation effect. The image control moves according to the set trajectory.

Then, we can quickly add several more key frames according to the above steps, so that the image control can move according to different tracks.

 

 

A simple animation effect is complete. In objects and timeline, select myfirststoryboard and check the Properties column on the right,

 

 

In the attribute column, there is "common properties", a general attribute, whereAutoreverseIs automatically run in reverse order.RepeatbehaviorIndicates the number of times the animation is played repeatedly.

When you selectAutoreverseAfter running the animation, the image control is automatically moved in reverse order until the start point. And setRepeatbehaviorThe number of times the animation is played.

 

The storyboard animation Quick Start is now introduced here. The next article will introduce the powerful functions of storyboard using the new instance.

 

Welcome to join the QQ group focusing on Silverlight technology: super group 37891947,22308706, 100844510 to discuss and learn Silverlight technology together.

 

Source code download

 

From: http://www.cnblogs.com/jv9/archive/2010/03/30/1700187.html

[Convert] Expression blend instance Chinese tutorial (8)-animation design Quick Start storyboard