Silverlight & amp; Blend Animation Design Series 6: animation techniques

When we design a SilverlightBlend animation, we may need to design a lot of graphic images with different effects as the basic element of the animation. However, many problems may occur during the design process. For example, an ellipse is drawn, but in the animation, only half or less of the ellipse is required for use with the animation element.

When we design a Silverlight Blend animation, we may need to design a lot of graphic images with different effects as the basic element of the animation. However, many problems may occur during the design process. For example, an ellipse is drawn, but in the animation, only half or less of the ellipse is required for use with the animation element.

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 describes some common functional points and animation design techniques for animation design in Microsoft Expression Blend.

1. Convert the object to a path

It is very useful to convert an object element into a path. You can use the path selection tool to pull and deform the converted path object to achieve the ideal design effect. You can convert an object to a path through the object --> path --> in the Blend menu, or convert an object to a path using the following method:

　　　　　　　　

For example, if you want to take a part of an elliptical image as an example, you need to convert the circle (Ellipse) into a path before you can use the path tool to drag and deform the path to achieve the desired graphic effect. As shown in, the extra part of the elliptical deformation is cut out to achieve the final graphic effect:

　　　　　　

At the XAML encoding level, the Ellipse object will be converted to the Path object. For example, the final graphic effect Path corresponds to the following XAML encoding:

2. Special wave effects

A ripple effect is also called a phantom effect. If a ripple effect is used for an object and this effect is triggered by a certain behavior of the object, the border of the object will have the same effect as a wave, the behavior object is hidden after the animation is executed. From the technical implementation point of view, that is, the behavior of an object's zoomed-in animation is realized by dynamically changing its transparency during the zoomed-in process. If you do not know what the effect is, you can view the site http://eyeonearth.cloudapp.net/and click on any of the menu navigation bar (my location, sms, about, help) to enjoy the online experience.

For example, in the following XAML definition, a gradient filled circle is drawn on the interface:

Next, we will design the Wave Effect for this circular object. As mentioned above, the wave effect is actually a scaling animation, to hide an object that is the same as a basic object. Here we need to copy a circle designed above as an animation effect design object, such:

　　　　　　　　

The scaling animation effect can be achieved through ScaleTransform, while the transparency is set using the Opacity attribute. To realize the wave effect, the animation dynamically changes the attribute values of the two items within a certain period of time, scaleTransform's X, Y is 1 by default, and Opacity is also 1 by default.

First, create an animation container timeline and move the timeline to the position of 1 second. Select the copied circular object and set X, Y, and Opacity of ScaleTransform to 3. The attribute value of Opacity is 0, to achieve a magnified and transparent animation effect. When the object is completely transparent, it is equivalent to hiding. In fact, you can also set its Visibility attribute to Collapsed to hide the object without rendering it. For example:

　　　　　　　　

Three attribute values are set. These three attribute values are dynamically changed during an animation. After being set in Blend, the following XAML encoding is generated:

Storyboard. TargetProperty = "(UIElement. Opacity)" BeginTime = "00:00:00">


Storyboard. TargetProperty = "(UIElement. RenderTransform). (TransformGroup. Children) [0]. (ScaleTransform. ScaleX )"
BeginTime = "00:00:00">


Storyboard. TargetProperty = "(UIElement. RenderTransform). (TransformGroup. Children) [0]. (ScaleTransform. ScaleY )"
BeginTime = "00:00:00">

By viewing the previous code snippet, we can see that the circular object is added with event processing: MouseLeftButtonUp = "RedBall_MouseUp", that is, after clicking the circular object, you need to start the animation execution:

Private void RedBall_MouseUp (object sender, MouseButtonEventArgs e)
{
RedBall_Copy.Visibility = Visibility. Visible;
RedBall_Clicked.Begin ();
}

　　

Also, Completed event processing is added to the animation: Completed = "RedBall_Clicked_Completed". What operations are performed after the animation is executed. What needs to be done is to set the attributes of the circular object to the original attribute value, so that the effect can be correctly implemented during the second animation.

Private void RedBall_Clicked_Completed (object sender, EventArgs e)
{
RedBall_Clicked.Stop ();
RedBall_Copy.Opacity = 1;
RedBall_Copy.Visibility = Visibility. Collapsed;
}

OK. Now we have completed the design and production of the overall wave effect. The final running effect is shown in. If you are interested in the wave effect, we suggest you download the sample code in this article to run it, further experience special wave effects.