Silverlight & Blend動畫設計系列十：Silverlight中的坐標系統（Coordinate System）與向量（Vector）運動
如果我們習慣於數學坐標系，那麽對於Silverlight中的坐標系可能會有些不習慣。因為在Silverlight中的坐標系與Flash中的坐標系一樣，一切都的顛倒的。在標準的數學坐標系中，X軸表示水平軸，Y軸表是垂直軸，然而Silverlight中的坐標系是基於視頻屏幕的坐標系。
Silverlight中的坐標系統和Flash中的坐標系統是完全一樣的，都是采用笛卡爾坐標系統，分為四象限。簡單的說就是以X軸表示水平方向並向東方無限延伸，Y軸表示垂直方向並向著南方無限延伸，X和Y軸相交點表示坐標系源點，其X,Y坐標值為0,0，所以在Silverlight中的坐標系範圍就是以坐標源點為起點，無限向東南方向延伸，也就是笛卡爾坐標系中的四象限。
Silverlight的向量（Vector）運動目前僅支持一維向量運動（One-dimensional vector movement）和二維向量運動（Two-dimensional vector movement），也就是平時大家所說的1D和2D。一維向量運動可以理解為在同一直線上的運動，二維向量運動則可以理解在平面空間（X,Y坐標系）裏的運動。向量的概念從初中就開始學習，這裏就不做介紹了，如有不清楚的朋友可以移步到這裏。
二維向量運動很容易理解，在Silverlight的動畫設計中二維動畫也是最常見和使用率最高的動畫，可參考在本系列第一篇《Silverlight & Blend動畫設計系列一：偏移動畫（TranslateTransform）
/// <summary>
/// 創建動畫
/// </summary>
private void CreateStoryboard()
{
Point currentPoint = new Point(Canvas.GetLeft(darkMoon), Canvas.GetTop(darkMoon));
//目標點坐int標
Point point = new Point(280, -245);
//創建動畫容器時間線
Storyboard storyboard = new Storyboard();
DoubleAnimation doubleAnimation = new DoubleAnimation();
//創建X軸方向動畫
doubleAnimation.From = currentPoint.X;
doubleAnimation.To = point.X;
doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 1));
Storyboard.SetTarget(doubleAnimation, darkMoon);
Storyboard.SetTargetProperty(doubleAnimation,
new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));
storyboard.Children.Add(doubleAnimation);
//創建Y軸方向動畫
doubleAnimation = new DoubleAnimation();
doubleAnimation.SetValue(DoubleAnimation.FromProperty, currentPoint.Y);
doubleAnimation.SetValue(DoubleAnimation.ToProperty, point.Y);
doubleAnimation.SetValue(DoubleAnimation.DurationProperty, new Duration(new TimeSpan(0, 0, 1)));
Storyboard.SetTarget(doubleAnimation, darkMoon);
Storyboard.SetTargetProperty(doubleAnimation,
new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));
storyboard.Children.Add(doubleAnimation);
storyboard.Begin();
}
下面再來一起學習一個稍微復雜點的二維向量運動，模擬屏幕內有一小球，當鼠標在舞臺上點擊則小球以動畫的形式移動到鼠標點擊處。如下XAML定義：
<UserControl x:Class="SLV.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Canvas x:Name="LayoutRoot" Width="400" Height="400" Background="Black" MouseLeftButtonDown="OnMouseDown">
<Ellipse Fill="YellowGreen" x:Name="ellipse"
Width="20"
Height="20"
Canvas.Left="80"
Canvas.Top="66" >
</Ellipse>
</Canvas>
</UserControl>
其舞臺的鼠標左鍵點擊事件代碼如下：
private void OnMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e){ //鼠標點擊點坐標
var mousePoint = e.GetPosition(null);
//當前對象所在坐標
var currentPoint = new Point((double)ellipse.GetValue(Canvas.LeftProperty), (double)ellipse.GetValue(Canvas.TopProperty));
Storyboard sb = new Storyboard();
//創建X坐標方向動畫
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = currentPoint.X;
doubleAnimation.To = mousePoint.X;
doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 2));
Storyboard.SetTarget(doubleAnimation, ellipse);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));
sb.Children.Add(doubleAnimation);
//創建Y坐標方向動畫
doubleAnimation = new DoubleAnimation();
doubleAnimation.From = currentPoint.Y;
doubleAnimation.To = mousePoint.Y;
doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 2));
Storyboard.SetTarget(doubleAnimation, ellipse);
Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));
sb.Children.Add(doubleAnimation);
sb.Begin();
}
以上太陽的簡單位置變換移動和小球隨鼠標的移動都可以理解為平面中向量的運動，只不過在實現上沒有直接通過向量的變換實現，而是通過Silverlight中提供的動畫API實現，個人認為，從某種角度可以將Silverlight中的動畫API理解為Silverlight的向量API，動畫API實現的平面動畫理解為向量運動。
推薦資源：
MSDN:http://msdn.microsoft.com/zh-cn/library/cc189090(VS.95).aspx
http://www.silverlight.net/learn/quickstarts/animations/
Silverlight & Blend動畫設計系列文章
《Function Silverlight 3 Animation》----本篇中使用的部分素材選自此書
Silverlight & Blend動畫設計系列十：Silverlight中的坐標系統（Coordinate System）與向量（Vector）運動