Android开发仿美团首页红包动画效果

Android开发仿美团首页红包动画效果

红包左右晃动动画，吸引用户点击

一、思路：

用MotionLayout

二、效果图：

看视频效果直观点：

三、关键代码：

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ml_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_main_scene"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/iv_redPackage"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginRight="30dp"
        android:layout_marginBottom="30dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/img_redpack"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.motion.widget.MotionLayout>

kotlin

package com.cong.myredpackanim

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.constraintlayout.motion.widget.MotionLayout

class MainActivity : AppCompatActivity() {

    private lateinit var  ml_main: MotionLayout
    private var right_to_left = 1

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        ml_main = findViewById(R.id.ml_main)

        ml_main.addTransitionListener(object :MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {

            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {

            }

            override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
                if (right_to_left == 1){
                    p0.transitionToStart()
                    p0.setTransition(R.id.right_to_left)
                    p0.transitionToEnd()
                    right_to_left = 0
                } else {
                    p0.transitionToStart()
                    p0.setTransition(R.id.left_to_right)
                    p0.transitionToEnd()
                    right_to_left = 1
                }

            }

            override fun onTransitionTrigger(p0: MotionLayout?, p1: Int, p2: Boolean, p3: Float) {

            }

        })
    }

    override fun onResume() {
        super.onResume()
        //需要界面显示了，才能设置动画
        ml_main.transitionToStart()
        ml_main.setTransition(R.id.left_to_right)
        ml_main.transitionToEnd()
        right_to_left = 1
    }
}

四、项目demo源码效果图：

有问题或者需要完整源码demo的私信我，我每天都看私信