[Windows 8 App]Storyboard------關鍵影格動畫(ColorAnimationUsingKeyFrames)

2013-12-30

ColorAnimationUsingKeyFrames 與 DoubleAnimationUsingKeyFrames 很相似

不同的是 ColorAnimationUsingKeyFrames 關鍵影格透過控制Color類型的屬性值來達到動畫效果

它一般包含 LinearColorKeyFrame、DiscreateColorKeyFrame 和 SplineColorKeyFrame 關鍵影格

這三個關鍵影格一樣可以看做是動畫效果的一個組合

每個關鍵影格都會指定一個值，隨著動畫在時間線上進行

每個關鍵影格都會產生不同的動畫效果

下面將透過範例來介紹ColorAnimationUsingKeyFrames

首先，新增一個專案【ColorAnimationUsingKeyFrames】

開啟【MainPage.xaml】，下面是【MainPage.xaml】的程式碼：


<Page
    x:Class="ColorAnimationUsingKeyFrames.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ColorAnimationUsingKeyFrames"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Canvas Width="400" Height="400" Background="White" x:Name="ColorCanvas">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Canvas.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ColorCanvas" RepeatBehavior="forever" EnableDependentAnimation="True" Storyboard.TargetProperty="(Canvas.Background).(SolidColorBrush.Color)">
                                <LinearColorKeyFrame Value="Red" KeyTime="00:00:02" />
                                <DiscreteColorKeyFrame Value="Yellow" KeyTime="00:00:03" />
                                <SplineColorKeyFrame Value="Green" KeyTime="00:00:05" KeySpline="0.6, 0.0 0.9, 0.00" />
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
        </Canvas>
    </Grid>
</Page>

在上面的程式碼中，添加了一個ColorCanvas的Canvas元素

設定其背景顏色為白色(White)，寬與高分別為400像素

接著在此元素的RoutedEvent屬性的值為"Canvas.Loaded"

以便載完Canvas元素後啟動動畫

接下來在EventTrigger元素中添加一個BeginStoryboard元素

在Storyboard元素中添加了一個ColorAnimationUsingKeyFrames動畫對象

並在其中設定Storyboard元素的TargetProperty屬性值為(Canvas.Background).(SolidColorBrush.Color)

以指定Canvas元素的SolidColorBrush類型的背景色為動畫目標屬性

最後在ColorAnimationUsingKeyFrames動畫中添加LinearColorKeyFrame、DiscreteColorKeyFrame和SplineColorKeyFrame三個關鍵影格

在不同關鍵影格中Canvas元素的背景色會發生變化

介紹LinearColorKeyFrame、DiscreteColorKeyFrame和SplineColorKeyFrame這三個屬性

LinearColorKeyFrame：在兩個值之間建立平滑的線性插補，前兩秒內Canvas元素的背景色會從白色漸變為紅色