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

2013-12-30

ObjectAnimationUsingKeyFrames關鍵影格動畫透過控制Object類型的屬性值來達到相應的動畫效果

可以包含一個或多個DiscreteObjectKeyFrame元素，從而使動畫呈現一種非連續的變化效果

下面將透過範例來介紹ObjectAnimationUsingKeyFrames

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

開啟【MainPage.xaml】，這是【MainPage.xaml】的程式碼


<Page
    x:Class="ObjectAnimationUsingKeyFrames.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ObjectAnimationUsingKeyFrames"
    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}">
        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Name="storyboard">
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AnimatedRectangle" Storyboard.TargetProperty="Fill" Duration="0:0:3" RepeatBehavior="Forever" >
                        <ObjectAnimationUsingKeyFrames.KeyFrames>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1">
                                <DiscreteObjectKeyFrame.Value>
                                    <LinearGradientBrush>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="Yellow" Offset="0.0" />
                                            <GradientStop Color="Orange" Offset="0.1" />
                                            <GradientStop Color="Red" Offset="2.0" />                                            
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:2">
                                <DiscreteObjectKeyFrame.Value>
                                    <LinearGradientBrush>
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="White" Offset="0.0" />
                                            <GradientStop Color="MediumBlue" Offset="0.1" />
                                            <GradientStop Color="Black" Offset="1.0" />              
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames.KeyFrames>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </StackPanel.Resources>
        </StackPanel>
        <Rectangle x:Name="AnimatedRectangle" Loaded="Rectangle_Loaded" Width="400" Height="400" /> 
    </Grid>
</Page>

上面的程式碼中，先添加一個StackPanel元素，並在StackPanel元素的StackPanel.Resources中添加一個動畫資源Storyboard元素

並對Storyboard命名為storyboard，在Storyboard元素中添加一個關鍵影格ObjectAnimationUsingKeyFrames

並使用TargetProperty屬性指定動畫控制的屬性為Fill

同時透過Duration屬性設定動畫週期為3秒，設置RepeatBehavior屬性值為Forever

ObjectAnimationUsingKeyFrames添加兩個DiscreteObjectKeyFrame關鍵影格

透過KeyTime屬性設置第一個關鍵影格動畫開始時間為第一秒

第二個關鍵影格動畫開始時間為第二秒

同時每個關鍵影格都指定一個含有三種顏色的漸變色

然後，添加一個名為AnimatedRectangle的Rectangle元素

並添加一個名為Rectangle_Loaded的Loaded事件

最後設置Storyboard元素TargetName屬性值為AnimatedRectangle

將關鍵影格動畫效果定位到Rectangle元素上

接下來開啟【MainPage.xaml.cs】，在Rectangle_Loaded事件中輸入以下程式碼：


private void Rectangle_Loaded(object sender, RoutedEventArgs e)
{
    storyboard.Begin();
}

以上Rectangle_Loaded事件處理方法透過呼叫storyboard對象的Begin方法實現啟動關鍵影格動畫的操作

這是專案的執行畫面：

專案執行的設計畫面

回首頁