In the Silverlight animation framework, the ScaleTransform class provides a scaling operation within the coordinates of a two-dimensional space, and the object can be scaled and stretched horizontally or vertically by scaletransform to achieve a simple zoom animation effect, So I'll call it scaling animation (ScaleTransform). There are two points that you need to pay special attention to with ScaleTransform: the center point coordinates and the X, y-axis scaling , the smaller the scale value, the smaller the object element (shrinking), and the larger the scale value, the greater the object element (which is rendered as a magnifying effect).
Blend support for animation design in Silverlight is very powerful, as is the offset animation, rotation animation as simple, to achieve the zoom animation only need to design the animation elements of a simple design to complete the creation of animation effects.
By creating animation container timelines, such as animating properties, Blend generates the corresponding animation encoding in the XAML file, as described in the following code block:
<storyboard x:name= "Storyboard1" >
<doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Truck"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [0]. (Scaletransform.scalex) ">
<easingdoublekeyframe keytime= "00:00:03" value= "0.15"/>
</DoubleAnimationUsingKeyFrames>
<doubleanimationusingkeyframes begintime= "00:00:00" storyboard.targetname= "Truck"
Storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [0]. (Scaletransform.scaley) ">
<easingdoublekeyframe keytime= "00:00:03" value= "0.15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
Any element object whose scaling animation (ScaleTransform) defaults to (max), keeping the element intact. As previously mentioned, the smaller the scale value, the smaller the object element (shrinking), and the larger the scale value, the larger the object element (which is rendered as a magnification). As shown in the example above, the scaling value is set to 0.15, which works as follows:
If the animation effect using program coding to achieve, the same is very simple, mainly using animation according to time to control the object's ScaleTransform transform effect ScaleX and ScaleY values, detailed as follows:
<summary>
Create a scaled animation of the object truck, 3 seconds from the original size to the size of 15%
</summary>
public void Createstoryboard ()
{
Create animation container Timeline
Storyboard Storyboard = new Storyboard ();
Create an X-axis zoom animation, set the object to zoom to 0.15, the object scale cache time to 3 seconds
DoubleAnimation doubleanimation = new DoubleAnimation ();
doubleanimation.to = 0.15;
Doubleanimation.duration = new Duration (new TimeSpan (0, 0, 3));
Storyboard.settarget (DoubleAnimation, truck);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [0]. (Scaletransform.scalex) "));
Storyboard. Children.add (DoubleAnimation);
Create a zoom animation in the y-axis, set the object to zoom to 0.15, and the object scale cache time to 3 seconds
DoubleAnimation = new DoubleAnimation ();
Doubleanimation.setvalue (Doubleanimation.toproperty, 0.15);
Doubleanimation.setvalue (Doubleanimation.durationproperty, New Duration (new TimeSpan (0, 0, 3)));
Storyboard.settarget (DoubleAnimation, truck);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [0]. (Scaletransform.scaley) "));
Storyboard. Children.add (DoubleAnimation);
Storyboard. Begin ();
}
As in the example above, if the moving object is replaced by a "car", the animation is performed with the impression that a car is driving on the horse road. Zoom Animation (ScaleTransform) is very useful in normal development, as there is a component on the interface, the default is to zoom in half of the display, when the user's mouse points to it to enlarge the object to the normal scale (x,y=>1,1) display, the mouse left when the object reverts to the default size (x , y=>0.5,0.5), you can use the Zoom animation (ScaleTransform) to implement it.
<ellipse width= "height=" "fill=" "Red" X:name= "Ellipse" rendertransformorigin= "0.5,0.5" >
<Ellipse.RenderTransform>
<TransformGroup>
<scaletransform scalex= "0.5" scaley= "0.5"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>Ellipse. MouseEnter + = (mes, mee) =
{
Storyboard Storyboard = new Storyboard ();
DoubleAnimation doubleanimation = new DoubleAnimation ();
doubleanimation.to = 1;
Doubleanimation.duration = new Duration (Timespan.frommilliseconds (300));
Storyboard.settarget (DoubleAnimation, ellipse);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [0]. (Scaletransform.scalex) "));
Storyboard. Children.add (DoubleAnimation);
DoubleAnimation = new DoubleAnimation ();
doubleanimation.to = 1;
Doubleanimation.duration = new Duration (Timespan.frommilliseconds (300));
Storyboard.settarget (DoubleAnimation, ellipse);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [0]. (Scaletransform.scaley) "));
Storyboard. Children.add (DoubleAnimation);
Storyboard. Begin ();
};
Ellipse. MouseLeave + = (MLS, MLE) =
{
Storyboard Storyboard = new Storyboard ();
DoubleAnimation doubleanimation = new DoubleAnimation ();
doubleanimation.to = 0.5;
Doubleanimation.duration = new Duration (Timespan.frommilliseconds (300));
Storyboard.settarget (DoubleAnimation, ellipse);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [0]. (Scaletransform.scalex) "));
Storyboard. Children.add (DoubleAnimation);
DoubleAnimation = new DoubleAnimation ();
doubleanimation.to = 0.5;
Doubleanimation.duration = new Duration (Timespan.frommilliseconds (300));
Storyboard.settarget (DoubleAnimation, ellipse);
Storyboard.settargetproperty (DoubleAnimation,
New PropertyPath ("(Uielement.rendertransform)." ( TransformGroup.Children) [0]. (Scaletransform.scaley) "));
Storyboard. Children.add (DoubleAnimation);
Storyboard. Begin ();
};
PS: The above code block is only to disguise the use of scaling animation (ScaleTransform), if you really want to achieve a circular object to zoom in on the mouse, the effect of moving back to the original only need to directly set its width (width) and height property on it.
Silverlight & Blend Animation Design Series three: Scaling animations (ScaleTransform)
