[Windows 8 App]動畫效果-------緩衝動畫(BackEase)

2014-01-14

BackEase緩衝動畫可以實現縮放運動的動畫效果

BackEase類別的Amplitude屬性用來控制緩衝動畫的縮放幅度

Amplitude屬性值越大動畫的縮放幅度就越大，相對的，屬性值越小，幅度就越小

下面透過範例介紹Storyboard動畫中加入BackEase緩衝效果來實現縮放變換的緩衝效果

首先，新增一個專案【BackEase】，開啟【MainPage.xaml】

在【MainPage.xaml】中輸入以下程式碼：

   <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Name="storyboard">
                    <DoubleAnimation From="1" To="2" Duration="0:0:1" Storyboard.TargetName="myScaleTransform" Storyboard.TargetProperty="ScaleX">
                        <DoubleAnimation.EasingFunction>
                            <BackEase Amplitude="8" EasingMode="EaseOut" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </StackPanel.Resources>
            <Rectangle Margin="60" PointerPressed="Pointer_Clicked" Fill="Yellow" Width="100" Height="100" >
                <Rectangle.RenderTransform>
                    <ScaleTransform x:Name="myScaleTransform" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </StackPanel>
    </Grid>

上面的程式碼中，首先添加了一個StackPanel元素

並在StackPanel元素的StackPanel.Resources中添加一個作為動畫資源的Storyboard元素

並命名為 storyboard

接著在Storyboard 元素中添加一個DoubleAnimation動畫

並且設置DoubleAnimation動畫控制ScaleX

ScaleX表示沿著X軸縮放

然後透過Duration屬性設置動畫播放週期為 1 秒

為了給矩形添加緩衝效果

接下來在DoubleAnimation.EasingFunction元素中添加一個BackEase元素

同時設置緩衝方法為EaseOut，定義縮放幅度的Amplitude屬性為 8

接下來繼續添加一個常與寬均為100 px的Rectangle元素

並為其定義一個PointerPressed事件

接著在Rectangle.RenderTransform元素中添加一個名為 myScaleTransform 的ScaleTransform元素

來實現矩形的縮放變形特效

最後，在【MainPage.xaml.cs】中，為PointerPressed事件添加事件處理方法

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

專案執行後產生的動畫如下：

回首頁