Metro Style App :动画概要

最新推荐文章于 2021-05-25 22:03:38 发布

墨鱼精

最新推荐文章于 2021-05-25 22:03:38 发布

阅读量719

点赞数

Windows8 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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>