一、DiscreteDoubleKeyFrame

離散型關(guān)鍵幀動(dòng)畫，重點(diǎn)，我們理解一下“離散”的意思，其實(shí)你查一下《新華字典》，“離”和“散”的意思相近。我們可以這樣解釋：每個(gè)關(guān)鍵幀之間是直接過渡，其間不經(jīng)過動(dòng)畫插補(bǔ)。似乎這樣理解有點(diǎn)苦澀難懂，所以，我們還是從實(shí)例入手。

請參考以下XAML代碼寫一個(gè)示例：

    <Grid Loaded="OnGridLoaded">   
        <Rectangle Width="100" Height="100" Fill="Green" VerticalAlignment="Top">   
            <Rectangle.RenderTransform>   
                <TranslateTransform x:Name="trm"/>   
            </Rectangle.RenderTransform>   
        </Rectangle>   
        <Grid.Resources>   
            <Storyboard x:Name="std">   
                <DoubleAnimationUsingKeyFrames Duration="0:0:5" RepeatBehavior="15"   
Storyboard.TargetName="trm"   
Storyboard.TargetProperty="Y">   
                    <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="150"/>   
                    <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="280"/>   
                    <DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="380"/>   
                </DoubleAnimationUsingKeyFrames>   
            </Storyboard>   
        </Grid.Resources>   
    </Grid>   

在后臺(tái)的C#代碼中，千萬不要記了啟動(dòng)動(dòng)畫，等下運(yùn)行后發(fā)現(xiàn)動(dòng)不了就麻煩了。

private void OnGridLoaded(object sender, RoutedEventArgs e)   
{   
    this.std.Begin();   
}   

然后你可以運(yùn)行了，注意認(rèn)真觀察動(dòng)畫的演變過程。

不知道你觀察到了什么？你是否發(fā)現(xiàn)，矩形向下運(yùn)動(dòng)的過程是直接跳躍式的，每個(gè)關(guān)鍵之間沒有創(chuàng)建過渡效果，而且直接跳到對應(yīng)值。

二、DiscreteColorKeyFrame

這也是一個(gè)離散型關(guān)鍵幀動(dòng)畫，從名字上我們知道，它是針對顏色進(jìn)行動(dòng)畫處理的。還是看例子吧。

請參考下面XAML代碼寫一個(gè)測試程序：

    <Grid Loaded="OnGridLoaded">   
        <Ellipse Width="250" Height="250">   
            <Ellipse.Fill>   
                <SolidColorBrush x:Name="brush" Color="Blue"/>   
            </Ellipse.Fill>   
        </Ellipse>   
        <Grid.Resources>   
            <Storyboard x:Name="std">   
                <ColorAnimationUsingKeyFrames Duration="0:0:8"   
RepeatBehavior="20"   
Storyboard.TargetName="brush"   
Storyboard.TargetProperty="Color">   
                    <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Yellow"/>   
                    <DiscreteColorKeyFrame KeyTime="0:0:5" Value="Gray"/>   
                    <DiscreteColorKeyFrame KeyTime="0:0:7" Value="Red"/>   
                </ColorAnimationUsingKeyFrames>   
            </Storyboard>   
        </Grid.Resources>   
    </Grid>   

后臺(tái)代碼就不帖了，都懂得寫什么了。

然后運(yùn)行一下，查看效果。

從效果中可以看到，顏色的改變是沒有平滑的過渡效果的，而是當(dāng)時(shí)間線的播放時(shí)間到了關(guān)鍵幀所在的位置時(shí)，顏色是直接改變的。

三、LinearColorKeyFrame

線性顏色的關(guān)鍵幀與離散型動(dòng)畫相反，每個(gè)關(guān)鍵幀之間都創(chuàng)建平滑的過渡效果，讓人看起來有連續(xù)感。

請參考以下XAML代碼寫一個(gè)測試程序。

    <Grid Loaded="onGridLoaded">   
        <Ellipse Width="300" Height="300" >   
            <Ellipse.Fill>   
                <RadialGradientBrush x:Name="rdGradientBrush" Center="0.5, 0.5"   
                                     RadiusX="0.5" RadiusY="0.5">   
                    <GradientStop Color="LightGreen" Offset="0"/>   
                    <GradientStop Color="DarkGreen" Offset="1"/>   
                </RadialGradientBrush>   
            </Ellipse.Fill>   
        </Ellipse>   
        <Grid.Resources>   
            <Storyboard x:Name="std">   
                <ColorAnimationUsingKeyFrames Duration="0:0:6"   
RepeatBehavior="Forever"   
Storyboard.TargetName="rdGradientBrush"   
Storyboard.TargetProperty="(RadialGradientBrush.GradientStops)[0].(GradientStop.Color)">   
                    <LinearColorKeyFrame KeyTime="0:0:1" Value="Orange"/>   
                    <LinearColorKeyFrame KeyTime="0:0:3" Value="White"/>   
                    <LinearColorKeyFrame KeyTime="0:0:6" Value="Pink"/>   
                </ColorAnimationUsingKeyFrames>   
                <ColorAnimationUsingKeyFrames Duration="0:0:6"   
RepeatBehavior="Forever"   
Storyboard.TargetName="rdGradientBrush"   
Storyboard.TargetProperty="(RadialGradientBrush.GradientStops)[1].(GradientStop.Color)">   
                    <LinearColorKeyFrame KeyTime="0:0:3" Value="Yellow"/>   
                    <LinearColorKeyFrame KeyTime="0:0:6" Value="Violet"/>   
                    <LinearColorKeyFrame KeyTime="0:0:7" Value="SeaGreen"/>   
                </ColorAnimationUsingKeyFrames>   
            </Storyboard>   
        </Grid.Resources>   
    </Grid>   

頁面上的正圓是使用徑向漸變填充的，漸變顏色點(diǎn)有兩個(gè)，我們分別對這兩個(gè)漸變點(diǎn)的顏色進(jìn)行線性動(dòng)畫處理，這樣就會(huì)做出很漂亮的效果，如下面圖片所示。