Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）

　　在Silverlight的动画框架中，ScaleTransform类提供了在二维空间中的坐标内进行缩放操做，经过ScaleTransform能够在水平或垂直方向的缩放和拉伸对象，以实现一个简单的缩放动画效果，故此我将其称为缩放动画（ScaleTransform）。使用ScaleTransform须要特别关注的有两点： 中心点坐标和 X、Y轴方向的缩放比例，比例值越小则对象元素就越小（既收缩），比例值越大则对象元素就越大（既呈现为放大效果）。

　　　　　　　　

　　　　　　　　

 

　　Blend对Silverlight里的动画设计支持很是强大，同偏移动画、旋转动画同样简单，要实现缩放动画也只须要对设计好的动画元素进行简单的设计就能完成动画效果的建立。

　　　　　　　　

 

　　经过建立动画容器时间线后，如上图进行动画效果属性的设置，Blend便会生成相应的动画编码在XAML文件里，详见以下代码块：

< 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 >

 　　　　　　　

　　任何一个元素对象，其缩放动画（ScaleTransform）的默认值为（1，1），既保持元素原样不变。如前面所说，比例值越小则对象元素就越小（既收缩），比例值越大则对象元素就越大（既呈现为放大效果）。如上示例就是将缩放比例值设置的0.15，其运行效果以下图所示：

　　　　　　

 

　　若是上图动画效果使用程序编码去实现，一样的也是很简单的，主要就是利用动画根据时间去控制对象的ScaleTransform变换效果的ScaleX和ScaleY值，详细以下：

///   <summary>
///  建立对象truck的缩放动画，3秒钟从原始大小缩放到15%的大小
///   </summary>
public   void  CreateStoryboard()
{
     // 建立动画容器时间线
    Storyboard storyboard  =   new  Storyboard();

     // 建立X轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒
    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);

     // 建立Y轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒
    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();
}

 

　　如上示例，若是将移动的对象换成一个“车”，执行动画的时候就感受是一辆车在马路上行驶了。缩放动画（ScaleTransform）在平时的开发中很是适用，不如界面上有一个组件，默认为缩放一半显示，当用户的鼠标指向它的时候将对象放大到正常比例（x,y=>1,1）显示，鼠标离开的时候将对象恢复到默认大小（x,y=>0.5,0.5），此时就能够使用缩放动画（ScaleTransform）去实现。

< Ellipse  Width ="50"  Height ="50"  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:上面代码块仅是为了掩饰缩放动画（ScaleTransform）的使用，若是真要实现圆形对象的鼠标指向放大，移开恢复原状的效果只须要直接设置其宽度（Width）和高度（Height）属性就能够了。

　　　　　　　　  

 

 

　　推荐资源：

　　MSDN: http://msdn.microsoft.com/zh-cn/library/cc189090(VS.95).aspx

　　Silverlight动画介绍： http://www.cnblogs.com/skysing/archive/2009/05/15/1457718.html

　　 Silverlight & Blend动画设计系列一：偏移动画（TranslateTransform）

　　 Silverlight & Blend动画设计系列二：旋转动画（RotateTransform）

 　 《Function Silverlight 3 Animation》----本篇中使用的示例素材选自此书