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

2014-01-14

926
0
Windows 8 控制項
2014-01-29

BounceEase緩衝動畫可以實現彈跳運動的動畫效果

BounceEase類別的Bounces屬性用來設置彈跳次數

Bounciness屬性用來設置動畫的彈性效果

Bounciness屬性值越小在兩次彈跳間損失的高度就越小，意思就是彈性越強

屬性值越大的話，彈跳就會被抑制

下面透過範例來介紹BounceEase

首先，新增一個專案【BounceEase】，在【MainPage.xaml】中輸入以下程式碼：

   <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Name="storyboard">
                    <DoubleAnimation From="1" To="6" Duration="0:0:3" Storyboard.TargetName="rectScaleTransform" Storyboard.TargetProperty="ScaleY">
                        <DoubleAnimation.EasingFunction>
                            <BounceEase Bounces="5" Bounciness="2" 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="rectScaleTransform" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </StackPanel>
    </Grid>

上面的程式碼，與【BackEase】相似

不同的是，此範例是使用彈跳效果的BounceEase元素

並設置相關的屬性值

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

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

執行專案顯示的畫面：

回首頁