Expression Blend Example Chinese tutorial (7)

Learning from the previous article, has a preliminary understanding of the blend development interface, as well as controls. This article will describe a core function of blend, animation design. You may notice that from the beginning to the present, all the articles are the QuickStart, because these articles, are the experience I have learned and work in the experience summed up. In my own opinion, mastering these core functions is tantamount to mastering the blend development method. This knowledge should be sufficient to use blend development tools in future development projects. Of course, special projects also need special treatment, if you are in the project development, there are new blend development experience, I hope you can not stingy to share, here, I express my deep gratitude.

For the animation design of Silverlight. Before I tell you about blend design Silverlight animations, I want to introduce some basics of animation design.

Before you learn Silverlight animations, you first need to be clear about the three core concepts:

1. Silverlight animations are based on timelines; developers can set initial state, end state, and animation time periods, and Silverlight automatically calculates animation effects.

2. Silverlight animation is an object property modification process, for example, a button animation, the user clicks, the button will automatically increase, the animation principle, that is, the width and height of the button in a certain period of time to change, that is, to generate animation effects.

3. Silverlight animations, different types of data need to use different animation classes, which is similar to the type matching in programming, if you want to implement changes in the animation control width or height, you need to use the DoubleAnimation class. Animation to implement the control background color, you need to use the ColorAnimation class

Under the three core concepts above, we will enumerate some basic concepts to explain them,

First of all, to understand the Silverlight animation type, in the animation design of Silverlight, animation types are divided into two categories: From/to/by animation and keyframe animation. There are also professional developers who call these two types linear interpolation animations (Linear interpolation) and key frame animations (Key-frame Animation).

1. From/to/by animation, also known as linear interpolation animation (Linear interpolation), is the simplest animation of the Silverlight type. The developer only needs to set the animation start value (from), the animation termination value (to), and the animation relative value (by) for the Silverlight animation effect. Literally, you can understand that from,to and By,from are the starting positions in the timeline where the animation is set, to is to set the end of the animation in the timeline, and by and to similar, but more flexible than to, set by, do not care about the specific properties of the numeric changes, and do not care about the actual animation experience. The animation type is just three types of animation data type classes, respectively: Doubleanimation,coloranimation and PointAnimation. These three data type classes are used for double data types, color data types, and point data types, respectively. Among them, the DoubleAnimation class is the most commonly used one. For example, modifying the height and width of an object is a good example. We often see in the project code:

1 <doubleanimation from= "to=" duration= "0:0:5" ></DoubleAnimation>

This is an animation that specifies that the property value of an object changes from 20 to 100 within 5 seconds, and is also the simplest animation statement. Here we ignore the target object properties, and the following text will have the detailed code, here is only demo.

2. Key-Frame animations (Key-frame Animation) are more flexible and powerful than linear interpolation animations (Linear interpolation). In a keyframe animation, you do not have to specify a specific start and end point, and only need to set keyframes and related animation control methods, Silverlight automatically generates animation effects. This type of animation has two important concepts, key frames and animation control methods.

KeyFrames can be understood as object property values, each setting a keyframe, which is modifying the object property value once.

Animation control method, also can be understood as animation transition effect, refers to the transition from a keyframe to the next key frame animation effect. The default Microsoft offers three kinds of animation control methods: Linear (Linear), discrete (discrete) and spline (Spline). In order to enable readers to quickly get started with the concept of animation, here I temporarily do not detail the above three kinds of animation control methods, will be used in the following text to describe the individual space.

Key frame animation, there are related animation data type class, respectively, is DoubleAnimationUsingKeyFrames, coloranimationusingkeyframes,pointanimationusingkeyframes and Objectanimationusingkeyframes. The first three data type class usages are the same as doubleanimation,coloranimation and PointAnimation, while Objectanimationusingkeyframes is a data type class that is specific to keyframe animation. You can override any data type, for example, if you want to implement the visibility animation effect of a control, we need to control the control's visibility property, which does not belong to double, color, or point any type, and you can use the Objectanimationusingkeyframes. In the following text, there will be examples to illustrate.

After understanding the Silverlight animation type, another important underlying concept is storyboard.

Storyboard is a class that manages timelines that developers can use to manage and control multiple animation processes. For example, controlling the animation's playback, pausing, stopping, or changing the animation position, and so on, also allows you to specify control and control properties for animations through storyboard. In Blend, Microsoft has built a storyboard timeline editor that designers and developers can use to easily design animation effects from the view. This series focuses on the application of blend, so the following article will introduce the design method of storyboard in blend in detail.