Animation and transition (4), using Layout, offset, layoutParam to achieve displacement animation

Android animation and Overview covers the following:

• Animation and transition (I), view animation overview and use
• Animation and Transition (2). View Animation: Define and extend Animation
• Animation and transition (III), interpolators and estimators overview and use
• Animation and transition (4), using Layout, offset, layoutParam to achieve displacement animation
• Animation and transition (five), using scrollTo, scrollBy, Scroller to achieve rolling animation
• Animation and transition (6), using ViewDragHelper to achieve smooth drag animation
• Add an entry animation to a ViewGroup and a LayoutAnimation
• Animation and transition (8), for Viewgroup to provide delete, add smooth animation effect, LayoutTransition use overview
• Animation and transition (nine), Svg animation use overview, Vector Drawable use, three-party SVGA framework use
• Introduction to the use of Property Animation
• Use FlingAnimation to move a view and create a motion picture
• Add animation to the view using the physical SpringAnimation. Use the overview of SpringAnimation
• Animation and Transition (13), View, Activity Transition transition animation use overview
• Animation and transition (XIV), Overview of Lottie Animation use
• Animation and transition combat (15), like toutiao column drag sorting effect
• Animation and transition combat (16), imitation IOS sideslip delete effect
• Animation and transition actual combat (17), imitation explore card flip effect

Common ways to implement the shift slide effect in Android are:

• layoutParam
• offsetTopAndBottom\offsetLeftAndRight
• layout
• scrollTo/scrollBy
• scroller
• viewDragHelper

Common sliding effects are explained through two articles. This section explains layout \ offset \ layoutParam.

1. Achieve displacement sliding by layout()

public void layout(int l, int t, int r, int b)
Copy the code

Take a look at the core code to implement finger moving

bindView {
var layoutLastX = 0
var layoutLastY = 0
var originLeft = 0
var originTop = 0
var originRight = 0
var originBottom = 0
vLayoutMove.setOnTouchListener { v, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            layoutLastX = event.x.toInt()
            layoutLastY = event.y.toInt()
            originLeft = v.left
            originTop = v.top
            originRight = v.right
            originBottom = v.bottom
        }
        MotionEvent.ACTION_MOVE -> {
            val offsetX = event.x - layoutLastX
            val offsetY = event.y - layoutLastY
            v.layout(
                (originLeft + offsetX).toInt(),
                (originTop + offsetY).toInt(),
                (originRight + offsetX).toInt(),
                (originBottom + offsetY).toInt()
            )
        }
        MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
        	// Restore the position to its original position
            v.layout(
                originLeft, originTop, originRight, originBottom
            )
        }
    }
    true
}
Copy the code

2, offset way to achieve displacement sliding

public void offsetLeftAndRight(int offset)
public void offsetTopAndBottom(int offset)
Copy the code

Because relatively simple, directly look at the core code implementation

var offsetLastX = 0F
var offsetLastY = 0F
var offsetOriginX = 0F
var offsetOriginY = 0F
vOffsetMove.setOnTouchListener { v, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            offsetLastX = event.x
            offsetLastY = event.y
            offsetOriginX = v.left.toFloat()
            offsetOriginY = v.top.toFloat()
        }
        MotionEvent.ACTION_MOVE -> {
            val offsetX = event.x - offsetLastX
            val offsetY = event.y - offsetLastY
            v.offsetLeftAndRight(offsetX.toInt())
            v.offsetTopAndBottom(offsetY.toInt())
        }
        MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
            v.layout(
                offsetOriginX.toInt(),
                offsetOriginY.toInt(),
                offsetOriginX.toInt() + v.width,
                offsetOriginY.toInt() + v.height
            )
        }
    }
    true
}
Copy the code

3, layoutParam way to achieve displacement sliding

v.layoutParams = layoutParam
Copy the code

Go straight to the core code

var paramLastX = 0F
  var paramLastY = 0F
  var paramOriginX = 0F
  var paramOriginY = 0F
  vLayoutParamMove.setOnTouchListener { v, event ->
      val layoutParam: ViewGroup.MarginLayoutParams =
          v.layoutParams as ViewGroup.MarginLayoutParams
      when (event.action) { MotionEvent.ACTION_DOWN -> { paramLastX = event.x paramLastY = event.y paramOriginX = layoutParam.leftMargin.toFloat()  paramOriginY = layoutParam.topMargin.toFloat() } MotionEvent.ACTION_MOVE -> { val offsetX = event.x - paramLastX val offsetY = event.y - paramLastY layoutParam.leftMargin = (layoutParam.leftMargin + offsetX).toInt() layoutParam.topMargin  = (layoutParam.topMargin + offsetY).toInt() v.layoutParams = layoutParam } MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { layoutParam.leftMargin = paramOriginX.toInt() layoutParam.topMargin = paramOriginY.toInt() v.layoutParams = layoutParam } }true}}Copy the code