Silverlight & Blend動畫設計系列十：Silverlight中的坐标系統（Coordinate System）與向量（Vector）運動

　　如果我們習慣于數學坐标系，那麼對于Silverlight中的坐标系可能會有些不習慣。因為在Silverlight中的坐标系與Flash中的坐标系一樣，一切都的颠倒的。在标準的數學坐标系中，X軸表示水準軸，Y軸表是垂直軸，然而Silverlight中的坐标系是基于視訊螢幕的坐标系。

　　Silverlight中的坐标系統和Flash中的坐标系統是完全一樣的，都是采用笛卡爾坐标系統，分為四象限。簡單的說就是以X軸表示水準方向并向東方無限延伸，Y軸表示垂直方向并向着南方無限延伸，X和Y軸相交點表示坐标系源點，其X,Y坐标值為0,0，是以在Silverlight中的坐标系範圍就是以坐标源點為起點，無限向東南方向延伸，也就是笛卡爾坐标系中的四象限。

　　　　　　　　

/// <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)));

        new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));

    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.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.From = currentPoint.Y;

    doubleAnimation.To = mousePoint.Y;

    Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));

    sb.Begin();

　　以上太陽的簡機關置變換移動和小球随滑鼠的移動都可以了解為平面中向量的運動，隻不過在實作上沒有直接通過向量的變換實作，而是通過Silverlight中提供的動畫API實作，個人認為，從某種角度可以将Silverlight中的動畫API了解為Silverlight的向量API，動畫API實作的平面動畫了解為向量運動。

本文轉自 beniao 51CTO部落格，原文連結：http://blog.51cto.com/beniao/326680，如需轉載請自行聯系原作者