Silverlight & Blend動畫設計系列六：動畫技巧（Animation Techniques）之對象與路徑轉化、波感特效

一、轉換對象為路徑

　　将一個對象元素轉化為路徑是非常有用的，通過路徑選擇工具可以将轉化後的路徑對象進行任意拉動變形，以達到理想的設計效果。可以通過Blend菜單中的對象-->路徑-->轉換為路徑以實作對象到路徑的轉換，也可以使用下圖所示的方法進行對象到路徑的轉換：

　　　　　　　　

　　就以上面截取橢圓中的一部分為例，就需要将圓(Ellipse)轉化為路徑後才能才能通過路徑工具對路徑進行拖動變形，最終以實作想要的圖形效果。如下圖所示就是對橢圓進行變形處理後将其多餘的部分剪切掉，實作了最終的圖形效果：

　　　　　　 

<Ellipse Height="174" Width="240" Canvas.Left="64" Canvas.Top="274" Fill="#FF87A50F"/>

　　在XAML編碼級則将會從Ellipse對象轉化為Path對象，如上圖最終的圖形效果Path對應的XAML編碼為：

<Path Fill="#FF87A50F" Stretch="Fill" Height="174" Width="240" Canvas.Left="64" Canvas.Top="274" Data="M240,87 C240,135.04877 186.27417,174 120,174 C53.72583,174 0,135.04877 0,87 C0,38.951225 53.72583,0 120,0 C186.27417,0 240,38.951225 240,87 z"/>

二、波感特效

　　比如下面的XAML定義，在界面上繪制了一個漸變填充的圓形：

<Ellipse Height="48" x:Name="RedBall" Width="48" Canvas.Left="355" Canvas.Top="274" MouseLeftButtonUp="RedBall_MouseUp">

    <Ellipse.Fill>

        <RadialGradientBrush GradientOrigin="0.479999989271164,0.46000000834465">

            <RadialGradientBrush.RelativeTransform>

                <TransformGroup>

                    <ScaleTransform/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform X="-0.07" Y="-0.21"/>

                </TransformGroup>

            </RadialGradientBrush.RelativeTransform>

            <GradientStop Color="#FFFFFFFF"/>

            <GradientStop Color="#FFFF0000" Offset="1"/>

        </RadialGradientBrush>

    </Ellipse.Fill>

</Ellipse>

 　　接下來對這個圓形對象進行波感效果設計，本文前面說過波感效果其實就是一個縮放動畫，對一個和基礎對象一樣的對象進行放大到一定程度後将其隐藏。這裡需要将上面設計好的圓複制一個作為動畫效果設計對象，如下圖：

　　縮放動畫效果可以通過ScaleTransform來實作，透明度則使用Opacity屬性進行設定，要實作波感效果主要就是通過動畫在一定的時間内動态的改變這兩項的屬性值，ScaleTransform的X,Y預設為1，Opacity預設也是1。

　　首先建立一個動畫容器時間線，然後移動時間軸到1秒的位置，選中複制後的圓形對象設定ScaleTransform的X,Y為3，Opacity的屬性值為0，以實作一個放大透明的動畫效果。當對象完全透明後就相當于隐藏了，其實也可将其Visibility屬性為Collapsed，将對象隐藏不呈現。如下圖：

　　主要就是設定了三個屬性值，這三個屬性值都在動畫過度中動态改變，通過Blend中進行設定後可以看到生成了如下XAML編碼：

<Storyboard x:Name="RedBall_Clicked" Completed="RedBall_Clicked_Completed">

    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RedBall_Copy" 

    Storyboard.TargetProperty="(UIElement.Opacity)" BeginTime="00:00:00">

        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>

    </DoubleAnimationUsingKeyFrames>

    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" 

    BeginTime="00:00:00">

        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="3"/>

    Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 

</Storyboard>

　　通過檢視前面的代碼片段可以看到，給圓形對象添加了事件處理：MouseLeftButtonUp="RedBall_MouseUp"，也就是點選了圓對象後需要啟動動畫的執行：

private void RedBall_MouseUp(object sender, MouseButtonEventArgs e)

{

    RedBall_Copy.Visibility = Visibility.Visible;

    RedBall_Clicked.Begin();

}

　　

　　同樣也給動畫添加了完成的事件處理：Completed="RedBall_Clicked_Completed"，當動畫執行完成後做什麼操作。需要做的就是将圓形對象的相關屬性設定為最初的屬性值，以便在進行第二次動畫的時候能夠正确無誤的實作其效果。

private void RedBall_Clicked_Completed(object sender, EventArgs e)

    RedBall_Clicked.Stop();

    RedBall_Copy.Opacity = 1;

    RedBall_Copy.Visibility = Visibility.Collapsed;

　　OK，到這裡就完成了整個波感特效的設計制作，最終的運作效果如下圖所示，如果你對波感特效感興趣，建議你下載下傳本文示例代碼運作，進一步的體驗波感特效。

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