Understanding of Windows UI animation engine and ui Engine

Understanding of Windows UI animation engine and ui Engine

This article is translated from Nick Waggoner's "Understand what's possible with the Windows UI Animation Engine" and has been authorized by the original author for translation. For more articles about Windows UI and UWP development, visit my blog Origin Site: http://validvoid.net/

In November 2015, the Visual LayerWindows.UI.CompositionA series of new APIs in The namespace are introduced. These new APIs mark the first time developers have the opportunity to access functional features that support various UI frameworks (such as IE/Edge, XAML, and Windows Shell) since Windows 8. An important aspect of the new visual layer is its animation engine. However, after talking a lot about developers at the // build/conference this year, I found that developers still do not know how the various parts of the animation system work together. To help you understand the potential of an animation system, we have two questions:

• Who starts the animation?
• What drives the animation and changes the value?

Implicit vs. explicit-who starts the animation?

The key difference between an explicit animation and an implicit animation is who triggers the animation.

Long term short: you trigger the explicit animation, and you configure the implicit animation.

Explicit Animation

When it comes to animation, most people think of explicit animation. You should be familiar with it. For an explicit animation, after you set it, It is triggered by yourself as a developer.

For example, you can create an animation in a commonly used Markup Language in XAML to trigger the animation in the background code.

Markup Language code:

<Storyboard x:Name="myStoryboard">      <DoubleAnimation From="1" To="6" Duration="00:00:6"                      Storyboard.TargetName="rectScaleTransform"                      Storyboard.TargetProperty="ScaleY">        <DoubleAnimation.EasingFunction>            <BounceEase Bounces="2" EasingMode="EaseOut"                         Bounciness="2" />        </DoubleAnimation.EasingFunction>    </DoubleAnimation></Storyboard>  

 

Background code:

private void OnButtonClick(object sender, RoutedEventArgs e)  {    myStoryboard.Begin();}

 

The animation System in the visual layer also supports explicit animation-although only in your background code. This allows you to use known animation configurations and use them directly.

Background code:

// Obtain the Visual (Visual element object) that represents this UIElement and obtain compositor (SYNTHESIZER object) Visual tempVisual = ElementCompositionPreview. getElementVisual (this); Compositor compositor = tempVisual. compositor; // create a simple ScalarKeyFrameAnimation (scalar Key Frame Animation) ScalarKeyFrameAnimation scalarAnimation = compositor. createScalarKeyFrameAnimation (); scalarAnimation. duration = TimeSpan. fromMilliseconds (300); scalarAnimation. insertKeyFrame (1f, 200f); // start the animation tempVisual explicitly. startAnimation ("Offset. X ", scalarAnimation );

 

The above examples share the same pattern. First, you define the animation (that is, the animation duration, motion track, Target attribute, and value), and then use the start/begin method to explicitly trigger the animation.

Implicit Animation

Compared with explicit animation, implicit animation is triggered by the platform. For example, the following code demonstrates how to append a button in XAMLEntranceThemeTransition:

<Button Content="EntranceThemeTransition Button">      <Button.Transitions>        <TransitionCollection>            <EntranceThemeTransition />        </TransitionCollection>    </Button.Transitions></Button>  

 

This is all the code required to achieve the effect. When a button is displayed for the first time, it triggersEntranceThemeTransitionTo make it animated to the target position. Before the visual layer appears, you have only a handful of implicit animations to choose from, that is, the XAML Transitions, which is almost impossible to configure. The visual layer not only supports implicit animation, but also gives you more customization space:

// Create a ing table to store trigger/animation pairing. ImplicitAnimationMap implicitAnimationCollection = _ compositor. CreateImplicitAnimationMap (); // create an animation to run. Var _ offsetKeyFrameAnimation = _ compositor. createVector3KeyFrameAnimation (); _ offsetKeyFrameAnimation. insertExpressionKeyFrame (1.0f, "this. finalValue "); _ offsetKeyFrameAnimation. duration = TimeSpan. fromSeconds (3); // sets the animation to run when the Offest (trigger) changes. ImplicitAnimationCollection ["Offset"] = _ offsetKeyFrameAnimation; // apply implicit animation. MyVisual. ImplicitAnimations = implicitAnimationCollection;

 

According to this Code, whenevermyVisualOffset of changes,_offsetKeyFrameAnimationWill be triggered by the platform. Note thatExpressionKeyFrame, That is, the expression key frame. Expression key frame allows you to set mathematical expressions. The animation system calculates the value of this expression when playing each frame of an Expression Animation (ExpressionAnimations. In our example, we use a simple expressionthis.FinalValueOnly the value of the animation trigger condition. This animation is just a very basic example, but you can use expressions to define any animation you want.

The flexibility of implicit animation on the visual layer allows you to separate application logic from animation, and provides a powerful way to customize your experience. For example, a good use of implicit animation is to set a trigger for "Offset", so that you can create a transition effect from one layout to another, this effect is automatically triggered by the XAML Layout Engine.

It is a good start to learn more about Implicit animation at the // build/conference.

Professional tool-What driver animation? Time-driven animation

Time-driven animation is a classic animation that developers are familiar with and love. The code snippet above demonstrates the storyboard animation of XAML and the Key Frame Animation of composition, all of which are time-driven animations. The idea behind the Key Frame Animation (actually the Standard) Is that you specify the target values for all animations at a specific time and describe how these values are transitioned (usually an interpolation or easing function ). XAML provides a large number of built-in easing functions to help you easily achieve beautiful animations. In the visual layer, the CubicBezierEasingFunction class is responsible for providing the slow-moving effect (meaning the three-time besell slow-moving function ).CubicBezierEasingFunctionTwo control points are used to control the motion track. Control Points allow you to control interpolation in fine granularity. In addition, given that the beiser curve description is widely used in various animation engines, you can easily get a lot of predefined Control Point solutions with good results. I usually use Easings.net to obtain the control point of standard smoothing function 1.

Reference drive animation (mathematical drive)

In the 10586 update of Windows 10, November, ExpressionAnimation (Expression Animation) was introduced into the animation engine of the visual layer. Expression Animation allows you to create mathematical relationships between attributes updated between frames in the animation system. Parallax animation is a classic Expression Animation:

// Create the expression for driving the parallax animation. ExpressionAnimation parallaxAnimation = compositor. CreateExpressionAnimation ("MyForeground. Offset. Y/MyParallaxRatio"); // you can specify the speed at which you want the background to scroll. ParallaxAnimation. SetScalarParameter ("MyParallaxRatio", 0.5f); // you can specify a foreground object reference. ParallaxAnimation. SetReferenceParameter ("MyForeground", foregroundVisual); // start the animation on the background object. BackgroundVisual. StartAnimation ("Offset. Y", parallaxAnimation );

 

The first thing this Code does is to create a mathematical expression that describes the relationship between input and animation results. The expression defines several parameters and references for assigning values later. Parameters help you configure mathematical relationships, but references are the focus of expression flexibility. A parameter (for exampleMyParallaxRatioIs to call a function of the specified type (for exampleSetScalarParameter. This action notifies the animation engine to evaluate all instances of this parameter based on the value you passed in. The evaluate action only occurs once before the animation is processed by the engine. Therefore, this is a good way to specify the constant value. Conversely, a reference (for exampleMyForeground) Is calculated by the animation engine at each frame. This is exactly the magic that actually makes Expression Animation smart.

There are also two points to note. First, you will notice that we can accessMyForegroundAndYSub-channel. The expression syntax allows access to members and "mix" or exchange the components of a vector/matrix. For example:

// Reuse the X channel of offset to create a Vector2 animation. ExpressionAnimation vector2Animation = compositor. CreateExpressionAnimation ("MyForeground. Offset. X"); // you can specify a reference to a foreground object. Vector2Animation. SetReferenceParameter ("MyForeground", foregroundVisual );

 

In addition, all animations on the visual layer are actually templates. This means that you can use the same animation for multiple objects or reuse the animation structure, and update parameters and references only before the animation of the next object starts. For example, if we want to extend the basic parallax animation and add multi-layer depth of field effects, we only need an animation definition:

// Create an animation for the expression that drives the parallax scroll. ExpressionAnimation parallaxAnimation = compositor. CreateExpressionAnimation ("MyForeground. Offset. Y/MyParallaxRatio"); // set foreground object reference. ParallaxAnimation. SetReferenceParameter ("MyForeground", foregroundVisual); // sets the background object parallax scrolling speed. ParallaxAnimation. SetScalarParameter ("MyParallaxRatio", 0.5f); // animation of the background object. BackgroundVisual. StartAnimation ("Offset. Y", parallaxAnimation); // you can specify the parallax scrolling speed of a remote background object. ParallaxAnimation. SetScalarParameter ("MyParallaxRatio", 0.2f); // starts an animation on a distant background object. DeepBackgroundVisual. StartAnimation ("Offset. Y", parallaxAnimation );

 

Expression Animation is a new and powerful animation method that allows us to express how objects are relatively moving. Expression Animation saves us the trouble of setting a series of complex animations, making it easier to coordinate multiple objects and attributes. For more information about Expression Animation, see // build:

Pnames: Using Expression Animations to Create Engaging & Custom UI

Input driver Animation

Since touch became mainstream about five years ago, creating a low-latency experience has become a common demand. Using fingers or pens on the screen allows the human eye to gain a more intuitive reference point to identify the operation delay and smoothness. To ensure smooth operation, mainstream operating system companies all hand over more operations to the system and GPU (such as Chrome and IE) for execution. In Windows, DirectManipulation is more or less implemented by animation engines built on touch. It solves the key latency challenge, that is, how to naturally demonstrate the dynamic effects of the transition from input-driven to event-driven. But on the other hand, it almost does not provide support for custom inertial views, just like a Ford T-car-"as long as the car is black, you can paint it in any color you like ". 2

ElementCompositionPreview.GetScrollViewerManipulationPropertySetIt is the first step that allows you to drive the effects of game input. Although it still does not give you any additional control over the view when the content is scrolling, it does allow you to apply Expression Animation to the secondary content. For example, we can finally complete our basic parallax rolling code:

// Create an animation for the expression that drives the parallax scroll. ExpressionAnimation parallaxAnimation = compositor. CreateExpressionAnimation ("MyForeground. Offset. Y/MyParallaxRatio"); // you can specify a reference to a foreground object. CompositionPropertySet MyPropertySet = ElementCompositionPreview. ParallaxAnimation. SetScalarParameter ("MyParallaxRatio", 0.5f); // starts a parallax animation on the background object. BackgroundVisual. StartAnimation ("Offset. Y", parallaxAnimation );

 

With this technique, you can achieve a variety of excellent effects: parallax scroll, viscous header, custom scroll bar, and so on. The only thing missing is the perception of custom operations ......

Let's take a look.InteractionTracker. This brand-new design gives you the flexibility to control all aspects of Operation perception while ensuring a low latency experience for finger operation. On Windows UI platform, we often talk about the trade-off between convenience and feasibility. Conventional UX And call modes are encapsulated into easy-to-use advanced controls and features. This makes them easy to use, but it also loses flexibility. The other end of the scale is the encapsulation of the Graphics Layer. They allow you to completely control the rendering of each pixel on the screen, but also bring more complexity. In the design of input processing,InteractionTrackerMore inclined to the feasibility side. On Windows UI platform, you can map input to output in descriptive form to specific dynamic effects for the first time.

Here we use a simple example to demonstrate this new flexibility by modifying the Ending position of inertia. In the past, you specified one of the four Snap-points types to modifyScrollViewerInertia. Now,InteractionTrackerMore possibilities are provided. You can use Expression Animation to define where inertia ends. In the following example, three different Alignment Points are created based on the natural stop position of inertia:

// Create an inertial endpoint. Its condition and end point are near the panel. // Enter the variable after the public variable is updated later. Var snapNearConditionExpression = s_compositor.CreateExpressionAnimation ("target. position. X <-target. completionThreshold "); var snapNearValueExpression = s_compositor.CreateExpressionAnimation ("-target. completedOffset "); var snapNearEndpoint = InteractionTrackerInertiaRestingValue. create (s_compositor); snapNearEndpoint. condition = snapNearConditionExpression; snapNearEndpoint. restingValue = snapNe ArValueExpression; // create an inertial endpoint. Its condition and end point are on the far side of the Panel. // Enter the variable after the public variable is updated later. Var snapFarConditionExpression = s_compositor.CreateExpressionAnimation ("target. position. x> target. completionThreshold "); var snapFarValueExpression = s_compositor.CreateExpressionAnimation (" target. completedOffset "); var snapFarEndpoint = InteractionTrackerInertiaRestingValue. create (s_compositor); snapFarEndpoint. condition = snapFarConditionExpression; snapFarEndpoint. restingValue = snapFarValueExp Ression; // create a total inertial control endpoint for controlling the rest state if no other inertial modifier takes effect. Var snapHomeEndpoint = InteractionTrackerInertiaRestingValue. create (s_compositor); snapHomeEndpoint. condition = s_compositor.CreateExpressionAnimation ("true"); snapHomeEndpoint. restingValue = s_compositor.CreateExpressionAnimation ("0"); // Insert the attribute referenced by the inertial endpoint expression. Values (nameof (CompletedOffset), (float) m_completedOffset); values (nameof (CompletionThreshold), (float) m_completionThreshold); values (new records [] {snapNearEndpoint, snapFarEndpoint, snapHomeEndpoint });

 

In fact, you can not only modify the Ending position of inertia as in the example, but also modify the trajectory of inertial motion effects.InteractionTrackerThis allows you to precisely customize the visual experience that reflects the symbolic experience. To learn more aboutInteractionTrackerFor the potential and usage, see:

P405: Adding Manipulations in the Visual Layer to Create Customized & Responsive Interactive Experiences

How to go further?

If you haven't checked the WindowsUIDevLabs code repository, you should check it now. The repository introduction is as follows:

Welcome to the code repository of the Windows UI development lab. This library contains the latest sample code, sample projects, and feedback from developers who use Windows UI to develop various exquisite UWP applications.

As the next stop for deep understanding of Windows UI, this code repository is a good place to get a deep understanding of the platform and various assistance code.

Note:

About the author

Nick Waggoner, the original author of this article, works for Microsoft native Windows UI platform (@ WindowsUI ).

Author blog: http://www.nickwaggoner.com/www.nickwaggoner.com/

Original Author Twitter: @ nrwaggs

This article has been authorized by the original author for translation. I will continue to translate articles on UWP and Windows UI published by Nick Waggoner in my blog or other locations.