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

2013-12-30

1692
0
Windows 8 控制項
2013-12-30

DoubleAnimationUsingKeyFrames關鍵影格動畫一般包含LinearDoubleKeyFrame、SplineDoubleKeyFrame、DiscreateDoubleKeyFrame關鍵影格

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

隨著動畫在時間線上進行，每個關鍵影格都會指定一個特定的值來產生不同的動畫效果

並且透過控制Double類型的屬性值可以使動畫以連接或間斷的方式進行播放

這是這三種關鍵影格的介紹：

LinearDoubleKeyFrame：使元素的屬性值在一段時間內進行固定速度的漸變

即屬性值隨時間的改變而改變，並且這種改變會隨時地反應出來

SplineDoubleKeyFrame：對元素的屬性值進行精確的漸變，透過設定KeySpline屬性值可以控制漸變

產生一個可變的過程

DiscreateDoubleKeyFrame：使元素的屬性值從一個值突變到另一個值，中間不會有任何的漸變或變化過程

下面實做一個DoubleAnimationUsingKeyFrames的範例

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

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

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

    <Grid Background="White">
        <Ellipse x:Name="AnimationEllipse" PointerPressed="AnimationEllipse_Click" Fill="Blue" Width="300" Height="300" />
        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Name="storyboard">
                    <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" 
Storyboard.TargetName="AnimationEllipse" Storyboard.TargetProperty="Width">
                        <LinearDoubleKeyFrame Value="200" KeyTime="0:0:0" />
                        <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="400" KeyTime="0:0:1" />
                        <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="150" KeyTime="0:0:2" />
                    </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
            </StackPanel.Resources>
        </StackPanel>
    </Grid>
</Page>

在上面的程式碼中，先添加一個名為【AnimationEllipse】的Ellipse的元素，設置Fill的屬性為藍色

Width和Height屬性分別為300像素，並添加一個PointerPressed事件及事件處理方法

接著添加一個StackPanel元素中的Storyboard底下添加一個DoubleAnimationUsingKeyFrames動畫

並透過TargetProperty屬性設置動畫控制的目標屬性為Width

由於Width屬性值的變化會影響到介面布局，因此要將EnableDependentAnimation設為True，以確保能夠播放

在關鍵影格動畫DoubleAnimationUsingKeyFrames中添加一個LinearDoubleKeyFrame關鍵影格

並設定Value屬性為100，使用KeyTime屬性指定到關鍵影格Value值的時間為 0 秒

這表示動畫開始時，將Ellipse元素的寬度設為200像素

緊接著，再添加一個SplineDoubleKeyFrame關鍵影格，並設定Value屬性值為400，KeyTime屬性的值為 1

表示在 1 秒時，Ellipse元素的寬度將變為400

前面設計完畢後，開啟【MainPage.xaml.cs】，為AnimationEllipse_Click事件處理方法

程式碼如下：

private void AnimationEllipse_Click(object sender, PointerRoutedEventArgs e)
{
   storyboard.Begin();
}

專案執行畫面：

動畫影片：

回首頁