博客园客户端UAP开发随笔 -- App的心动杀手锏：动画

前言

在前面一篇“新年快乐”的随笔中，我们介绍了WinRT中的简单动画实现。其实在使用Windows/Windows Phone时，我们都会看到一些动画，最简单的比如按下一个button时，该button的状态变化就是动画的一种。再比如弹出式窗口或菜单，也是一种动画。WinRT中的动画种类很多，但是分类有点儿让初学者摸不着头脑：主题过渡，主题动画，视觉转换，情节提要动画。这些我们就不说了，这里主要说说自定义动画，或者说是情节提要动画（Storyboard Animation)，因为这种动画是我们要常用的。

但是在一个非游戏类的App中添加动画是有原则的：在UI状态之间进行快速流畅的过渡，但不会使用户分心；超出用户的预期，但是又不会让用户厌烦。当然最大的前提是你的App的基本功能比较完美。如果有两个App实现了相同的功能，一个有动画，一个没有，你会喜欢哪个呢？答案显而易见。况且在WinRT中，动画实现比较简单，效果又很好，所以just do it!

今天我们按实现方式介绍三类动画：单一动画，复合动画，关键帧动画。其中还分别介绍了用XAML/Code如何实现动画。

收藏页面中的动画 - 单一动画

在这个页中，点击三个蓝色的收藏类别条（分类/博主/博文），都会触发两个动画：

1）类别条本身做360度的X轴旋转

2）对应的类别条下方的ListView做FadeIn/FadeOut的显示/隐藏过渡

用XAML定义动画

先说360度旋转的做法。我们定义一个Template Control，然后在该Control的Style中定义动画：

<Style TargetType="local:FavoriteGroupControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:FavoriteGroupControl">
                    <Grid x:Name="grid_Header" Height="60" Background="{ThemeResource CNBlogsThemeColor}">
                        <Grid.Projection>
                            <PlaneProjection/>
                        </Grid.Projection>
                        <Grid.Resources>
                            <Storyboard x:Name="sb_Roll">
                                <DoubleAnimation Storyboard.TargetName="grid_Header"                               Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)"
From="0" To="360" Duration="0:0:00.50"/>
                            </Storyboard>
                        </Grid.Resources>

……
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我去掉了不重要的部分，只留下了要说明的部分，完整代码请看Windows Phone project中的Theme/Generic.xaml。

首先要定义<Grid.Projection>属性，<PlaneProjection/>表示该Grid需要做X/Y/Z轴的旋转，这个定义是必须的（如果不定义的话后面会出错）。其次，要在<Grid.Resources>中定义Storyboard，它包含有一个<DoubleAnimation>（在后面的动画中会在一个Storyboard中包含多个DoubleAnimation）。

再看DoubleAnimation的细节：

1) Storyboard.TargetName指明我们要对名字叫做gird_Header的控件下毒手

2）Storyboard.TargetPrpoerty指明了我们要玩弄那个控件的PlaneProjection.RotationX属性

3）From/To指明了要把该控件旋转一周即360度

4）Duraion指明在0.5秒内完成

好了，动画定义好了，如何触发呢？在MainPage.xaml中，你可以找到以下代码段：

<local:FavoriteGroupControl x:Name="fgc_Category" Tapped="sp_category_Tapped" Margin="0,10"/>

这里定义了一个sp_category_Tapped事件，顺藤摸瓜，我们在MainPage.xaml.cs中找到以下代码：

private void sp_category_Tapped(object sender, TappedRoutedEventArgs e)
{
            this.fg_Category.Tapped();
}

请注意！一个控件的内置动画只应该在其内部触发，而不是由外部控制。所以，这次摸的瓜是个傻瓜:) 真正的触发动画的Code应该在FavoriteGroupControl.cs中找：

protected override void OnTapped(TappedRoutedEventArgs e)
{
    Storyboard sb = this.GetTemplateChild("sb_Roll") as Storyboard;
    if (sb != null)
    {
        sb.Begin();
    }
}

它先根据名称“sb_Roll”获得Storyboard的实例sb，然后调用其Begin()方法使其开始旋转。在XAML中定义的Storyboard，都要通过事件处理代码调用Begin()来激活动画。

这里有两点要说明：

1）为什么用动画？因为凡是在用户点击屏幕时，我们都应该给予视觉上的响应，免得心急的用户狂点屏幕造成手指受伤，作为程序员的我们要有爱心

2）为什么用旋转动画？因为我喜欢，就让我任性一次吧，不容易啊。当然也可用别的动画，比如斜一下，或者陷下一点儿。

3）为什么在控件内部调用Begin()？因为你给人家提供一个控件，按下后旋转是该控件的预定行为，不要再让使用该控件的人再去管什么动画操作。当然，你也可以提供一个TemplateBinding属性来让使用该控件的人指定是否需要动画，然后在控件内部根据设置调用或不调用动画。

用Code定义动画

该部分第二个动画是显示或隐藏ListView，这次我们用另外一种方法实现的动画，用Code实现，而不是用XAML实现。看code：

class FavoriteGroup
    {
        bool ShowListView = true;
        ListView lvDetail;
        Storyboard sbShow, sbHide;

        public FavoriteGroup(ListView lv)
        {
            this.lvDetail = lv;
            CreateStoryboard();
            this.sbHide.Completed += sbHide_Completed;
        }

        private void sbHide_Completed(object sender, object e)
        {
            this.lvDetail.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        }

        public void Tapped()
        {
            this.ShowListView = !this.ShowListView;
            if (this.ShowListView)
            {
                this.lvDetail.Opacity = 0;
                this.lvDetail.Visibility = Windows.UI.Xaml.Visibility.Visible;
                this.sbShow.Begin();
            }
            else
            {
                this.sbHide.Begin();
            }
        }

        private void CreateStoryboard()
        {
            // show listview in 1 second
            DoubleAnimation daShow = new DoubleAnimation();
            daShow.From = 0;
            daShow.To = 1;
            daShow.Duration = new Windows.UI.Xaml.Duration(TimeSpan.FromSeconds(1));

            this.sbShow = new Storyboard();
            sbShow.Children.Add(daShow);
            Storyboard.SetTarget(daShow, this.lvDetail);
            Storyboard.SetTargetProperty(daShow, "Opacity");

            // hide listview in 1 second
            DoubleAnimation daHide = new DoubleAnimation();
            daHide.From = 1;
            daHide.To = 0;
            daHide.Duration = new Windows.UI.Xaml.Duration(TimeSpan.FromSeconds(1));

            this.sbHide = new Storyboard();
            sbHide.Children.Add(daHide);
            Storyboard.SetTarget(daHide, this.lvDetail);
            Storyboard.SetTargetProperty(daHide, "Opacity");
        }

    }

在构造函数中，调用了CreateStoryboard()方法，首先定义了两个Storyboard，在每个Storyboard中定义了一个DoubleAnimation，一个是用1秒时间把ListView的Opacity值从0变到1（显示），另一个是用1秒时间把Opacity从1变到0（隐藏）。上面的写法等价于这个XAML:

<Storyboard x:Name="sbShow">
    <DoubleAnimation Storyboard.TargetName="lvDetail"
                                  Storyboard.TargetProperty="Opacity"
                                  From="0" To="1" Duraion="0:0:1"/>
</Storyboard>
<Storyboard x:Name="sbHide">
    <DoubleAnimation Storyboard.TargetName="lvDetail"
                                  Storyboard.TargetProperty="Opacity"
                                  From="1" To="0" Duraion="0:0:1"/>
</Storyboard>

为什么在这里不用XAML写法而用Code直接定义呢？是为了显示技巧吗？你猜对啦！因为在MainPage.xaml中，有三个ListView，分别为lv_category, lv_author, lv_blog，如果要用XAML定义动画，要对这个三个ListView各写一遍，重复了三次，只是ListView的名字不同，太难看啦！注意素质！于是搞了一个FavoriteGroup类（可能名字不太好，叫刺杀金xx怎么样？），里面用code包了一下，把ListView作为参数传入，就可以复用code啦。哎，纯属刁民小技，让各位看官见笑了。

Setting页面中About的动画 - 复合动画

我们再看看稍微复杂些的动画：在一个Storyboard中包含多个DoubleAnimatoin。

<Storyboard x:Name="sb_LogoMoveUp">
            <DoubleAnimation Duration="0:0:0.8"
                             From="200"
                             Storyboard.TargetName="image_Logo"
                             Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetY)"
                             To="0" />
            <DoubleAnimation Duration="0:0:0.8"
                             From="360"
                             Storyboard.TargetName="image_Logo"
                             Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"
                             To="0" />
            <DoubleAnimation Duration="0:0:0.8"
                             From="0"
                             Storyboard.TargetName="image_Logo"
                             Storyboard.TargetProperty="Opacity"
                             To="1" />
        </Storyboard>

在SettingsPage.xaml中，我们在sb_LogoMoveUp的Storyboard中定义了三个动画：

1）把image_Logo上移200个像素

2）让image_Logo旋转360度

3）让image_Logo透明度从0变成1

以上三个动画同时进行，都是在0.8秒内完成，于是我们看到了那个图片从下方“滚动”（不是滑动）到上方，并逐渐清晰，整个过程很是优雅大方，毕竟滚动摩擦比滑动摩擦小很多（扯远了），不拖泥带水，很有节操的。

要说明几点：

1）用复合动画，可以对一个控件的不同属性进行同时操作，以形成单一动画无法完成的复杂效果。比如我们是对image_Logo的三个属性同时进行操作。当然也可以不同时，用BeginTime属性来设置一下启动时间即可。

2）在这里为什么要用动画？因为我喜欢超出用户的预期，给他们以动态视觉享受，而不是干巴巴的看着一个图片发呆。用户一高兴，没准儿就给个好评了。

Windows 8.1版本中的PostControl动画 - 关键帧动画

大家可以查看Windows 8.1 project的Theme/Generic.xaml看完整代码。

在这个Control中，左边那个图，点击右侧箭头，将会向左滑动，成为右边那个样子。

这个滑动过程不是线性的，因此要用到关键帧，意思是说：在某个时间点，做这件事；到下一个时间点，再做那件事。看下面的XAML代码：

<Storyboard x:Name="sb_Button_out">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SecondViewTrans"
    Storyboard.TargetProperty="X" BeginTime="0:0:0">
    <SplineDoubleKeyFrame  KeyTime="00:00:00.00" Value="480"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.10" Value="460"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.20" Value="400"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.30" Value="300"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.40" Value="170"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.50" Value="0"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.54" Value="32"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.58" Value="60"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.62" Value="80"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.66" Value="92"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.70" Value="96"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.74" Value="92"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.78" Value="80"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.82" Value="60"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.86" Value="32"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.90" Value="0"/>
</DoubleAnimationUsingKeyFrames>

</Storyboard>

其中的那个<SplineDoubleKeyFram>就是关键帧的定义，在每个时间点，都定义了目标控件的X位置。可以看到第6个关键帧，X值已经是0了，为什么又从0变大了呢？这样就产生了触底反弹的效果，让目标控件弹回到最大96的位置，最后再回到0。

需要注意的是，关键帧只能对某个控件的唯一的一个属性操作，不能同时操作多个属性。而在上一节的复合动画中，是对某个控件的多个属性同时操作，但是不能对某个属性定义两次DoubleAnimation。这个要牢记。

小结

哦，办公室已经自动关灯了，看样子该给公家省电了，拍屁股回家吧。但是大家要记住哟，动画不能乱用，不能让用户讨厌，不能人为影响系统流畅度，不能影响系统性能。

比如在博客园UAP的WP版本中，我们在很多小地方使用了动画，比如热门页中下拉ListView时右上角的数字变化，博主页中下拉ListView时页面标题的变化，等等。这些动画都是和当前的操作密切相关的，但它们又不会强烈吸引用户注意。

在“新年快乐”页中，是故意要展示一下一些东西，所以做了很多动画。另外，在“新年快乐”页中，还用到了不使用Storyboard/DoubleAnimation/KeyFrame等技术，而是用纯code操作XAML元素的位置来制作的动画（游戏开发的基本功），我们后面再聊！

 

分享代码，改变世界！

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/博客园-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

GitHub open source link:

https://github.com/MS-UAP/cnblogs-UAP

MSDN Sample Code:

https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab

 

MS-UAP

2015/1/9