[Windows 8 App]Storyboard-------移動的動畫效果

2013-12-30

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

如果產生的動畫影像了介面的布局

例如改變了元素的寬度、高度或者是改變了元素的位置

此時要將動畫對象的EnableDependentAnimation屬性設為True

這樣子才能確保動畫正常播放

下面針對這種情況做了一個範例

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

這是【MainPage.xaml】的完整程式碼：


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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Canvas>
            <Canvas.Resources>
                <Storyboard x:Name="storyboard">
                    <PointAnimation EnableDependentAnimation="True" Storyboard.TargetProperty="Center" Storyboard.TargetName="AnimatedEllipseGeometry" Duration="0:0:5" From="30,600" To="900,30" RepeatBehavior="Forever"/>
                </Storyboard>
            </Canvas.Resources>
        </Canvas>
        <Path Fill="Red">
            <Path.Data>
                <EllipseGeometry x:Name="AnimatedEllipseGeometry" Center="30,600" RadiusX="30" RadiusY="30" />
            </Path.Data>
        </Path>
        <StackPanel Orientation="Horizontal" Margin="174,270,-154,-270">
            <Button Click="Animation_Begin" Width="266" Height="142" FontSize="50" Margin="2,292,2,334" Content="開始動畫" />
            <Button Click="Animation_Resume" Width="254" Height="142" FontSize="50" Margin="2,292,2,334" Content="恢復動畫" />
                <Button Click="Animation_Stop" Width="249" Height="142" FontSize="50" Margin="2,292,2,334" Content="停止動畫" />
                    <Button Click="Animation_Pause" Width="266" Height="142" FontSize="50" Margin="2,292,2,334" Content="暫停動畫" />
        </StackPanel>
    </Grid>
</Page>

首先在Canvs元素的Canvas.Resources中添加一個Storyboard元素

接著在Stotyboard元素中添加一個PointAnimation動畫

並設定PointAnimation動畫控制的屬性為Center

定義From屬性的座標為(30,600)

To屬性的座標為(900,30)

然後又在Grid的最後面添加一個StackPanel元素，其中含有四個按鈕

四個按鈕都定義了Click事件，包含了啟動、暫停、恢復、停止動畫等功能

以便控制動畫的播放狀態

接著，開啟【MainPage.xaml.cs】為這四個按鈕添加事件處理方法：


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

        private void Animation_Pause(object sender, RoutedEventArgs e)
        {
            storyboard.Pause();
        }

        private void Animation_Resume(object sender, RoutedEventArgs e)
        {
            storyboard.Resume();
        }

        private void Animation_Stop(object sender, RoutedEventArgs e)
        {
            storyboard.Stop();
        }

執行專案的畫面：

動畫影片：

回首頁