您的位置: 首页  >  IT文章  >  [Win8]Windows8开发札记（十一）：动画故事版 StoryBoard的入门介绍

[Win8]Windows8开发札记（十一）：动画故事版 StoryBoard的入门介绍

分类: IT文章 • 2022-05-30 10:28:28
[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();
        }
    }
}



相关推荐