[Wp8.1ui Control Programming] Selection of the Windows phone animation scheme

8.1 Selection of animation schemes

There are linear interpolation animations (3 types), Keyframe animations (4 types) and frame animations, and even timer animations, and the animated UI element properties can be normal UI element properties, transform effects properties, and three-dimensional effects properties. Faced with so many choices, we want to achieve an animation effect how to think about the idea of animation implementation and how to choose the implementation of the technology? Then we will first explain the animation performance-related knowledge, and then explain how to choose the implementation of the animation scheme.

8.1.1 Frame rate

The frame rate is a measure of the number of frames displayed, measured in frames per second (frame per second,fps, framerate) or "Hertz", which is the number of frames per second that are refreshed and can be understood as the graphics processor can refresh several times per second. Because of the special physiological structure of human eyes, if the frame rate of the picture is higher than about 10-12 frames per second, it will be considered coherent. For animations, the frame rate is often used to measure the smoothness of an animation, and the greater the number of frame rates indicates the higher the animation's fluency. In the implementation of Windows Phone animation, we are not able to directly specify the animation frame rate, the animation frame rate is automatically assigned by the system, when the performance of the phone better, the better the performance of the program, then the animation frame rate is greater, the smaller the reverse. So to determine whether an animation can run smoothly, we need to focus on whether the animation's frame rate indicator is high enough.

Although the frame rate of the animation cannot be set directly inside the Windows Phone, it can be measured. When you run an app in the Windows Phone emulator, you can use the frame rate counter to monitor the performance and animation efficiency of your app, as shown in 8.1 of the simulator, with each frame rate counter as shown in table 8.1. Of course, the same frame rate counter can be displayed on the phone, it is very important to test these counters on a real Windows phone phone, because the performance of the simulator is very different from the real phone. There are recommended thresholds and upper thresholds for each counter value, as shown in table 8.2, when the counter indicates a potential performance problem in the red value threshold interval, which requires attention, your animation's implementation may have a larger problem and need to be optimized.

Table 8.2 Recommended frame and fill rates

Counter	Red Threshold value *	Recommended values	Upper threshold value
Composition Thread frame rate	30 frames per second	45 frames per second	60 frames per second
UI Thread Frame rate	15 frames per second	30 frames per second	60 frames per second
Screen fill Rate	>3	<= 2.5	3.0

Then the frame rate counter can be enabled or disabled in code, and when you create a Windows phone app project in Visual Studio, the code that enables the frame rate counter is added by default in file App.xaml.cs. The code looks like this:

if (System.Diagnostics.Debugger.IsAttached)

{

This. Debugsettings.enableframeratecounter = true;

}

The above code indicates that the frame rate counter will be enabled when the debug state is started debugging the application. Where Application.Current.Host.Settings.EnableFrameRateCounter = True indicates that the frame rate counter is enabled and set to False disables the frame rate counter.

8.1.2 UI thread and composition thread

The graphics threading structure of Windows Phone is optimized for phones, and the Windows Phone supports the composition thread in addition to the UI thread. To learn how to choose the optimal animation implementation, it is important to understand the UI thread and the composition thread in the Windows Phone, which is essential for animation optimization.

(1 ) UI Threads

The UI thread is the main thread in Windows Phone, and the primary task of the UI thread is to parse and create objects from XAML, draw all visual effects when the visual is first drawn, and process each frame callback and execute other user code. Maintaining a lightweight UI thread in your application is a prerequisite for smooth application operation, and it is the same for animation implementations, so try to avoid consuming the UI thread.

(2) composition thread

The composition thread can handle some of the work on the UI, thereby sharing part of the UI thread and improving the performance of the Windows Phone app. On the Windows Phone, the composition thread works by merging the graphics textures and passing them to the GPU for drawing, and the GPU on the phone automatically caches and processes the animations that run on the composition thread in a process called automatic caching. The composition thread handles animations associated with transform effects (RenderTransform) and three-dimensional effects (Projection) properties, such as for ScaleTransform, TranslateTransform, The storyboard animations of RotateTransform and Planeprojection properties are completely running on the composition thread. In addition, the Opacity and Clip property settings are also handled by the composition thread. However, if you use opacitymask or non-rectangular clips, these actions are passed to the UI thread.

(3) animations and Threads

From the role of the composition thread to know that the storyboard animation is handled by the composition thread, this animation works best because the composition thread passes the animations to the GPU for processing. If you need to use the UI thread in an animation, such as changing the With property of a UI element, then you need to set the Enabledependentanimation property of the corresponding animation object to True, which indicates whether the animation needs to depend on the UI thread to run. In addition, if the CPU is overloaded, the composition thread may run more frequently than the UI thread. However, sometimes storyboard animations do not achieve your animated effect, you can choose to drive the animation in the code, such as using frame-based animation. These animations are processed by frames, each frame callback is processed on the UI thread, the animation is updated at the same speed as the UI thread processing animation, and the fluency of the animation may be lower than the animation that runs on the composition thread depending on other actions that occur in the app. Also, when using frame-based animations to update animations in code, UI elements do not automatically cache as they are updated in storyboard animations, which in turn adds to the burden on the UI thread.

8.1.3 Choosing the Best animation scheme

The previous chapter we explained a lot of animation into the knowledge, these are the Windows Phone Animation Programming Foundation, is so-called original aim, no matter you want to achieve the animation understand complex, are inseparable from these basic knowledge. When we are going to achieve an animated effect, we first need to think about each of the elements in the animation, think about their changes, think about what properties of the UI elements to achieve the effect of animation, think about what type of animation to implement. When you have thought of a variety of ways to achieve this animation effect, you can measure your implementation from two aspects, on the one hand, from the aspect of performance efficiency, which involves the frame rate of the previous animation, the UI thread and the composition thread-related knowledge, on the other hand, from the complexity of the animation implementation, For example, to achieve a very complex shape of the shapes of the animation, you can directly use the path graph to draw out the graph, and then design the path graph point motion animation, you can also use a number of similar images to do the picture switch animation, if the picture switch animation effect can achieve the effect you want, Then it is recommended to use the image switch in this simple way to achieve.

There are several scenarios for animating in Windows Phone, and there are some suggestions for choosing these options.

(1) You can use the transformation effect attributes or three-dimensional effect properties to achieve the animation, should try to use the transformation effect attributes or three-dimensional special effects properties as animation changes to achieve animation properties. Because the transform effect attribute or the three-dimensional effect attribute is a function of the UI element through the composition thread, it does not block the UI thread or re-invoke the UI's layout system.

(2) Animations that can be implemented using linear interpolation animation/Keyframe animations are implemented using linear interpolation animation/Keyframe animations, because linear interpolation animation/Keyframe animations are the best way to implement animations, and they are also run on the composition thread itself.

(3) When using linear interpolation animation/Keyframe animation can not be achieved when the animation effect should be implemented based on frame animation, rather than a custom timer to achieve animation, based on frame animation than timer animation, it can dynamically jump frame calls according to device and application situation.

Below we demonstrate in two different ways to achieve the same animation effect, the implementation of the animation effect is to let the height of the rectangle slowly into the original twice times, the first way is to use linear interpolation animation to the height property of the rectangle animation, the second way is also linear interpolation animation, But the target property for the animation is the ScaleY property of ScaleTransform, and then we use a button click event to block the UI thread for 2 seconds, and we can see that the animation for the height property pauses for 2 seconds before continuing to run. The ScaleY property for ScaleTransform is not affected by the UI thread blocking. The sample code looks like this:

Code Listing 8-1 : Impact of two animations on the UI thread (source code: 8th Chapter \examples_8_1)

 
Main code of MainPage.xaml file
-------------------------------------------------- -------------------------------------------------- --------------
    <Page.Resources>
        <Storyboard x: Name = "heightStoryboard">
            <!-Animation for the Height property->
            <DoubleAnimation Storyboard.TargetName = "rectangle1" Storyboard.TargetProperty = "Height" RepeatBehavior = "Forever" EnableDependentAnimation = "True" From = "100" To = "200" Duration = "0: 0: 2">
            </ DoubleAnimation>
        </ Storyboard>
        <Storyboard x: Name = "scaleTransformStoryboard">
            <!-Animation for ScaleY property of ScaleTransform->
            <DoubleAnimation Storyboard.TargetName = "scaleTransform1" Storyboard.TargetProperty = "ScaleY" RepeatBehavior = "Forever" From = "1" To = "2" Duration = "0: 0: 2">
            </ DoubleAnimation>
        </ Storyboard>
    </ Page.Resources>
    <StackPanel>
        <Button Content = "Block UI thread" Click = "Button_Click_1"> </ Button>
        <Button x: Name = "heightAnimationButton" Content = "Height property animation" Click = "heightAnimationButton_Click_1"> </ Button>
        <Button x: Name = "scaleTransformAnimationButton" Content = "ScaleTransform attribute animation" Click = "scaleTransformAnimationButton_Click_1"> </ Button>
        <Rectangle Height = "100" Fill = "Blue" x: Name = "rectangle1">
            <Rectangle.RenderTransform>
                <ScaleTransform x: Name = "scaleTransform1"> </ ScaleTransform>
            </Rectangle.RenderTransform>
        </ Rectangle>
    </ StackPanel>
Main code of MainPage.xaml.cs file
-------------------------------------------------- -------------------------------------------------- --------------
    private void Button_Click_1 (object sender, RoutedEventArgs e)
    {
        // Block the UI thread for 2 seconds
        Task.Delay (2000) .Wait ();
    }
    private void heightAnimationButton_Click_1 (object sender, RoutedEventArgs e)
    {
        // Play the animation that changes the height attribute, the height changes from 100 to 200
        scaleTransformStoryboard.Stop ();
        heightStoryboard.Begin ();
    }
    private void scaleTransformAnimationButton_Click_1 (object sender, RoutedEventArgs e)
    {
        // Play the animation that changes the transform attribute, hold it and zoom in 2 times along the X axis
        heightStoryboard.Stop ();
        scaleTransformStoryboard.Begin ();
    }

Source code Download: Http://vdisk.weibo.com/s/zt_pyrfNHoezI