[Win8]Windows8開發筆記（十一）：動畫故事版 StoryBoard的入門介紹

建立一個項目叫做：TestAnimation用來測試動畫StoryBoard的使用。

在上面拖拽一個Button來做實驗。

 

<Page    x:Class="TestAnimation.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestAnimation"    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}">        <Button Content="Button" HorizontalAlignment="Left" Margin="200,100,0,0" VerticalAlignment="Top">            <Button.RenderTransform>                <ScaleTransform x:Name="st1">                                    </ScaleTransform>            </Button.RenderTransform>        </Button>    </Grid></Page>

然後在前面聲明一個StoryBoard的資源：

 

 

    <Page.Resources>        <Storyboard x:Name="sb1">            <DoubleAnimation Storyboard.TargetName="st1"                              Storyboard.TargetProperty="ScaleX" From="0" To="10">            </DoubleAnimation>            </Storyboard>    </Page.Resources>

雙擊button添加監聽，啟動動畫，使得點擊按鈕的時候按鈕的寬度變化10倍。

 

 

        private void Button_Click_1(object sender, RoutedEventArgs e)        {            sb1.Begin();        }

運行項目就可以看到效果了。

 

當然，動畫不僅僅局限於RenderTransform，也可以用在映射上。

 

<Page    x:Class="TestAnimation.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestAnimation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <Storyboard x:Name="sb1">            <DoubleAnimation Storyboard.TargetName="st1"                              Storyboard.TargetProperty="ScaleX" From="0" To="10">            </DoubleAnimation>        </Storyboard>        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360">            </DoubleAnimation>        </Storyboard>    </Page.Resources>        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <Button Content="Button" HorizontalAlignment="Left" Margin="200,100,0,0" VerticalAlignment="Top" Click="Button_Click_1">            <Button.RenderTransform>                <ScaleTransform x:Name="st1">                </ScaleTransform>            </Button.RenderTransform>            <Button.Projection>                <PlaneProjection x:Name="pp1" RotationY="30">                </PlaneProjection>            </Button.Projection>        </Button>    </Grid></Page>

多個動畫可以同時播放-。-因為Begin不是阻塞的。

 

但是動畫的時間是多少呢？具體的細節又是怎麼樣的呢？

這些我們都可以定製。

比如Duration可以規定動畫在多少時間內播放完畢：

 

<Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360"                              Duration="00:00:03">            </DoubleAnimation>        </Storyboard>

比如AutoReverse是否自動反向播放：

 

 

        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360"                              Duration="00:00:03" AutoReverse="True">            </DoubleAnimation>        </Storyboard>

比如RepeatBehavior設定成Forever或3x可以重複播放：

 

 

        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360"                              Duration="00:00:03" RepeatBehavior="Forever">            </DoubleAnimation>        </Storyboard>

除了前面說到的還有其他的模式。

 

比如：EasingFunction，這是DoubleAnimation的一個屬性，

其中的BounceEase是一種彈簧的效果，BackEase大家也可以自己嘗試。

 

        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="pp1"                              Storyboard.TargetProperty="RotationY" From="0" To="360"                              Duration="00:00:01" RepeatBehavior="3x">                <DoubleAnimation.EasingFunction>                    <BackEase>                    </BackEase>                </DoubleAnimation.EasingFunction>            </DoubleAnimation>        </Storyboard>

用DoubleAnimation可以實現圖片的立體旋轉，閃光的文字，標題的字幕效果，實現點擊按鈕滑動出對話方塊。

 

接下來說一下動畫的順序播放的問題。

比如這段代碼：

 

<Page    x:Class="TestAnimation.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestAnimation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <Storyboard x:Name="sb1">            <DoubleAnimation Storyboard.TargetName="st1"                              Storyboard.TargetProperty="ScaleX" From="1" To="2">            </DoubleAnimation>        </Storyboard>        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="st1"                              Storyboard.TargetProperty="ScaleY" From="1" To="2">            </DoubleAnimation>        </Storyboard>    </Page.Resources>    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <Button Content="Button" HorizontalAlignment="Left" Margin="200,100,0,0" VerticalAlignment="Top" Click="Button_Click_1" />        <Image Source="頭像.jpg" HorizontalAlignment="Center" Height="100"                VerticalAlignment="Center" Width="100" Name="image">            <Image.RenderTransform>                <ScaleTransform x:Name="st1" />            </Image.RenderTransform>        </Image>    </Grid></Page>

 

如果同時對ScaleX和ScaleY操作，如果想橫向縱向一起變化，怎麼辦呢？

給第一個動畫添加Conpleted事件即可：

 

<Page    x:Class="TestAnimation.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestAnimation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <Storyboard x:Name="sb1">            <DoubleAnimation Storyboard.TargetName="st1" Completed="DoubleAnimation_Completed_1"                             Storyboard.TargetProperty="ScaleX" From="1" To="2">            </DoubleAnimation>        </Storyboard>        <Storyboard x:Name="sb2">            <DoubleAnimation Storyboard.TargetName="st1"                              Storyboard.TargetProperty="ScaleY" From="1" To="2">            </DoubleAnimation>        </Storyboard>    </Page.Resources>    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <Button Content="Button" HorizontalAlignment="Left" Margin="200,100,0,0" VerticalAlignment="Top" Click="Button_Click_1" />        <Image Source="頭像.jpg" HorizontalAlignment="Center" Height="100"                VerticalAlignment="Center" Width="100" Name="image">            <Image.RenderTransform>                <ScaleTransform x:Name="st1" />            </Image.RenderTransform>        </Image>    </Grid></Page>

然後在後台代碼添加對應的處理：

 

 

using System;using System.Collections.Generic;using System.IO;using System.Linq;using Windows.Foundation;using Windows.Foundation.Collections;using Windows.UI.Xaml;using Windows.UI.Xaml.Controls;using Windows.UI.Xaml.Controls.Primitives;using Windows.UI.Xaml.Data;using Windows.UI.Xaml.Input;using Windows.UI.Xaml.Media;using Windows.UI.Xaml.Navigation;// “空白頁”項目範本在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介紹namespace TestAnimation{    /// <summary>    /// 可用於自身或導航至 Frame 內部的空白頁。    /// </summary>    public sealed partial class MainPage : Page    {        public MainPage()        {            this.InitializeComponent();        }        /// <summary>        /// 在此頁將要在 Frame 中顯示時進行調用。        /// </summary>        /// <param name="e">描述如何訪問此頁的事件數目據。Parameter        /// 屬性通常用於配置頁。</param>        protected override void OnNavigatedTo(NavigationEventArgs e)        {        }        private void Button_Click_1(object sender, RoutedEventArgs e)        {            sb1.Begin();        }        private void DoubleAnimation_Completed_1(object sender, object e)        {            sb2.Begin();        }    }}