[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();
}
}
}