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）屬性就可以了。
Silverlight & Blend動畫設計系列三：縮放動畫（ScaleTransform）