Silverlight & Blend Animation Design series five: storyboards (storyboards) and animations (animations)

As you can see, blend is a very powerful time-saving design tool that allows you to design a lot of satisfying animations under blend, and perhaps how he did it, and how it was done. This article will continue with a few basic animations above, detailing the details of the properties of the storyboard (storyborards) and the various types of animations (animations) in Silverlight, revealing the insider story of the animated design under blend.

First, Storyboard (StoryBoard) properties

The storyboard (StoryBoard) in Silvelight provides a functional interface for managing the timeline, which can be used to control one or more Silverlight animation processes, and I call it an animation timeline container . The following XAML code block demonstrates an offset transformation animation that manages an element named Greenball in the x-coordinate direction through storyboard.

<storyboard x:name= "Moveball" >
<doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Greenball"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (translatetransform.x) ">
<easingdoublekeyframe keytime= "00:00:02" value= "540"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

Storyboard provides six popular animation property options, namely: Autoreverse,begintime,duration,fillbehavior,repeatbehavior,speedratio. These six properties can be used to control the basic behavior of the animation action, such as to achieve the animation buffer time, you need to use the Duration property; Set the start time of the animation with BeginTime AutoReverse is required if the animation is executed backwards to the original state according to the execution path, and if the animation needs to be set to run faster then use SpeedRatio to complete. The following code block demonstrates the use of the AutoReverse property, which runs backwards after the animation is run. More details can be found in this blog post: " basics of Animation QuickStart Animation" or MSDN.

<storyboard x:name= "Moveball" autoreverse= "True" >
<doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Greenball"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (translatetransform.x) ">
<easingdoublekeyframe keytime= "00:00:02" value= "540"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

The properties of storyboard can be applied in combination, such as the above code block to animate the AutoReverse property, so that after the animation after the execution of the original run path back to scroll, you can give the animation timeline container to add a BeginTime property, Make it start the animation 5 seconds after the program loads, so that you use two properties, such as the following block of code:

<storyboard x:name= "Moveball" autoreverse= "True" begintime= "00:00:05" >
......
</Storyboard>

Ii. type of animation (Types of animation)

The animations in Silverlight are mainly divided into from/to/by and keyframe animations in two types.

From/to/by animation, also known as linear interpolation animation (Linear interpolation), is the simplest type of animation in the Silverlight genre, where you can create an animation by simply setting the start (from), End (to), and animation values (by). There are three basic from/to/by animation types available in Silverlight 3: DoubleAnimation, ColorAnimation, and PointAnimation.

Keyframe animations are more powerful than from/to/by animations, eliminating the need to specify relevant parameters such as the start, end, and animation buffer time of an animation, just focus on keyframes and how to control the animation. Four basic keyframe animations are available in Silverlight 3: mitigation (easing), linear (Linear), spline (Spline), and discrete (discreet).

The use of DoubleAnimation is very simple, just to understand the from/to/by three elements of the basic knowledge of the use of this type of animation, the following is a simple example of a circular movement implemented through DoubleAnimation.

<usercontrol x:class= "Doublebyanimation.mainpage"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"
Width= "height=" >
<UserControl.Resources>
<storyboard x:name= "Storyboard1" >
<doubleanimation storyboard.targetname= "Ellipse"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (translatetransform.x) "
from= "0"
By= "150"
duration= "00:00:01"/>
</Storyboard>
</UserControl.Resources>

<canvas x:name= "LayoutRoot" background= "White" >
<ellipse height= "$" width= "fill=" #FFFF0000 "canvas.top=" 181 "canvas.left=" "rendertransformorigin=" 0.5,0.5 "x:name=" Ellipse ">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Canvas>
</UserControl>

The following is a slightly more complex example of the use of the DoubleAnimation animation, which implements a motion animation called the x-coordinate direction of a slider object, as in the following animation code block:

<storyboard x:name= "Slideout" >
<doubleanimation storyboard.targetname= "Slider"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (translatetransform.x) "
duration= "00:00:00.50" to= "/>"
</Storyboard>
<storyboard x:name= "Slidein" >
<doubleanimation storyboard.targetname= "Slider"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (translatetransform.x) "
duration= "00:00:00.50" to= "0"/>
</Storyboard>

As the two animations defined in the animation definition code block, an implementation moves the object slider to the x-coordinate direction to the 150-pixel point position, the second animation implements a rendering and non-rendering effect by moving an object named Silder to the coordinate position of the 0-pixel point in the x direction. Here we play the potential of the brain imagine if the slider is a panel object, using the mouse to point and leave the event to use the above two animations to control it does not implement the panel mouse pointing to the display, left to return to the original position? The answer is this, see the code block in detail:

public partial class Mainpage:usercontrol
{
Public MainPage ()
{
InitializeComponent ();

Slider.mouseenter + = new MouseEventHandler (slider_mouseenter);
Slider.mouseleave + = new MouseEventHandler (slider_mouseleave);
}

private void Slider_mouseleave (object sender, MouseEventArgs e)
{
Slidein.begin ();
}

private void Slider_mouseenter (object sender, MouseEventArgs e)
{
Slideout.begin ();
}
}

　　　　　　　　

With the above example, is it very easy to think of implementing an animation in Silverlight? The above example hides the use of From/to/by's doubleanimation to implement moving animations of objects, as well as using key-frame animations (doubleusingkeyframes) to accomplish this. The following code snippet demonstrates that the element silder moves to the x-coordinate direction to a 150-pixel point.

Storyboard moveright = new Storyboard ();

DoubleAnimationUsingKeyFrames Anim = new DoubleAnimationUsingKeyFrames ();
Storyboard.settargetname (Anim, "Slider");
Anim.setvalue (Storyboard.targetpropertyproperty,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [3]. (translatetransform.x) "));
Anim.begintime = new TimeSpan (0, 0, 0);
SplineDoubleKeyFrame skeyframe = new SplineDoubleKeyFrame ();
Skeyframe.keytime = Keytime.fromtimespan (timespan.fromseconds (0.5));
Skeyframe.value = 150;
ANIM.KEYFRAMES.ADD (Skeyframe);
MOVERIGHT.CHILDREN.ADD (Anim);

ColorAnimation type animations are mainly applied to transform animation effects on colors, such as having a circle, the default fill color is red (a), and an animation is designed to change the fill color of a circle to blue with a 2-second animation.

<ellipse height= "218" width= "218" canvas.left= "294" canvas.top= "195" fill= "#FFFF0000" cursor= "Hand" X:name= " Redellipse "/>

The creation of such animations can be done through the blend designer, creating a new animation container timeline in the objects and Timeline panel, and then checking the Radellipse circular object to fill its color in red on a 0 second timeline, and fill it with a color of 2 seconds in blue, with detailed design such as:

　　　　　　　　

The final XAML code generated by blend is as follows:

<storyboard x:name= "Storyboard1" >
<coloranimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Redellipse"
Storyboard.targetproperty= "(Shape.fill). (Solidcolorbrush.color) ">
<easingcolorkeyframe keytime= "00:00:00" value= "Red"/>
<easingcolorkeyframe keytime= "00:00:02" value= "Blue"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>

It is fortunate to have a powerful design tool like blend, and for designers to implement some of the animation requirements are done directly through the interface design. For programmers to worry about, because not familiar with the design tools, to achieve some kind of animation can only be done by writing program code, this will be a very large project, for example, when the mouse points to a circle when the fill color slowly to the blue (blue) gradient, the mouse left slowly restore its default color red. To achieve this animation effect, you need to write the following lengthy program code:

Private Storyboard Turnblue = new Storyboard ();
Private Storyboard turnred = new Storyboard ();
Private ColorAnimation Bluecolor = new ColorAnimation ();
Private ColorAnimation Redcolor = new ColorAnimation ();

Public MainPage ()
{
InitializeComponent ();

Bluecolor.setvalue (Storyboard.targetnameproperty, "redellipse");
Bluecolor.setvalue (Storyboard.targetpropertyproperty, New PropertyPath ("(Shape.fill)." ( Solidcolorbrush.color));
bluecolor.to = Colors.blue;
TURNBLUE.CHILDREN.ADD (Bluecolor);
LAYOUTROOT.RESOURCES.ADD ("Turnblue", Turnblue);

Redcolor.setvalue (Storyboard.targetnameproperty, "redellipse");
Redcolor.setvalue (Storyboard.targetpropertyproperty, New PropertyPath ("(Shape.fill)." ( Solidcolorbrush.color) "))
redcolor.to = colors.red;
TURNRED.CHILDREN.ADD (Redcolor);
LAYOUTROOT.RESOURCES.ADD ("turnred", turnred);

Redellipse.mouseenter + = (senderred, ered) =
{
Turnred.begin ();
};
Redellipse.mouseleave + = (senderblue, eblue) =
{
Turnblue.begin ();
};
}

This code implementation is actually using the program code to create two animations, one from red to blue, the other from blue to red, according to the previous method directly in blend design is also possible. The final results are as follows:

　　　　　　　　

PointAnimation type animation is better understood, that is, the animation effect is controlled by different coordinate points. For example, the effect of the waves, the following is a sample of the waves to demonstrate the use of PointAnimation type animation.

Code highlighting produced by Actipro Codehighlighter (freeware) http://www.    Codehighlighter.com/--><storyboard x:name= "Storyboard1" repeatbehavior= "Forever" fillbehavior= "HoldEnd" > <pointanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Water" Storyboard.TargetProperty= "( Path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [1]. (Beziersegment.point2) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 351.732116699219,36.4064197540283 "/ > <easingpointkeyframe keytime= "00:00:03" value= "415.732116699219,84.4064178466797"/> </PointAnimati onusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Water" Storyboard.targetproperty= "(path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [1]. (BEZIERSEGMENT.POINT3) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 425.502014160156,32.8349914550781 "/ > <easingpointkeyframe keytime= "00:00:03" value= "489.502014160156,80.8349914550781 "/> </PointAnimationUsingKeyFrames> <pointanimationusingkeyframes begintime=" 00:00:00 "storyboard.targetname=" Water "storyboard.targetproperty=" (Path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [2]. (beziersegment.point1) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 499.271911621094,29.2635669708252 "/ > <easingpointkeyframe keytime= "00:00:03" value= "563.271911621094,77.2635650634765"/> </PointAnimati onusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Water" Storyboard.targetproperty= "(path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [0]. (Beziersegment.point2) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 112.729011535644,80.834991455078 "/&        Gt <easingpointkeyframe keytime= "00:00:03" value= "104.729011535645,32.8349914550781"/> </ pointanimationusingkeyframes> <pointanimationusingkeyframes Begintime= "00: 00:00 "storyboard.targetname=" Water "storyboard.targetproperty=" (Path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [0]. (BEZIERSEGMENT.POINT3) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 185.502014160156,80.834991455078 "/&        Gt <easingpointkeyframe keytime= "00:00:03" value= "177.502014160156,32.8349914550781"/> </ pointanimationusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" Storyboard.TargetName= " Water "storyboard.targetproperty=" (Path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [1]. (beziersegment.point1) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 258.275024414062,80.834991455078 "/&        Gt <easingpointkeyframe keytime= "00:00:03" value= "250.275024414063,32.8349914550781"/> </ pointanimationusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" Storyboard.TargetName= " Water "storyboard.targetproperty=" (Path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [2]. (Beziersegment.point2) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 600.704162597656,72.7879943847655 "/ > <easingpointkeyframe keytime= "00:00:03" value= "608.704162597656,32.8349229097365"/> </PointAnimati onusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Water" Storyboard.targetproperty= "(path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [2]. (BEZIERSEGMENT.POINT3) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 665.502014160156,72.7879943847655 "/ > <easingpointkeyframe keytime= "00:00:03" value= "673.502014160156,32.8349229097365"/> </PointAnimati onusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Water" Storyboard.targetproperty= "(path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [3]. (beziersegment.point1) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 730.299926757813,72.7879943847655 "/> <easingpointkeyframe keytime=" 00:00:03 "value=" 738.299926757813,32.8349229097365 "/> </PointA nimationusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" Storyboard.TargetName= "Water" Storyboard.targetproperty= "(path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [3]. (Beziersegment.point2) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 801.502014160156,40.8349914550781 "/ > <easingpointkeyframe keytime= "00:00:03" value= "801.502014160156,56.8349229097366"/> </PointAnimati onusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Water" Storyboard.targetproperty= "(path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [3]. (BEZIERSEGMENT.POINT3) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 801.502014160156,40.8349914550781 "/ > <easingpointkeyframe keytime= "00:00:03" value= "801.502014160156,56.8349229097366"/> </Pointanimationusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" Storyboard.TargetName= "Water" Storyboard.targetproperty= "(path.data). (PathGeometry.Figures) [0]. (pathfigure.segments) [4]. (beziersegment.point1) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 801.502014160156,40.8349914550781 "/ > <easingpointkeyframe keytime= "00:00:03" value= "801.502014160156,56.8349229097366"/> </PointAnimati onusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Water" Storyboard.targetproperty= "(path.data). (PathGeometry.Figures) [0]. (pathfigure.startpoint) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 1.50201416015619,32.834991455078 "/ > <easingpointkeyframe keytime= "00:00:03" value= "1.50201416015625,88.8349914550779"/> </PointAnimati onusingkeyframes> <pointanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Water" Storyboard.targetproperty= "(PAth. Data). (PathGeometry.Figures) [0]. (pathfigure.segments) [0]. (beziersegment.point1) "> <easingpointkeyframe keytime=" 00:00:00 "value=" 1.50201416015619,32.834991455078 "/&        Gt <easingpointkeyframe keytime= "00:00:03" value= "1.50201416015625,88.8349914550779"/> </ Pointanimationusingkeyframes></storyboard>

　　

　　　　　　　　

Silverlight & Blend Animation Design series five: storyboards (storyboards) and animations (animations)