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

8931519602024-11-22 11:34
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·面试
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答04UV安装并设置国内源05Linux下V2Ray安装配置指南06GitLab 零基础入门指南：从安装到项目管理全流程07KGG转MP3工具|非KGM文件|解密音频08windows找不到gpedit.msc（本地组策略编辑器）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）1046个Nano-banana 精选提示词，持续更新中