[Windows 8 App]Storyboard------插值動畫

2013-12-29

[Windows 8 App]Story------插值動畫

插值動畫支持DoubleAnimation、ColorAnimation和PointAnimation類型的動畫

其中較常使用的是DoubleAnimation動畫，它可以用來控制介面元素的Double類型屬性的動態變化

而使元素在介面是呈現我們期望的動畫效果

ColorAnimation和PointAnimation動畫與DoubleAnimation相似

透過改變元素的Color與Point類型的屬性值就可以實現這兩種動畫

下面是DoubleAnimation、ColorAnimation和PointAnimation的共有屬性

Duration：指定一次完整的動畫週期，Duration的格式是＂小時：分鐘：秒＂

AutoReverse：指定時間表在達到Duration屬性指定的終點後是否倒退

RepeatBehavior：指定動畫的播放次數

接下來以DoubleAnimation動畫做範例：

新增一個專案【DoubleAnimation】，開啟【MainPage.xaml】

下面是Grid的程式碼：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Name="storyboard" >
                    <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" RepeatBehavior="Forever" Duration="0:0:5">                        
                    </DoubleAnimation>
                </Storyboard>
            </StackPanel.Resources>            
        </StackPanel>
        <Ellipse x:Name="ellipse" Fill="White" PointerPressed="Animation_Begin" Height="300" Width="300" Margin="200,200,200,200" />
    </Grid>

在Storyboard元素中，添加了一個DoubleAnimation動畫

並設置DoubleAnimation動畫控制的屬性為Opacity

接著設定From屬性值為 1

To的屬性值為 0

表示Opacity屬性值會從 1 變到 0 ，即產生由亮到暗的效果

分別設置動畫對象DoubleAnimation的AutoReverse和RepeatBehavior屬性值為True和Forever

這樣子就可以無限次的播放下去，完成Storyboard元素屬性後

下面設置一個Ellipse元素作為動畫目標

設置Ellipse元素的PointerPressed事件，當觸發此事件會啟動動畫

這是【MainPage.xaml.cs】的PointerPressed事件程式碼：

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

專案執行的畫面：

影片：

回首頁