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

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

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

一、思路：

用MotionLayout

二、效果图：

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

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

三、关键代码：

xml布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="0dp"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.constraintlayout.widget.ConstraintLayoutandroid: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"><ImageViewandroid: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.MotionLayoutandroid: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"><ImageViewandroid: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.MotionLayoutandroid: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"><ImageViewandroid: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.MotionLayoutandroid: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"><ImageViewandroid: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.MotionLayoutandroid: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"><ImageViewandroid: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.MotionLayoutandroid: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"><ImageViewandroid: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.MotionLayoutandroid: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"><ImageViewandroid: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.MotionLayoutandroid: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"><ImageViewandroid: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.mymoreheadanimimport 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.ImageLoaderclass MainActivity : AppCompatActivity() {lateinit var mBinding:ActivityVideoMatchBindingprivate var isStart2 = falseprivate var isStart3 = falseprivate var isStart4 = falseprivate var isStart5 = falseprivate var isStart6 = falseprivate var isStart7 = falseprivate var isStartAnim1 = falseoverride 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 = falsemBinding.ivAnim1.visibility = View.GONEmBinding.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.mzph.cn/news/887013.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

设计LRU缓存

设计LRU缓存

LRU缓存 LRU缓存的实现思路LRU缓存的操作C11 STL实现LRU缓存自行设计双向链表 哈希表 LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;缓存是一种常见的缓存淘汰算法&#xff0c;其基本思想是&#xff1a;当缓存空间已满时&#xff0c;移除最近最少使…
阅读更多...
SAM-Med2D 训练完成后boxes_prompt没有生成mask的问题

SAM-Med2D 训练完成后boxes_prompt没有生成mask的问题

之前对着这这篇文章去微调SAM_Med2D(windows环境),发现boxes_prompt空空如也。查找了好长时间问题SAM-Med2D 大模型学习笔记&#xff08;续&#xff09;&#xff1a;训练自己数据集_sam训练自己数据集-CSDN博客 今天在看label2image_test.json文件的时候发现了一些端倪: 官方…
阅读更多...
39页PDF | 毕马威_数据资产运营白皮书（限免下载）

39页PDF | 毕马威_数据资产运营白皮书（限免下载）

一、前言 《毕马威数据资产运营白皮书》探讨了数据作为新型生产要素在企业数智化转型中的重要性&#xff0c;提出了数据资产运营的“三要素”&#xff08;组织与意识、流程与规范、平台与工具&#xff09;和“四重奏”&#xff08;数据资产盘点、评估、治理、共享&#xff09;…
阅读更多...
在 macOS 和 Linux 中，波浪号 `~`的区别

在 macOS 和 Linux 中，波浪号 `~`的区别

文章目录 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~macOS示例 Linux示例 区别总结其他注意事项示例macOSLinux 结论 2、root 用户的主目录通常是 /root解释示例切换用户使用 su 命令使用 sudo 命令 验证当前用户总结 1、在 macOS 和 Linux 中&#xff0c;波浪号 ~ 在 macO…
阅读更多...
【LeetCode每日一题】——485.最大连续 1 的个数

【LeetCode每日一题】——485.最大连续 1 的个数

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 数组 二【题目难度】 LeetCode 三【题目编号】 485.最大连续 1 的个数 四【题目描述】 给定…
阅读更多...
windows 操作系统下载 Android源码教程

windows 操作系统下载 Android源码教程

前言 开始我是装了hyber-v 虚拟机ubuntu 的&#xff0c;然而非常的卡顿且难用。因此我尝试在windows上使用repo&#xff0c;因此有了这篇文章 补充 第二天发现编译源码也需要linux命令因为源码中的很多脚本都是.sh的 因此最终通过安装WSL解决&#xff08;在window应用商店就…
阅读更多...
单片机进阶硬件部分_day2_项目实践

单片机进阶硬件部分_day2_项目实践

设计要求 从绘制原理图到画PCB板&#xff0c;完成智能云衣柜项目 STM32 &#xff08;Modbus&#xff09;云IOT衣物云端管理 华为PCB布线规范 基于IoT的智享家主控系统 步骤分析 需求分析 器件选型绘制原理图&#xff08;器件连接&#xff09;PCB布局、布线泪滴、铺铜、添加丝印…
阅读更多...
接口上传视频和oss直传视频到阿里云组件

接口上传视频和oss直传视频到阿里云组件

接口视频上传 <template><div class"component-upload-video"><el-uploadclass"avatar-uploader":action"uploadImgUrl":on-progress"uploadVideoProcess":on-success"handleUploadSuccess":limit"lim…
阅读更多...
Flutter：photo_view图片预览功能

Flutter：photo_view图片预览功能

导入SDK photo_view: ^0.15.0单张图片预览&#xff0c;支持放大缩小 import package:flutter/material.dart; import package:photo_view/photo_view.dart;... ...class _MyHomePageState extends State<MyHomePage>{overrideWidget build(BuildContext context) {return…
阅读更多...
【Linux】详解僵尸进程与孤儿进程（Z僵死状态引发的内存泄漏与处理办法）

【Linux】详解僵尸进程与孤儿进程（Z僵死状态引发的内存泄漏与处理办法）

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 丢掉幻想&#xff0c;准备斗争 目录 引言 一、僵尸进程 1.子进程的创建与退出 2.进程表 3.僵尸状态产生 4.直观感受一下&#xff1a; 二、…
阅读更多...
基于微信小程序的科学健身助手的设计与实现

基于微信小程序的科学健身助手的设计与实现

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…
阅读更多...
【Pytorch】torch.utils.data模块

【Pytorch】torch.utils.data模块

torch.utils.data模块主要用于进行数据集处理&#xff0c;是常用的一个包。在构建数据集的过程中经常会用到。要使用data函数必须先导入&#xff1a; from torch.utils import data 下面介绍几个经常使用到的类。 torch.utils.data.DataLoader DataLoader(dataset, batch_…
阅读更多...
Qt在designer设计师界面使用QSplitter

Qt在designer设计师界面使用QSplitter

QSplitter控件是解决软件不同分辨率自适应布局的好帮手之一&#xff0c;该控件无法在控件列表找到&#xff0c;使用条件较为隐蔽 环境 qt5.12.12 MSVC2017 1.新建一个qt项目&#xff0c;初始自带Mainwindow&#xff0c;拖两个qwidget进来&#xff0c;注意此时centralWidget处于…
阅读更多...
北京申请中级职称流程（2024年）

北京申请中级职称流程（2024年）

想找个完整详细点的申请流程资料真不容易&#xff0c;做个分享送给需要的人吧。 不清楚为什么说文章过度宣传&#xff0c;把链接和页面去掉了&#xff0c;网上自己找一下。 最好用windows自带的EDGE浏览器打开申请网站&#xff0c;只有在开始申请的时间内才可以进行网上申报&…
阅读更多...
测评部署和管理 WordPress 最方便的面板

测评部署和管理 WordPress 最方便的面板

新版宝塔面板快速搭建WordPress新手教程 - 倚栏听风-Morii - 博客园 初学者使用1Panel面板快速搭建WordPress网站 - 倚栏听风-Morii - 博客园 可以看到&#xff0c;无论是宝塔还是1Panel&#xff0c;部署和管理WordPress都有些繁琐&#xff0c;而且还需要额外去配置Nginx和M…
阅读更多...
ubuntu：20.04安装协议逆向工具netzob

ubuntu：20.04安装协议逆向工具netzob

创建容器 docker run -d --name ubuntu_env ubuntu:20.04 /bin/bash -c "while true; do sleep 1; done" 63a8f5cf5431a930671ff0e7bb2b667adf001efb05fd7261da244879d2699bec 进入容器 PS E:\src> docker exec -it ubuntu_env /bin/bash 安装常用工具 apt upda…
阅读更多...
SpringBoot实现WebSocket

SpringBoot实现WebSocket

参考链接&#xff1a;https://www.kancloud.cn/king_om/mic_03/2783864 一、环境搭建 1.创建SpringBoot项目&#xff0c;引入相关依赖 <dependencies><!-- Spring Boot核心启动器&#xff0c;引入常用依赖基础 --><dependency><groupId>org.springf…
阅读更多...
uni-app快速入门（八）--常用内置组件（上）

uni-app快速入门（八）--常用内置组件（上）

uni-app提供了一套基础组件&#xff0c;类似HTML里的标签元素&#xff0c;不推荐在uni-app中使用使用div等HTML标签。在uni-app中&#xff0c;对应<div>的标签是view&#xff0c;对应<span>的是text&#xff0c;对应<a>的是navigator&#xff0c;常用uni-app…
阅读更多...
早期超大规模语言模型的尝试——BLOOM模型论文解读，附使用MindSpore和MindNLP的模型和实验复现

早期超大规模语言模型的尝试——BLOOM模型论文解读，附使用MindSpore和MindNLP的模型和实验复现

背景 预训练语言模型已经成为了现代自然语言处理pipeline中的基石&#xff0c;因为其在少量的标注数据上产生更好的结果。随着ELMo、ULMFiT、GPT和BERT的开发&#xff0c;使用预训练模型在下游任务上微调的范式被广泛使用。随后发现预训练语言模型在没有任何额外训练的情况下任…
阅读更多...
【团购核销】抖音生活服务商家应用快速接入②——商家授权

【团购核销】抖音生活服务商家应用快速接入②——商家授权

文章目录 一、前言二、授权流程三、授权Url3.1 Url参数表3.2 授权能力表3.3 源码示例 四、授权回调4.1 添加授权回调接口4.2 授权回调接口源码示例 五、实际操作演示六、参考 一、前言 目的&#xff1a;将抖音团购核销的功能集成到我们自己开发的App和小程序中 【团购核销】抖音…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023