Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to use MotionLayout to achieve the effect of Arena of Valor's regiment battle". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Detailed explanation of animation effect function "

MotionLayout is a type of layout that helps you manage motion and widget animation in your application. MotionLayout is a subclass of ConstraintLayout and is built on the basis of its rich layout functions.

"

As described above, MotionLayout is a subclass of ConstraintLayout, which is equivalent to ConstraintLayout with animation. The advantage of MotionLayout as an animation control is that there is almost no need to write java code, all done in the xml file. And we only need to set the start position, the end position and some intermediate states to automatically generate animation.

Let's first analyze our regiment war, which is mainly divided into three scenarios:

Hou Yi shot decisively and hit Arthur, who was walking crazily. Da Ji and Zhong Wuyan crouched in the grass at the same time and saw Hou Yi's wonderful archery coming out of the grass to prepare for the big fight. Da Ji 2 skills dizzy opposite Luban No.7, a set of skills plus Zhong Wuyan's big move, will opposite two heroes KO. Scene one

Contains controls: Hou Yi, Arthur, Lu Ban, Hou Yi's arrow animation description: Arthur, Hou Yi archery

First of all, in the layout file, add the first MotionLayout and all the controls. Hou Yi and Lu Ban need to write position constraints because they are in a static state. Other controls containing animation can not write position constraints for the time being:

Because MotionLayout inherits from ConstraintLayout, you can use the properties of ConstraintLayout. You can see that there are two new properties:

App:layoutDescription, which represents the animation scene corresponding to the MotionLayout, refers to a MotionScene (XML resource file), which includes all motion animation descriptions of the corresponding layout. App:showPaths, this property represents whether the motion path is displayed when the motion is going on, that is, whether the path of all animations is displayed. The default is false. You can also set whether or not to display the animation path in the code, and the setDebugMode method can pass in the MotionLayout.DEBUG_SHOW_PATH attribute. Hou Yi archery

Next, you can write an animated scene (MotionScene) and create a new res-xml-scene_01.xml.

As you can see, MotionScene has two main tags, Transition and ConstraintSet

Transition, including the basic definition of motion, in which motion:constraintSetStart and motion:constraintSetEnd refer to the start state and end state of the motion. Respectively, corresponding to the configuration of the following ConstraintSet. App:duration represents the time it takes to complete the exercise. ConstraintSet, the set of endpoint constraints for multiple controls. For example, here are two ConstraintSet that represent the start constraint set and the end constraint set, respectively.

Where the Constraint attribute specifies the location and attribute of an element in the endpoint location:

All ConstraintLayout attributes are supported. Basic view attributes such as alpha,rotation,visibility,translationX,scaleX are supported. Custom attributes are supported, represented by the child tag CustomAttribute, such as Little Chestnut:

The attributeName attribute matches objects with getter and setter methods. For example, backgroundColor here corresponds to the basic methods getBackgroundColor () and setBackgroundColor () of view itself.

All right, back to the descendants, since Hou Yi's arrow is from Hou Yi to Arthur, we set the two end states of the rear arrow. Once configured, MotionLayout will automatically generate the animation from the start state to the end state for us. After the arrow flies from Hou Yi position to Arthur position. Wait, why didn't you respond to the operation? How does the animation trigger?

Motion provides three animation trigger methods: 1) onClick tag, which indicates that you click on a control in the scene to trigger the animation effect. There are two properties.

App:targetId, which represents the view app:clickAction to trigger the animation, and represents the effect of the click, for example, toggle (loop animation), transitionToStart (transition to the start state)

2) OnSwipe tag, which indicates that the animation is controlled by the user's touch, and there is a feeling of gesture sliding.

App:touchAnchorId, which represents a view that you can slide and drag. App:touchAnchorSide indicates which side to start dragging. App:dragDirection indicates the direction of progress of the drag. For example, dragRight means when you drag (slide) to the right. App:onTouchUp means to act when the gesture is raised. For example, stop means that the view animation stops when the gesture is raised.

3) java code control.

MotionLayout.transitionToEnd (), transition the animation to the end position. MotionLayout.setTransitionListener, listen to the animation.

Here we will set up the animation triggered by clicking Hou Yi:

All right, run, click on Hou Yi, Hou Yi's arrow successfully shot out.

But this is not enough, after the arrow to the position of Arthur will certainly disappear, how to say that this disappeared? With transparency, directly setting the transparency of the end position to 0 will disappear.

Android:alpha= "0"

Look at the effect:

Houyi_arrow_alhpa.gif

There still seems to be something wrong. The arrow disappears when it is in the air, and the effect we want is to shoot Arthur before it disappears. This is because the animation is evenly distributed to each point in time according to the process of transition from the start point to the end point, so he will slowly linearly change the transparency from the beginning until it disappears completely.

What should I do? The Keyframe KeyFrameSet is about to be used.

KeyFrameSet keyframes, you can set a key position or attribute during animation. After keyframing, MotionLayout smoothly moves the view from the starting point to each intermediate point, and then to the final target position. So here, we need to set two key attributes: 1) when you shoot Arthur, the transparency of the arrow is still 1. 2) when shooting at Arthur, the transparency was changed to 0.

KeyAttribute is the tag that sets the key attributes, where

App:framePosition represents the position of the Keyframe, which is equivalent to a percentage. App:motionTarget indicates that it acts on that view

When it is set up in this way, the animation of the rear arrow is completed.

Arthur, who walked crazily.

When it comes to Arthur, Arthur's animation effect is to be shot. So first set the position of Arthur, walk from a distance to the position where he was shot.

As you can see, an endpoint state can place multiple control properties.

Put Arthur's start and end state, and then set crazy position, how to do? -- KeyCycle

KeyCycle, Loop Keyframe, can add vibration to the animation, which is actually a waveform, such as sin,cos. Here we will set a sin curve to Arthur as the path of movement. Also put under the Keyframe KeyFrameSet tag.

App:waveShape indicates the type of fluctuation, for example, sin,cosapp:wavePeriod represents the fluctuation period, for example, 0.5 represents half of the sin period, which can be understood as 0.5 vibrations.

All right, the first scene is done, let's see how it works:

Scene two

Contains controls: Da Ji, Zhong Wuyan Animation description: Da Ji and Zhong Wuyan coming out of the grass

This scene mainly describes Da Ji and Zhong Wuyan crouching in the grass. After seeing Hou Yi shooting arrows, they walked out of the grass to get ready to pick up skills. Go directly to the code:

/ / scene_02.xml

Here, I want to give Zhong Wuyan an alien position, that is, first walk in the grass and then come out. At this time, another Keyframe tag, KeyPosition, will be used.

KeyPosition, which represents the position of the Keyframe, that is, a point that must be passed by the animation. This property adjusts the default motion path.

1) motion:percentX and motion:percentY specify where the view should go. The keyPositionType property specifies how these values are interpreted.

2) there are three settings for keyPositionType

ParentRelative, relative to the position of the parent view, x is the horizontal axis (0 left-1 right), y is the vertical axis (0 top-1 bottom). For example, to set the position to the middle right end, set app:percentY= "0.5" app:percentX= "1". DeltaRelative, relative to the distance the view moves in the whole motion sequence, (0) is the starting position of the view and (1) is the end position of the view. X is the horizontal axis, y is the vertical axis, the pathRelative,x axis direction is the direction in which the view moves within the path range, 0-bit view start position, and 1 is the end position (that is, the x-axis is the connecting line between the start and end points). The y axis is perpendicular to the x axis, with positive values on the left side of the path and negative values on the right side. So, compared with deltaRelative, this is the difference between the x axis and the Y axis, the same is according to the start position to the end position as the reference.

Here we give Zhong Wuyan a parentRelative.

Finally, add two heroes coming out of the grass, from translucent to opaque:

Scene 3

Contains controls: Da Ji's 1st Skill, Da Ji's 2nd Skill, Zhong Wuyan animation description: Zhong Wuyan flashes into the crowd using a big move around, Da Ji 2nd Skill dizzy Lu Ban, 1st Skill follow.

Zhong Wuyan flashed, I used the way to disappear and reappear, that is, to change the alpha. Zhong Wuyan's big trick is android:rotationY, which is set to rotate around the y-axis.

Da Ji's 1st Skill and 2nd Skill both use ordinary positions to move, pay attention to control transparency, that is, appear and disappear. The above code:

/ / scene_03.xml

/ / .

Practical application scenario

In fact, you can find that Motionlayout animation is really easy to achieve, greatly improving the efficiency of development, which is also the original intention of jetpack component development. However, Motionlayout still has shortcomings, such as directly through the xml code, can not set the convergence of animation, set the sequence of animation. So what exactly is the motionlayout application scenario?

As a transition animation, motionlayout should be suitable for some animations such as control switching and interface changes. For example, when you switch DrawerLayout,viewpager, you can animate some view transitions. There is a case of motion animation similar to youtube on the official website. I moved here to talk about it briefly. Let's see the effect first.

Youtube-motion2.gif

The effect is good, especially the slippery feeling of gesture sliding, which is so cool that it used to take at least half an hour to do this kind of animation. I have a headache when I think about it. Now, MotionLayout:so easy.

Let's analyze it together:

Contains controls: top layout control topLayout (including top picture topImage, playback button topPlay, close button topClose), middle layout midlayout (including text part midView), lower menu control bottomView

Animation description (some specific values are known from the code):

The topLayout is attached to the parent position from the top and changes to the top of the lower bottomView. The height changes from 320dp to 54dp. TopImage from the full parent layout, to the final length unfilled shop (the length is set to 2.5 times the height), the height is 2dp above and below the parent layout. Keyframe: when the progress is 90%, it is still full, and then slowly reduce the length. The topPlay,topClose never displays (alhpa is 0) to the final display is complete (alhpa is 1). Keyframe: at 90% progress, the opacity is still 10% (alpha0.1), and then slowly become opaque. Midlayout, white layout, from the bottom attached to the parent layout to the top of the bottomView, this layout is to make the toplayout down more natural, because the recycleview will become completely transparent, you need this white layout transition to make the animation more complete. MidView, from the position below the toplayout to the last coincident with the toplayout, the transparency is not transparent to completely transparent. Keyframe: when it reaches 75% progress, it is completely transparent. BottomView, from below the parent layout view (not visible) to the bottom of the parent layout (visible)

That's all, analyze the start position and end position of each layout, and then adjust the Keyframe. A transition animation layout that follows the gesture is complete. Post the key code of MotionScene. If you want to see the complete source code, you can take it from the attachment at the end of the article. Both the official website case and my demo are included.

Here are a few new attributes:

Motion:curveFit, which indicates which line track is used to pass through the Keyframe, the default is spline, which is more sleek. This is to set the linear to a straight line transition, because it is a straight line, so it doesn't matter. Motion:percentWidth, which represents the relative size of the view. A value of 0-1 represents the width of the initial position and 1 represents the width of the end position. A value of 0 here means that the width reaches that position or is the same as the original width. Motion:motionInterpolator, which represents the interpolator of the animation. The linear here is a linear motion, and you can also set the bounce spring motion and so on. About transition animation

About the transition animation, in fact, it also existed before-- TransitionManager. TransitionManager can provide transition animation between different scenes, you need to set two scenes (layout files), and then the corresponding control id in the two scenes should be matched. Finally, the transition animation is performed through the java code.

The previous code:

/ / the layout of the two scenes

/ / scene one

/ / scene two

/ / get the scene, start the animation between scenes, and change from scene one to scene two

Val sceneRoot: ViewGroup = findViewById (R.id.scene_root)

Val aScene: Scene = Scene.getSceneForLayout (sceneRoot, R.layout.a_scene, this)

Val anotherScene: Scene = Scene.getSceneForLayout (sceneRoot, R.layout.another_scene, this)

Titletv.setOnClickListener {

TransitionManager.go (anotherScene)

}

Why, it is quite similar to MotionLayout, and the train of thought is pretty much the same. The transition animation is completed through the controls of different scenes. So the question is, if there is, why do you need a MotionLayout?

The former (TransitionManager) cannot be keyframed, and the animation has only two states. MotionLayout is free to set keyframes, set different positions, properties, and so on. The former can not follow the gesture to slide, MotionLayout is much more silky. MotionLayout can complete the entire animation with xml code without calling a single line of java code. The former layout controls repeat too much, need different xml files, write repetitive controls. "how to use MotionLayout to achieve Arena of Valor regiment battle effect" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.