Silverlight & blend Animation Design Series

The user interface components, image elements, and multimedia functions make our interfaces lively. In addition, Silverlight also has the animation function, which can make the applications "dynamic ". In fact, the word "Animation" in English means to bring life to something. You can add an animation effect to the interface to give you an impressive visual display, so that you can focus on what we want them to focus on.

 

Animation is mainly completed by timer. In Silverlight, Animation programs are usually developed using Microsoft's design tool Microsoft Expression blend. Silverlight provides an excellent animation system, we can use Microsoft Expression blend to quickly design and create animation elements, and then use Visual Studio as the encoding environment to manage the animation timer and refresh the user interface. When Microsoft Expression blend is used, you can drag and drop to define an animation in the timeline. This makes it easy to quickly define the animation in charge, microsoft Expression blend automatically generates the corresponding XAML code.

 

 

Silverlight & blend animation design articles: 

 

 Silverlight & blend Animation Design Series 1: Offset animation (translatetransform)

The user interface components, image elements, and multimedia functions make our interfaces lively. In addition, Silverlight also has the animation function, which can make the applications "dynamic ". In fact, the word "Animation" in English means to bring life to something. You can add an animation effect to the interface to give you an impressive visual display, so that you can focus on what we want them to focus on.

 

 

Silverlight & blend Animation Design Series 2: rotatetransform)

Silverlight basic animations include offset, rotation, scaling, tilt, and flip animations, which are undoubtedly the most used animation effects in Silverlight, and are also very simple to use. I believe that most of my friends who have read the previous article "translatetransform" are interested in Silverlight & blend animation design, this article will continue to introduce the basic animation rotatetransform in Silverlight ).

 

 

Silverlight & blend Animation Design Series 3: scaletransform)

In the Silverlight animation framework, the scaletransform class allows scaling within the coordinates of two-dimensional space. Through scaletransform, You can scale and stretch objects horizontally or vertically, to achieve a simple scaling animation effect, I call it a scaling animation (scaletransform ). Scaletransform requires special attention to two points: the central point coordinate and the zooming ratio in the X and Y axes directions. The smaller the proportional value, the smaller the object element (both shrinking ), the larger the proportion value, the larger the object element (which is displayed as a magnification ).

 

 

 Silverlight & blend Animation Design Series 4: skewtransform)

Skewtransform in Silverlight allows you to perform horizontal and vertical tilt changes on Object elements. In our real life, the effects of tilt and change are very common, such as the paper effects of book turning. when the door is closed, the Shadows mapped to the wall are also constantly skewed. It is very easy to implement an animated Effect of skewed changes in Silverlight. If you use a powerful design tool such as blend, it will be even more icing on the cake.

 

 

Silverlight & blend Animation Design Series 5: storyboards and animations)

As you can see, blend is a very powerful time-saving design tool. Under blend, you can design a lot of satisfactory animated files. Maybe how does it implement it, we do not know how to implement it. This article will continue with the previous basic animations. It will introduce in detail the attributes of storyborards and the detailed knowledge points of different types of animations in Silverlight, reveal the story of designing an animation under blend.

 

 

Silverlight & blend Animation Design Series 6: animation techniques (animation techniques) object and path conversion, Wave Effect

When we design Silverlight & blend animations, we may need to design a lot of graphic images with different effects as the basic element of the animation. However, there may be many problems in the design process. For example, an elliptic is drawn, but in the animation, only half or less of the elliptic is required for use as an animation element, at this time, we need to process the elliptical object to meet our needs. What should we do to achieve the final effect we want? This article will introduce the animation design and implementation of object and path conversion and Wave Effect in blend.

 

 

Silverlight & blend Animation Design Series 7: blureffect and dropshadoweffect)

Blureffect and dropshadoweffect are two very practical and common effects. For example, you can add a blur effect to a thumbnail of a photo in a development album, in the process of enlarging a photo, the size and blur transparency of the photo are dynamically changed to achieve a magnified and transparent effect. This article describes how to design the implementation of fuzzy effects (blureffect) and shadoweffect for objects in blend.

 

 

Silverlight & blend Animation Design Series 8: dragbehavior) 

Silverlight does not provide implementation of the drag-and-drop function. To implement the drag-and-drop function, you must use its event support (mouseleftbuttondown, mouseleftbuttonup, and mousemove) to complete the drag-and-drop function, in practical applications, we can encapsulate drag-and-drop operations as behaviors through the behavior feature to achieve code reuse. In blend, the drag and drop operation is directly provided, which is located in the Microsoft. expression. Interactions. dll Microsoft. expression. interactivity. layout namespace.

 

 

Silverlight & blend Animation Design Series 9: Animation and visual State Manager)

Animations in Silverlight are commonly used in combination with visual state manager. animations are used to manage the animation actions that an object performs in a certain event segment, view state management is used to control the switching and navigation of objects between multiple different visual states. This article mainly introduces the combination of animation and visual state manager. For details about view State management, see relevant materials.

 

 

Silverlight & blend animation design series X: coordinate system and vector motion in Silverlight

The coordinate system in Silverlight is the same as the coordinate system in flash. Cartesian coordinate systems are used and divided into four quadrants. Simply put, the X axis indicates the horizontal direction and infinite extension to the East. the Y axis indicates the vertical direction and infinite extension to the south. The intersection of X and Y axis indicates the coordinate system source point, and its X, the Y coordinate value is 0, 0, so the coordinate system range in Silverlight is to start from the coordinate source point, infinitely extending to the southeast, that is, the four quadrant in the Cartesian coordinate system.

 

 

Silverlight & blend Animation Design Series 12: trigonometry (free-form rotation)

When it comes to object rotation, it may be associated with the concept of object angle. The rotation of an object is actually the position transformation realized by the angle change of the object. In the Silverlight & blend Animation Design Series 2: rotatetransform) this article describes how to implement different angle transformations of objects. The free-form rotation introduced in this article will introduce the example project in function Silverlight 3 animation, for details, please read this article.

 

 

For more blog posts to be written, stay tuned ......