Silverlight & Blend Animation Design series Six: Animation Techniques (Animation Techniques) object and path conversion, wave sense effects

When we are animating the Silverlight & blend process, we may need to design a number of graphic images that are not as effective as the basic elements of the animation. However, there may be many problems in the design process, such as the current drawing of an ellipse, but in the animation only half or more of the ellipse is used as an animation element, this time we need to deal with the Ellipse object to meet our needs, So what exactly does it take to achieve the final desired effect? This article describes some of the common feature points and animation design techniques for animating in Microsoft Expression Blend.

One, the transformation object is the path

It is very useful to convert an object element into a path, which can be arbitrarily pulled by the path selection tool to achieve the desired design effect. You can convert an object to a path by using the object---------------and path-to-path from the blend menu, or you can use the method shown to convert an object to a path:

　　　　　　　　

As an example of the above truncated ellipse, you need to convert the circle (Ellipse) to a path before you can drag and deform the path through the path tool, ultimately to achieve the desired graphic effect. As shown in the deformation process of the ellipse, the extra parts are cut off to achieve the final graphic effect:

<ellipse height= "174" width= "Up" canvas.left= "Up" canvas.top= "274" fill= "#FF87A50F"/>

At the XAML encoding level, you will convert from the Ellipse object to the path object, such as the final graphics effect, where the XAML encoding for path corresponds to:

<path fill= "#FF87A50F" stretch= "Fill" height= "174" width= "Up" canvas.left= "Up" canvas.top= "274" data= "m240,87 C240 , 135.04877 186.27417,174 120,174 c53.72583,174 0,135.04877 0,87 c0,38.951225 53.72583,0 120,0 C186.27417,0 240,38.951225 240,87 Z "/>

Second, wave sense effect

The wave sense effect is also called a phantom effect, and if a wave-like effect is used for an object, the effect is triggered by some behavior of the object, and the object's border will appear like a wave effect until the animation executes to hide the behavior object. If understood from the point of view of technology implementation, that is, the amplification animation behavior of an object, which is realized by dynamically changing its transparency during the amplification process. If you do not know what the effect of the wave sense effect can be viewed http://eyeonearth.cloudapp.net/this site, click on the inside of the menu navigation (my location,sms,about,help) can be online experience.

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

<ellipse height= "x:name=" RedBall "width=" "canvas.left=" 355 "canvas.top=" 274 "mouseleftbuttonup=" RedBall_ MouseUp ">
<Ellipse.Fill>
<radialgradientbrush gradientorigin= "0.479999989271164,0.46000000834465" >
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<translatetransform x= " -0.07" y= " -0.21"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<gradientstop color= "#FFFFFFFF"/>
<gradientstop color= "#FFFF0000" offset= "1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>

Next to the circular object for the wave-like effect design, this article said that the wave sense effect is actually a scaling animation, the same object as the base object to zoom to a certain extent to hide it. It is necessary to copy one of the above-designed circles as an animated design object, such as:

　　　　　　　　

Zoom animation effect can be achieved through ScaleTransform, transparency is set using the Opacity property, to achieve the wave-like effect is mainly through the animation in a certain period of time to dynamically change the property values of these two, ScaleTransform x, y default is 1, Opacity default is also 1.

First create an animation container timeline, then move the timeline to 1 seconds, select the copied circular object setting ScaleTransform's X, Y, 3,opacity property value is 0 to achieve a magnified transparent animation effect. When the object is completely transparent, it is the equivalent of hiding, in fact, it can also be visibility property to collapsed, the object is hidden not rendered. Such as:

　　　　　　　　

The main thing is to set three attribute values, which are dynamically changed over the animation, and are set in blend to see that the following XAML encoding is generated:

<storyboard x:name= "redball_clicked" completed= "redball_clicked_completed" >
<doubleanimationusingkeyframes storyboard.targetname= "Redball_copy"
Storyboard.targetproperty= "(uielement.opacity)" Begintime= "00:00:00" >
<splinedoublekeyframe keytime= "00:00:01" value= "0"/>
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetname= "Redball_copy"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [0]. (Scaletransform.scalex) "
Begintime= "00:00:00" >
<splinedoublekeyframe keytime= "00:00:01" value= "3"/>
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes storyboard.targetname= "Redball_copy"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [0]. (Scaletransform.scaley) "
Begintime= "00:00:00" >
<splinedoublekeyframe keytime= "00:00:01" value= "3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

By looking at the previous code snippet, you can see that event handling is added to the circular object:mouseleftbuttonup= "Redball_mouseup", which is the execution of the animation that needs to be started after the Circle object is clicked:

private void Redball_mouseup (object sender, MouseButtonEventArgs e)
{
redball_copy.visibility = visibility.visible;
Redball_clicked.begin ();
}

　　

Also added to the animation is the completion of the event processing :completed= "redball_clicked_completed", when the animation after the completion of the operation of what to do. What needs to be done is to set the related property of the circular object to the original property value so that it can be implemented correctly when the second animation is performed.

private void Redball_clicked_completed (object sender, EventArgs e)
{
Redball_clicked.stop ();
redball_copy.opacity = 1;
redball_copy.visibility = visibility.collapsed;
}

OK, to complete the design of the whole wave sense effect, the final effect as shown, if you are interested in wave-sensitive effects, it is recommended that you download the sample code of this article to run, to further experience the wave effect.

　　　　　　　　

Silverlight & Blend Animation Design series Six: Animation Techniques (Animation Techniques) object and path conversion, wave sense effects