当前位置： 首页 > article >正文

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

article 2024/11/23 8:32:24
Android开发教程案例源码分享-匹配动画多个头像飘动效果

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

一、思路：

用MotionLayout

二、效果图：

在这里插入图片描述
看视频更直观点：

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

三、关键代码：

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代码

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源码的私信我


http://www.kler.cn/a/405494.html

相关文章：

  • 零碎04 MybatisPlus自定义模版生成代码
  • 02. Python基础知识
  • java-贪心算法
  • 嵌入式面试八股文（九）·FreeRTOS与Linux的区别与相同点、多进程与多线程的区别、为什么项目使用多线程
  • 如何使用本地大模型做数据分析
  • 【网络安全】SSL（一）：为什么需要 Keyless SSL？
  • 在 Ubuntu 上安装 Yarn 环境
  • 解决非小米电脑使用小米电脑管家，妙享桌面连接失败的问题
  • 【Rust练习】22.HashMap
  • 再次讨论下孤注一掷
  • SpringSecurity创建一个简单的自定义表单的认证应用
  • 移动充储机器人“小奥”的多场景应用（上）
  • BugJson因为json格式问题OOM怎么办
  • 【通俗理解】隐变量的变分分布探索——从公式到应用
  • excel版数独游戏（已完成）
  • 5种常见的k8s云原生数据管理方案详解
  • 使用uniapp编写APP的文件上传
  • 【Linux驱动开发】裸机点亮LED灯实验
  • 向量数据库FAISS之二：基础进阶版
  • c与c++比较
  • 高性能服务器模型之Reactor（单线程版本）
  • Windows电脑本地部署llamafile并接入Qwen大语言模型远程AI对话实战
  • 【高阶数据结构】图论
  • JavaScript DOM使用
  • 《Python游戏编程入门》注-第6章3
  • mysql 与 mybatis 错误记录