Android开发教程案例源码分享-匹配动画多个头像飘动效果

Android开发教程案例源码分享-匹配动画多个头像飘动效果

匹配往往出现多个头像飘动,吸引人点击,有时出现的位置还不固定

一、思路:

用MotionLayout

二、效果图:

看视频更直观点:

Android开发教程案例源码分享-匹配动画多个头像飘动效果

三、关键代码:

xml布局

xml 复制代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/color_1F1C4C">




    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/cl_img_anim"
                android:layout_width="@dimen/dp_240"
                android:layout_height="@dimen/dp_240"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="@dimen/dp_70"
                >
                <ImageView
                    android:id="@+id/iv_video_match"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@mipmap/img_video_match"
                   />
            </androidx.constraintlayout.widget.ConstraintLayout>







            <androidx.constraintlayout.motion.widget.MotionLayout
                android:id="@+id/cl_amin1"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_340"
                android:layout_marginTop="@dimen/dp_20"
                app:layoutDescription="@xml/activity_video_match_scene1"
                >

                <ImageView
                    android:id="@+id/iv_anim1"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/yishi"

                    />


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

            <androidx.constraintlayout.motion.widget.MotionLayout
                android:id="@+id/cl_amin2"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_340"
                android:layout_marginTop="@dimen/dp_20"
                app:layoutDescription="@xml/activity_video_match_scene2"

                >

                <ImageView
                    android:id="@+id/iv_anim2"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:src="@mipmap/yishi2"
                    android:scaleType="centerCrop"

                    />


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

            <androidx.constraintlayout.motion.widget.MotionLayout
                android:id="@+id/cl_amin3"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_340"
                android:layout_marginTop="@dimen/dp_20"
                app:layoutDescription="@xml/activity_video_match_scene3"

                >

                <ImageView
                    android:id="@+id/iv_anim3"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:src="@mipmap/yishi3"
                    android:scaleType="centerCrop"
                    />

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


            <androidx.constraintlayout.motion.widget.MotionLayout
                android:id="@+id/cl_amin4"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_340"
                android:layout_marginTop="@dimen/dp_20"
                app:layoutDescription="@xml/activity_video_match_scene4"

                >

                <ImageView
                    android:id="@+id/iv_anim4"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:src="@mipmap/yishi4"
                    android:scaleType="centerCrop"
                    />

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

            <androidx.constraintlayout.motion.widget.MotionLayout
                android:id="@+id/cl_amin5"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_340"
                android:layout_marginTop="@dimen/dp_20"
                app:layoutDescription="@xml/activity_video_match_scene5"

                >

                <ImageView
                    android:id="@+id/iv_anim5"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:src="@mipmap/yishi5"
                    android:scaleType="centerCrop"
                    />

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

            <androidx.constraintlayout.motion.widget.MotionLayout
                android:id="@+id/cl_amin6"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_340"
                android:layout_marginTop="@dimen/dp_20"
                app:layoutDescription="@xml/activity_video_match_scene6"
                >

                <ImageView
                    android:id="@+id/iv_anim6"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:src="@mipmap/yishi6"
                    android:scaleType="centerCrop"
                    />

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

            <androidx.constraintlayout.motion.widget.MotionLayout
                android:id="@+id/cl_amin7"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_340"
                android:layout_marginTop="@dimen/dp_20"
                app:layoutDescription="@xml/activity_video_match_scene7"
                >

                <ImageView
                    android:id="@+id/iv_anim7"
                    android:layout_width="@dimen/dp_50"
                    android:layout_height="@dimen/dp_50"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    android:src="@mipmap/yishi7"
                    android:scaleType="centerCrop"
                    />

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


        </FrameLayout>

    </androidx.core.widget.NestedScrollView>



</androidx.constraintlayout.widget.ConstraintLayout>

kotlin代码

kotlin 复制代码
package com.cong.mymoreheadanim

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import androidx.constraintlayout.motion.widget.MotionLayout
import com.cong.mymoreheadanim.databinding.ActivityVideoMatchBinding
import com.zailiaoliao.lib.image.ImageLoader

class MainActivity : AppCompatActivity() {

    lateinit var mBinding:ActivityVideoMatchBinding
    private var isStart2 = false
    private var isStart3 = false
    private var isStart4 = false
    private var isStart5 = false
    private var isStart6 = false
    private var isStart7 = false

    private var isStartAnim1 = false


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding = ActivityVideoMatchBinding.inflate(layoutInflater)
        setContentView(mBinding.root)


            ImageLoader.loadAvatar(mBinding.ivAnim1,R.mipmap.yishi)


            ImageLoader.loadAvatar(mBinding.ivAnim2,R.mipmap.yishi2)


            ImageLoader.loadAvatar(mBinding.ivAnim3,R.mipmap.yishi3)


            ImageLoader.loadAvatar(mBinding.ivAnim4,R.mipmap.yishi4)


            ImageLoader.loadAvatar(mBinding.ivAnim5,R.mipmap.yishi5)


            ImageLoader.loadAvatar(mBinding.ivAnim6,R.mipmap.yishi6)


            ImageLoader.loadAvatar(mBinding.ivAnim7,R.mipmap.yishi7)



        dealAnimListener()

    }

    override fun onResume() {
        super.onResume()
        if (!isStartAnim1){
            Handler().postDelayed({
                mBinding.clAmin1.transitionToStart()
                mBinding.clAmin1.setTransition(R.id.left_to_right)
                mBinding.clAmin1.transitionToEnd()
                isStartAnim1 = true
            },500)

        }

    }

    private fun dealAnimListener(){
        mBinding.clAmin1.addTransitionListener(object : MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
                mBinding.ivAnim1.visibility = View.VISIBLE
            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
                if (p3 >= 0.2f && !isStart2){
                    mBinding.clAmin2.transitionToStart()
                    mBinding.clAmin2.setTransition(R.id.left_to_right2)
                    mBinding.clAmin2.transitionToEnd()
                    isStart2 = true
                }
            }

            override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
                isStart2 = false
            }

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

            }

        })

        mBinding.clAmin2.addTransitionListener(object : MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
                mBinding.ivAnim2.visibility = View.VISIBLE
            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
                if (p3 >= 0.2f && !isStart3){
                    mBinding.clAmin3.transitionToStart()
                    mBinding.clAmin3.setTransition(R.id.left_to_right3)
                    mBinding.clAmin3.transitionToEnd()
                    isStart3 = true
                }
            }

            override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
                isStart3 = false
            }

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

            }

        })

        mBinding.clAmin3.addTransitionListener(object : MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
                mBinding.ivAnim3.visibility = View.VISIBLE
            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
                if (p3 >= 0.5f && !isStart4){
                    mBinding.clAmin4.transitionToStart()
                    mBinding.clAmin4.setTransition(R.id.left_to_right4)
                    mBinding.clAmin4.transitionToEnd()
                    isStart4 = true
                }
            }

            override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
                isStart4 = false
            }

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

            }

        })

        mBinding.clAmin4.addTransitionListener(object : MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
                mBinding.ivAnim4.visibility = View.VISIBLE
            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
                if (p3 >= 0.3f && !isStart5){
                    mBinding.clAmin5.transitionToStart()
                    mBinding.clAmin5.setTransition(R.id.left_to_right5)
                    mBinding.clAmin5.transitionToEnd()
                    isStart5 = true
                }
            }

            override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
                isStart5 = false
            }

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

            }

        })

        mBinding.clAmin5.addTransitionListener(object : MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
                mBinding.ivAnim5.visibility = View.VISIBLE
            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
                if (p3 >= 0.3f && !isStart6){
                    mBinding.clAmin6.transitionToStart()
                    mBinding.clAmin6.setTransition(R.id.left_to_right6)
                    mBinding.clAmin6.transitionToEnd()
                    isStart6 = true
                }
            }

            override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
                isStart6 = false

            }

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

            }

        })

        mBinding.clAmin6.addTransitionListener(object : MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
                mBinding.ivAnim6.visibility = View.VISIBLE
            }

            override fun onTransitionChange(p0: MotionLayout?, p1: Int, p2: Int, p3: Float) {
                if (p3 >= 0.3f && !isStart7){
                    mBinding.clAmin7.transitionToStart()
                    mBinding.clAmin7.setTransition(R.id.left_to_right7)
                    mBinding.clAmin7.transitionToEnd()
                    isStart7 = true
                }
            }

            override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
                isStart7 = false
                mBinding.ivAnim1.visibility = View.GONE
                mBinding.clAmin1.transitionToStart()
                mBinding.clAmin1.setTransition(R.id.left_to_right)
                mBinding.clAmin1.transitionToEnd()
            }

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

            }

        })

        mBinding.clAmin7.addTransitionListener(object : MotionLayout.TransitionListener{
            override fun onTransitionStarted(p0: MotionLayout?, p1: Int, p2: Int) {
                mBinding.ivAnim7.visibility = View.VISIBLE
            }

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

            override fun onTransitionCompleted(p0: MotionLayout, p1: Int) {
            }

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

            }

        })

    }
}
项目demo源码结构图:

有问题或者需要demo源码的私信我

相关推荐
*才华有限公司*26 分钟前
安卓前后端连接教程
android
氦客1 小时前
Android Compose中的附带效应
android·compose·effect·jetpack·composable·附带效应·side effect
雨白1 小时前
Kotlin 协程的灵魂:结构化并发详解
android·kotlin
我命由我123451 小时前
Android 开发问题:getLeft、getRight、getTop、getBottom 方法返回的值都为 0
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
Modu_MrLiu2 小时前
Android实战进阶 - 用户闲置超时自动退出登录功能详解
android·超时保护·实战进阶·长时间未操作超时保护·闲置超时
Jeled2 小时前
Android 网络层最佳实践:Retrofit + OkHttp 封装与实战
android·okhttp·kotlin·android studio·retrofit
信田君95272 小时前
瑞莎星瑞(Radxa Orion O6) 基于 Android OS 使用 NPU的图片模糊查找APP 开发
android·人工智能·深度学习·神经网络
tangweiguo030519872 小时前
Kotlin 实现 Android 网络状态检测工具类
android·网络·kotlin
nvvas4 小时前
Android Studio JAVA开发按钮跳转功能
android·java·android studio
怪兽20144 小时前
Android多进程通信机制
android·面试