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》----本篇中使用的示例素材選自此書