Metro style app: animation Overview

Animation is only an optional element for building the metro style app. However, if an amazing app animation is built, there are a variety of animation elements in the Metro style app for us to choose from, help us build great apps.

The conventional animations of the metro style app are the same as those of WPF, Silverlight, and WP7, so I will not talk about them again. There are many excellent articles in the garden, but you need to pay attention to some new features.

 

1. Independent and dependent animation (IndependentAndDependentAnimations

The Metro style app has been optimized a lot for animation. It divides the animation elements into independent animation and dependent animation, that is, the animation independent of the UI thread and the animation dependent on the UI thread. Since there is no official documentation, I can only share my speculation here. If there are any errors, please correct them :)

Here we need to introduce a thread that may not be of great concern to everyone-the diagram thread. in the sl4.0 or wp7.0 era, all animation attributes are processed on the UI thread. In some cases, UI blocking may occur, at this point, Ms adds a new animation thread composition thread (composition thread) to sl5.0 and wp7.1 Based on the UI thread to handle transparency, and the transformed animation fully utilizes GPU performance to reduce the pressure on the UI thread.

The composition thread processes simple animations associated with the P: system. Windows. uielement. rendertransform and P: system. Windows. uielement. Projection attributes. The following list shows the animations normally processed by the diagram thread.

• T: system. Windows. Media. scaletransform

• T: system. Windows. Media. translatetransform

• T: system. Windows. Media. rotatetransform

• T: system. Windows. Media. planeprojection

• From msdn

Based on the above, we can boldly assume that this independent thread is a component thread or a thread with similar functions as the component thread. It aims to improve the animation efficiency and reduce the pressure on the UI thread.

To prove this, let's try it. Suppose that when we modify the width of the UI element in the view, we may write

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

It was okay before, but in the Metro style app, the Code cannot take effect. Let's see which thread the code runs on.

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

For enabledependentanimation, if it is true, it indicates that the animation is running on the UI thread animation. If it is false, it cannot be used for UI thread animation. the breakpoint result is false.

To ensure the expected effect of the animation, you can set it here.

  dbl.EnableDependentAnimation=true;

 

In this way, the effect can be achieved, but the independent and dependent animation needs to be explored by the park,

2. themeanimation & themetransition)

This is relatively simple, that is, the system has a built-in set of animations, relevant attributes, and the settings have been completed. We only need to make a simple call. Here, there are some slight differences between the over-called thematic animation and the over-called thematic animation.

We need to place theme animations in resources.

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

Then, call popinstoryboard. Begin (); In the post code.

Too much theme is too simple

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

 

 

No need for post-code calls to run automatically

 

Here we can see more theme animations and excessive animations, which can be called as long as they start with theme.

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

 

Enjoy ~