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

2014-01-14

剛剛上一篇介紹過BackEase緩衝動畫

當中的EasingMode屬性是 EaseOut

這裡我們介紹另外兩個屬性

首先，第一個屬性值是 EaseIn

EaseOut 是向右產生動畫效果

那 EaseIn 的話是相反的，EaseIn是向左產生動畫

我們用程式碼來解釋

首先，我們先新增一個專案【EasingMode】，開啟【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="EaseIn" />
                        </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>

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

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

這是EaseIn 所產生的動畫效果

那我們將這行程式碼中的EasingMode屬性值改成EaseInOut

在執行專案看看，又是另一種的動畫效果

回首頁