情節(jié)提要動畫與關(guān)鍵幀動畫

情節(jié)提要動畫與關(guān)鍵幀動畫

簡單動畫示例

因為下面這些 Rectangle 都是在 ItemsControl 中的，因為在容器控件中應(yīng)用主題樣式時，其所有的子對象也都會繼承下來。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ItemsControl Grid.Row="1" x:Name="itemsControlRectangle">             
        <ItemsControl.ItemContainerTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </ItemsControl.ItemContainerTransitions>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Height="400"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel> 
        <ItemsControl.Items>
            <Rectangle Fill="Red" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="Wheat" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="Yellow" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="Blue" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="Green" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="Gray" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="White" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="Gainsboro" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="Magenta" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="CadetBlue" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="NavajoWhite" Width="100" Height="100" Margin="12"/>
            <Rectangle Fill="Khaki" Width="100" Height="100" Margin="12"/>
        </ItemsControl.Items>
    </ItemsControl>
</Grid>

情節(jié)提要動畫

就像我們前面介紹的定義樣式資源一樣，我們也可以將動畫設(shè)為資源。

<Page.Resources>
    <Storyboard x:Name="storyboardRectangle" >
        <DoubleAnimation
            Storyboard.TargetName="rectangle"  
            Storyboard.TargetProperty="Opacity"                
            From="1.0" To="0" Duration="0:0:1"
            AutoReverse="True"
            RepeatBehavior="Forever"/>          
    </Storyboard>
</Page.Resources>
<Grid>
    <Rectangle x:Name="rectangle"       
        Width="200" Height="130" Fill="Blue"/>
</Grid>

在理解這些代碼意思之前，還是先讓動畫跑起來，你可以加上一個 Button 并設(shè)置其 Click 事件，也可以在 MainPage 方法下直接寫如下代碼：

storyboardRectangle.Begin();

運行應(yīng)用后，Rectangle 的透明度就會漸漸的消失而后出現(xiàn)。

在上面這個示例中，我們?yōu)?Rectangle 的 Opacity（透明度）屬性設(shè)置了動畫，Storyboard 通常存放在<Page.Resources> 中或 App.xaml 下的 <Application.Resources> 中。要給一個對象設(shè)置動畫，就得應(yīng)用 x:Name 屬性，因為需要在動畫中設(shè)置 Storyboard.TargetName 屬性來創(chuàng)建動畫的對象名稱。其后的 Storyboard.TargetProperty 屬性顯然是設(shè)置目標(biāo)屬性的。如果你嘗試將屬性設(shè)為 Fill，而將 From 設(shè)為 Blue 就會發(fā)現(xiàn)這樣是不行的，原因是這里設(shè)置的動畫類型本身是 Double 的。

除此之外，還有 Point 和 Color 兩種動畫屬性類型，也即是 PointAnimation 和 ColorAnimation。如果要將此處的 Rectangle 改變顏色，比如說從 Blue 到 Lime，那么它的屬性應(yīng)該是什么呢？Fill？不是的，雖然在 Rectangle 中是 Fill 屬性，但我們最終應(yīng)該將其定位到 Color。

Storyboard.TargetProperty="(rectangle.Fill).(SolidColorBrush.Color)"

如果你已經(jīng)定義了 TargetName 屬性為 rectangle，那么 Fill 前的 rectangle 和點都可以去掉。

左右兩個括號都是必要的，它表示一個屬性的名稱。中間的點意味著要先獲取第一個括號的屬性，也就是設(shè)置動畫的對應(yīng)對象，然后進(jìn)入到其對象模型中，此處是 Color。官網(wǎng)上還給出了其它示例：

(UIElement.RenderTransform).(TranslateTransform.X) 應(yīng)用到 RenderTransform 上，并創(chuàng)建 TranslateTransform 的 X 值的動畫

(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color) 應(yīng)用到 Fill 上，并在LinearGradientBrush 的 GradientStop 內(nèi)創(chuàng)建 Color 的動畫，這里方括號內(nèi)的數(shù)字表示索引，表示集合中的一項，索引從 0 開始

(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) 應(yīng)用到RenderTransform上，并創(chuàng)建TranslateTransform

我們還注意到，動畫中還有 From 和 To 屬性，顧名思義，F(xiàn)rom 表示動畫的開始值，To 表示結(jié)束值。

如果沒有定義 From 值，那么動畫起始值為該對象屬性的當(dāng)前值。

如果想要設(shè)置一個和起始值相對的結(jié)束值，建議使用 By 屬性。

動畫在這 3 個屬性中至少應(yīng)該設(shè)置一個，否則動畫便不會更改值，且這 3 個屬性也無法同時存在。

我們還可以用設(shè)置 AutoReverse 屬性為真以使動畫才結(jié)束后自動進(jìn)行反向播放，但反向播放完后不會再繼續(xù)播放。

設(shè)置 RepeatBehavior 屬性為“1x”表示動畫的播放次數(shù)，或者也可以直接設(shè)為“Forever”，讓其永遠(yuǎn)播放。

如果動畫較多的情況下，我們哈可以設(shè)置 BeginTime 來使不同的動畫錯開播放。

關(guān)鍵幀動畫

什么是關(guān)鍵幀動畫？

關(guān)鍵幀動畫建立在上文的情節(jié)提要動畫概念智商，它令動畫沿著一條時間線來逐步達(dá)到多個目標(biāo)值，也就是說如果要讓上文的 Fill 屬性從 Blue 變化到 Lime 之間還可以令其先變化到 Red 或 Orange 等。

更為巧妙的是，你可以同時指定不同的屬性來制作復(fù)雜的動畫。

如果稍微會一點 Flash，對于關(guān)鍵幀的概念肯定沒有問題。

1.線性關(guān)鍵幀

我們?yōu)閯赢嬙O(shè)置一個 KeyTime 來表示間隔的時間戳，例如我們可以設(shè)置 4 個時間戳為：KeyTime="0:0:0"、"0:0:2"、"0:0:8"、"0:0:9"，可以看到動畫在中間部分時跳躍性非常之大。但其動畫都是緩慢變化的，因為這是線性的，還有一種另外一種關(guān)鍵幀它會讓動畫在時間戳上產(chǎn)生突變而不是漸變，這就是離散式關(guān)鍵幀（就像概率論中的離散型和連續(xù)型一樣）。

2.樣條關(guān)鍵幀

其主要通過 KeySpline 屬性來建立過渡，例如 KeySpline="0.1,0.1 0.7.0.8"，這里有兩個點，分別對應(yīng)貝塞爾曲線的第一個控制點和第二個控制點，描述了動畫的加速情況。關(guān)于貝塞爾曲線，建議大家看看維基百科，在圖形化編程中非常常用。

3.緩動關(guān)鍵幀

這種模式就更加高級了，它由多個預(yù)定義好的數(shù)學(xué)公式來控制。以下是的緩動函數(shù)列表來源于網(wǎng)絡(luò)：

• BackEase：動畫開始在指定路徑上運動前稍微收縮動畫的運行。
• BounceEase：創(chuàng)建回彈效果。
• CircleEase：使用圓函數(shù)創(chuàng)建加速或減速的動畫。
• CubicEase：使用函數(shù) f(t) = t3 創(chuàng)建加速或減速的動畫。
• ElasticEase：創(chuàng)建一個動畫，模擬彈簧的來回振蕩運動，直到它達(dá)到停止?fàn)顟B(tài)。
• ExponentialEase：使用指數(shù)公式創(chuàng)建加速或減速的動畫。
• PowerEase：使用公式 f(t) = tp 創(chuàng)建加速或減速的動畫，其中 p 等于 Power 屬性。
• QuadraticEase：使用函數(shù) f(t) = t2 創(chuàng)建加速或減速的動畫。
• QuarticEase：使用函數(shù) f(t) = t4 創(chuàng)建加速或減速的動畫。
• QuinticEase：使用函數(shù) f(t) = t5 創(chuàng)建加速或減速的動畫。
• SineEase：使用正弦公式創(chuàng)建加速或減速的動畫。