Silverlight & Blend動畫設計系列一：位移動畫（TranslateTransform）

標籤：通過   方向   summary   str   bsp   studio   expr   印象   意思   

使用者介面組件、映像元素和多媒體功能可以讓我們的介面生動活潑，除此之外，Silverlight還具備動畫功能，它可以讓應用程式“動起來”。實際上，英文中Animation這個單詞的意思是給某物帶來生命。在介面中添加動畫效果，給人以印象深刻可視化提示，可以讓使用者的注意力集中到我們想讓他們關注的地方。

 

　　動畫主要是通過計時器來完成，在Silverlight中開發動畫程式通常是使用微軟主推的設計工具Microsoft Expression Blend，Silverlight中提供了優秀的動畫系統，我們可以通過Microsoft Expression Blend 快速的完成動畫元素的設計製作，然後通過Visual Studio作為編碼環境進行後面的管理動畫定時器和重新整理使用者介面的工作。當使用Microsoft Expression Blend 時，可以用拖拽的方式在時間軸中進行動畫的定義，這樣可以很容易快速定義負責的動畫,因為 Microsoft Expression Blend 將自動產生對應的XAML代碼。

 

　　 Silverlight中的位移動畫和Flash中的補間動畫基本一樣，其實很好理解，也就是一個動畫元素（組件）從一個位置移動到另一個位置，這個過著中有三個關鍵點：動畫起點、動畫終點和動畫時間。這三點可以理解為一個動畫元素從始點座標向終點座標位移的緩衝時間是多少。

 

　　當我們定義好了動畫元素後，可以直接通過Blend中的物件與時間軸面板來為動畫元素添加動畫容器時間軸（Storyboard），如所示：

　　　　　　 

 

　　當動畫容器時間軸建立好後，只需要選中需要進行建立動畫的元素，然後再屬性面板下進行可視化屬性設定就可以完成動畫的建立，如示為建立元素darkMoon的位移動畫。

　　　　　　　　

 

　　通過上面的一系列操作設定後切換到XAML視圖，可以發現在XAML編碼檔案裡Blend自動產生了如下程式碼片段，其作用就是為名為“darkMoon”的動畫元素建立兩個方向（X,Y）的位移動畫。

<Storyboard x:Name="Storyboard1">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="darkMoon" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="280"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="darkMoon" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-245"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

 

　　　　　　　　

 

　　為動畫執行過程，在某些情況下要實現一些動畫效果是不能預先確定的，這就需要在程式編碼中去動態建立動畫效果。使用Blend進行動畫設計是非常簡單的，尤其是對Adobe Flash熟悉的人員，其實在程式編碼中使用程式建立動畫也一樣的簡單，相比之下只是需要人為的去編寫很多的程式碼，另外就是通過程式碼動態建立動畫效果需要開發人員對Silverlight的動畫架構非常熟悉，只有在熟練應用Silverlight動畫架構所提供的動畫介面的情況下才能夠和使用Blend設計動畫一樣隨心應手實現各種不同的動畫效果。

 

　　編寫程式碼建立動畫其實也是非常簡單的，只要理清了思路和熟練應用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)));
    Storyboard.SetTarget(doubleAnimation, darkMoon);
    Storyboard.SetTargetProperty(doubleAnimation, 
        new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));
    storyboard.Children.Add(doubleAnimation);

    storyboard.Begin();
}

 

Silverlight & Blend動畫設計系列一：位移動畫（TranslateTransform）