Metro Style App :动画概要

构建Metro Style App,动画只是可选元素,但是如果构建让人惊艳的App 动画是不可或缺元素,在Metro Style App中 有丰富的动画元素供我们选择,帮助我们构建伟大的APP.

      Metro Style App 的常规动画和WPF /Silverlight /WP7 无异,所以不再累述,园子有很多优秀的文章 但是有若干新特性你需要注意

1.独立和依赖动画(Independent and Dependent animations  

     Metro Style App 为动画优化了很多,把动画元素分成了独立动画和依赖动画 ,即独立于UI线程的动画和依赖UI线程的动画 ,由于官方没有文档说明,这里只能把个人推测交流下,若有错误请各位矫正 : )

在这里需要引出一个可能大家都不是很关注的线程----构图线程. 在原来SL4.0 or WP7.0 时代 所有动画属性全部放在UI线程上处理,在某些情况下可能会造成UI阻塞,处于这点MS在SL5.0 和WP7.1在UI线程基础上 加入一个新的动画线程 构图线程(Composition Thread) 负责处理 透明度,和变换的动画 充分利用GPU性能减少UI线程压力 

构图线程处理与 P:System.Windows.UIElement.RenderTransform 和 P:System.Windows.UIElement.Projection属性关联的简单动画。以下列表显示构图线程通常处理的动画。

• T:System.Windows.Media.ScaleTransform

• T:System.Windows.Media.TranslateTransform

• T:System.Windows.Media.RotateTransform

• T:System.Windows.Media.PlaneProjection 

• From MSDN

基于上述,我们可以大胆假设 ,这个独立线程就是构图线程或者和构图线程相似功能的线程,主旨意在提高动画效率,减少UI线程压力

为了证明这一点不如我们尝试一下,假设当我们视图修改UI元素的Width时,我们可能这样写

            Storyboard bord = new Storyboard();
            DoubleAnimation dbl = new DoubleAnimation();
            dbl.To = 100;
            dbl.Duration = DurationHelper.FromTimeSpan(TimeSpan.FromMilliseconds(300));
            Storyboard.SetTarget(dbl, myRectangle);
            Storyboard.SetTargetProperty(dbl, "(Rectangle.Width)");
            bord.Children.Add(dbl);
            bord.Begin();

在以前是OK 没有问题的,但是在  Metro Style App中会发现这段代码无法生效, 再让我们看下这段代码运行于哪个线程

            Storyboard bord = new Storyboard();
            DoubleAnimation dbl = new DoubleAnimation();
            dbl.To = 100;
            dbl.Duration = DurationHelper.FromTimeSpan(TimeSpan.FromMilliseconds(300));
            Storyboard.SetTarget(dbl, myRectangle);
           

var UiState= dbl.EnableDependentAnimation;

            Storyboard.SetTargetProperty(dbl, "(Rectangle.Width)");
            bord.Children.Add(dbl);
            bord.Begin();

              关于EnableDependentAnimation,如果为Ture则表明动画是运行于UI线程动画,False 则不可以用于UI线程动画,断点的结果 果然为False

为了保证我们的动画打到预期效果在此可以设置

  dbl.EnableDependentAnimation=true;

这样就可以打到效果,但是关于独立和依赖的动画 需要园又们 大力发掘,

2. 主题动画&主题过度(ThemeAnimation&ThemeTransition)

这个就比较简单,就是系统内置了一套动画,相关属性以及被设置完毕,我们只需简单调用即可,在这里主题动画和主题过度的调用有些细微差别

  对于主题动画我们需要放在资源中

    <Page.Resources>
        <Storyboard x:Name="PopInStoryboard">
            <PopInThemeAnimation  Storyboard.TargetName="contentViewBorder" 
                              FromHorizontalOffset="400"/>
        </Storyboard>
        <Storyboard x:Name="PopOutStoryboard">
            <PopOutThemeAnimation  Storyboard.TargetName="contentViewBorder"    />
        </Storyboard>
    </Page.Resources>

然后在后置代码中调用    PopInStoryboard.Begin();即可

对于主题过度则相过简单

         <Button Width="200" Height="40" Click="button_click" Content="Pop in" >
                <Button.Transitions>
                    <TransitionCollection>
                        <EntranceThemeTransition FromHorizontalOffset="150"/>
                    </TransitionCollection>
                </Button.Transitions>
            </Button>

无需后置代码调用 自动运行

 

关于主题动画和过度 在这里可以看到更多 ,只要是Theme开头的都可以进行调用

http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/br243232.aspx

enjoy~