情節(jié)提要?jiǎng)赢嬇c關(guān)鍵幀動(dòng)畫

情節(jié)提要?jiǎng)赢嬇c關(guān)鍵幀動(dòng)畫

簡單動(dòng)畫示例

因?yàn)橄旅孢@些 Rectangle 都是在 ItemsControl 中的，因?yàn)樵谌萜骺丶袘?yīng)用主題樣式時(shí)，其所有的子對(duì)象也都會(huì)繼承下來。

<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é)提要?jiǎng)赢?/h2>

就像我們前面介紹的定義樣式資源一樣，我們也可以將動(dòng)畫設(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>

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

storyboardRectangle.Begin();

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

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

除此之外，還有 Point 和 Color 兩種動(dòng)畫屬性類型，也即是 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 和點(diǎn)都可以去掉。

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

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

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

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

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

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

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

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

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

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

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

關(guān)鍵幀動(dòng)畫

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

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

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

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

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

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

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

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

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

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

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