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

This article introduces the relevant knowledge of "how to achieve the basis of Material Component animation". 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!

Elasticity and damping

Physical animation, as its name implies, is an animation effect based on the laws of physics. It actually refers to the deformation process of the spring, that is, Hooke's law. This type of animation is often called Spring Animation. In fact, there is a very detailed document in a very inconspicuous corner on the official website, as shown below.

Https://developer.android.com/guide/topics/graphics/spring-animation#add-support-library

For Spring Animation, there are usually two commonly used scenarios, namely elasticity and damping. Elasticity defines the nonlinear process in which an object returns to a certain state, while damping defines the nonlinear resistance of a dragging object.

About the design definition of Spring, you can refer to this article https://zhuanlan.zhihu.com/p/127266926.

Elasticity

First, let's take a look at the implementation of elasticity. First, you need to introduce Google's Spring implementation library, as shown below.

Api 'androidx.dynamicanimation:dynamicanimation:1.0.0'

To use SpringAnimation is actually very simple, define SpringAnimation, without even setting parameters, here is the simplest example to demonstrate how to use SpringAnimation, the code is as follows.

Class MainActivity: AppCompatActivity () {

Var offsetX: Float = 0f

Var offsetY: Float = 0f

@ SuppressLint ("ClickableViewAccessibility")

Override fun onCreate (savedInstanceState: Bundle?) {

Super.onCreate (savedInstanceState)

SetContentView (R.layout.activity_main)

Test.setOnTouchListener {v, event->

When (event.action) {

MotionEvent.ACTION_DOWN-> {

OffsetX = event.rawX

OffsetY = event.rawY

}

MotionEvent.ACTION_MOVE-> {

Test.translationX = event.rawX-offsetX

Test.translationY = event.rawY-offsetY

}

MotionEvent.ACTION_UP-> {

SpringAnimation (test, DynamicAnimation.TRANSLATION_Y). Apply {

Spring = SpringForce (). Apply {

/ / dampingRatio = DAMPING_RATIO_NO_BOUNCY

/ / stiffness = SpringForce.STIFFNESS_VERY_LOW

}

AnimateToFinalPosition (0f)

}

SpringAnimation (test, DynamicAnimation.TRANSLATION_X). Apply {

Spring = SpringForce (). Apply {

/ / dampingRatio = DAMPING_RATIO_NO_BOUNCY

/ / stiffness = SpringForce.STIFFNESS_VERY_LOW

}

AnimateToFinalPosition (0f)

}

}

}

True

}

}

}

The above code defines a View that can be dragged and changed its position. When ACTION_UP is executed, the defined SpringAnimation,SpringAnimation needs several parameters, namely, TargetView, the property to execute the animation, and the final property value, while animation can be started by calling start (), or calling the animateToFinalPosition () method. The difference between them is whether the finalPosition is set, as shown in the figure.

Slide-min

The elastic effect is achieved in a few simple lines of code.

Which attributes

Animation based on the Spring property can change the actual properties of the View on the screen, thereby adding animation to the View. The following properties are supported in the system.

ALPHA: represents the Alpha transparency of the view. This value defaults to 1 (opaque), and a value of 0 indicates full transparency (invisible). TRANSLATION_X, TRANSLATION_Y, and TRANSLATION_Z: these properties are used to control the location of the view, and the values are the increments of the left coordinates, top coordinates, and height set by the view's layout container. TRANSLATION_X represents the left coordinates. TRANSLATION_Y represents the top coordinates. TRANSLATION_Z represents the depth of the view relative to its height. ROTATION, ROTATION_X, and ROTATION_Y: these properties control the 2D (rotation property) and 3D rotation of the view around the pivot point. SCROLL_X and SCROLL_Y: these properties represent the scroll offset in pixels of the view from the left and top edges of the source, respectively. It also represents the position in terms of the distance the page scrolls. SCALE_X and SCALE_Y: these properties control the 2D scaling of the view around its pivot point. X, Y, and Z: these are basic practical properties that describe the final position of the view in the container. X is the sum of the left value and TRANSLATION_X. Y is the sum of the top value and TRANSLATION_Y. Z is the sum of the height value and TRANSLATION_Z.

In fact, it is basically consistent with the default attribute value of attribute animation, and its essence is to achieve the Spring effect with the help of attribute animation.

Monitor

Like attribute animation, Spring Animation can also monitor the life cycle of its animation, and the system provides OnAnimationUpdateListener and OnAnimationEndListener to listen for animation.

Set it through addUpdateListener, and the code is as follows.

Anim.addUpdateListener {_, value, _-> anim.animateToFinalPosition (value)}

Correspondingly, the system provides removeUpdateListener () and removeEndListener () methods to remove listening.

SpringForce

Corresponding to an elastic system, SpringForce is the encapsulation of various parameters that describe the elastic system.

SpringForce: defines the spring characteristics of the animation. There are four key parameters:

FinalPosition: rest position.

Stiffness: that is, the spring constant, the elastic coefficient of the object.

DampingRatio: damping ratio. The oscillation attenuation process of the system after disturbance is described.

Velocity: the initial speed of motion.

Among these four parameters, finalPosition is used to describe the position where the animation finally stops, while velocity is used to describe the initial speed of object movement. by default, velocity is 0, and the system provides a setStartVelocity () method to change this initial speed. In most cases, we do not have to modify it.

The remaining two properties, stiffness and dampingRatio, are the core configuration parameters of Spring Animation.

Damping ratio dampingRatio

The damping ratio is used to describe the gradual attenuation of spring vibration. By using the damping ratio, you can define how fast the vibration attenuates from one bounce to the next.

When the damping ratio is greater than 1, the over-damping phenomenon will occur. It quickly returns the object to its rest position. When the damping ratio is equal to 1, the critical damping phenomenon occurs. This returns the object to its rest position in the shortest possible time. When the damping ratio is less than 1, the underdamping phenomenon occurs. This causes the object to pass through and past the rest position multiple times, and then gradually reach the rest position. When the damping ratio is equal to 00:00, the undamped phenomenon will occur. This will make the object vibrate forever.

In general, you first need to call the getSpring () method to get the current parameters, and then set the damping ratio to be added to the spring by calling the setDampingRatio () method.

The system also defines some commonly used dampingRatio.

DAMPING_RATIO_HIGH_BOUNCY effect:

High_bounce-min

DAMPING_RATIO_MEDIUM_BOUNCY effect:

Medium_bounce-min

DAMPING_RATIO_LOW_BOUNCY effect:

Low_bounce-min

DAMPING_RATIO_NO_BOUNCY effect:

No_bounce-min

I believe that through GIF, you can quickly understand its meaning.

Stiffness stiffness

Stiffness defines the spring constant used to measure the strength of the spring. The stiffness value is set by the setStiffness () method, and similarly, the system defines some default stiffness constants.

STIFFNESS_HIGH effect:

High_stiffness-min

STIFFNESS_MEDIUM effect:

Medium_stiffness-min

STIFFNESS_LOW effect:

Low_stiffness-min

STIFFNESS_VERY_LOW effect:

Very_low_stiffness-min damping

Another common scene of physical animation is to create a pull damping effect, compared with stiff control, through damping to set the pull effect, the animation will be more in line with the laws of physics and make the animation more elegant. However, to set up damping animation, in fact, we do not need Google's Spring Animation, we can achieve the damping effect through a function, in fact, the so-called damping, that is, in the pulling process, the linear pull distance is transformed into a nonlinear decreasing function through a function transformation, and the slope of the decreasing function, that is, the strength of damping, there are many such functions, one of which is introduced here.

Damping effect

Private fun doDamping (value: Float): Float {

Return if (value

< 0) -sqrt((100f * abs(value)).toDouble()).toFloat() else sqrt((100f * value).toDouble()).toFloat() } 通过这样一个变换，就可以实现阻尼效果。 例如我们将第一个场景中的拉动效果来增加阻尼效果，只需要在Move的过程中，不断改变偏移量即可，代码如下所示。 MotionEvent.ACTION_MOVE ->

{

Test.translationX = doDamping (event.rawX-offsetX)

Test.translationY = doDamping (event.rawY-offsetY)

}

Then with the help of such a function, it is very convenient to achieve the transformation effect, as shown in the figure.

Zuni-min other

In addition to the previous exceptions, here are some examples of the use of other properties.

Rotation animation

Set the ROTATION property, as shown below.

Test.setOnTouchListener {view, event->

Val centerX = view.width / 2.0

Val centerY = view.height / 2.0

Val x = event.x

Val y = event.y

Fun updateRotation () {

CurrentRotation = view.rotation + Math.toDegrees (atan2 (x-centerX, centerY-y)) .toFloat ()

}

When (event.actionMasked) {

MotionEvent.ACTION_DOWN-> updateRotation ()

MotionEvent.ACTION_MOVE-> {

PreviousRotation = currentRotation

UpdateRotation ()

Val angle = currentRotation-previousRotation

View.rotation + = angle

}

MotionEvent.ACTION_UP-> SpringAnimation (

Test

DynamicAnimation.ROTATION

) .animateToFinalPosition (0f)

}

True

}

The effect is as follows.

Rotate-min Zoom

Set the SCALE_X and SCALE_Y properties, as shown below.

ScaleGestureDetector = ScaleGestureDetector (this

Object: ScaleGestureDetector.SimpleOnScaleGestureListener () {

Override fun onScale (detector: ScaleGestureDetector): Boolean {

ScaleFactor * = detector.scaleFactor

Test.scaleX * = scaleFactor

Test.scaleY * = scaleFactor

Return true

}

})

Test.setOnTouchListener {_, event->

If (event.action = = MotionEvent.ACTION_UP) {

SpringAnimation (test, DynamicAnimation.SCALE_X) .animateToFinalPosition (1f)

SpringAnimation (test, DynamicAnimation.SCALE_Y) .animateToFinalPosition (1f)

} else {

ScaleGestureDetector.onTouchEvent (event)

}

True

}

The effect is shown in the figure.

Scale-min shift

Set up TRANSLATION_Y to achieve the animation of View, as shown in the following code.

Override fun onCreate (savedInstanceState: Bundle?) {

Super.onCreate (savedInstanceState)

SetContentView (R.layout.activity_main)

Test.translationY = 1600f

SpringAnimation (test, SpringAnimation.TRANSLATION_Y, 0f). Apply {

Spring.stiffness = SpringForce.STIFFNESS_VERY_LOW

Spring.dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY

SetStartVelocity (- 2000f)

Start ()

}

}

The effect is as follows.

Up-minKTX

In KTX, Google is also based on Spring Animation and provides some extension functions to further simplify the use of Spring, as shown below.

This is the end of the introduction of implementation "androidx.dynamicanimation:dynamicanimation-ktx:1.0.0-alpha03" and "how to achieve the basis of Material Component Animation". 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.