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