Android 转场动画合集

项目背景:mvvm+组件化,然后由于领导要求,使用MainActivity为主界面,各种业务使用Fragment处理。所以~ 由于单独Activity+N Fragment 的方式,经过十多天的试错,我确认一件事情。再确认过架构方式后一定要了解下业务场景和使用技术栈。不然会导致身心俱疲——下一篇记录 组件化方式中使用 MainActivity + N Fragment方式怎么适配 组件化。

目录

1、界面转跳 转场动画;

方案一:使用 ARouter 自带 withTransition 设置转场动画。

方案二:使用ViewAnimationUtils 实现动画,配合addOnLayoutListener 监听 控制rootView显隐,达到视觉效果的转场。

方案三:使用Android官方推荐的共享元素方式

使用 FragmentTransaction 

使用 TransitionSet

使用 MaterialContainerTransform

2、Fragment add Fragment 动画不生效问题记录。


1、界面转跳 转场动画;

方案一:使用 ARouter 自带 withTransition 设置转场动画。

// 普通跳转
ARouter.getInstance().build("/test/activity").withTransition(R.anim.slide_in_right, R.anim.slide_out_left) // 设置转场动画.navigation(this);

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:duration="300"android:fromXDelta="100%"android:toXDelta="0%" />
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><translateandroid:duration="300"android:fromXDelta="0%"android:toXDelta="-100%" />
</set>

优点:实现简单,不用二次封装

缺点:无法实现复杂的动画。

方案二:使用ViewAnimationUtils 实现动画,配合addOnLayoutListener 监听 控制rootView显隐,达到视觉效果的转场。

转跳前可以获取按钮位置xy值

        binding.tvRouter.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {int centerX = (v.getLeft() + v.getRight()) / 2;int centerY = (v.getTop() + v.getBottom()) / 2;LogUtils.e("centerX: " + centerX  );LogUtils.e("centerY: " + centerX  );ARouter.getInstance().build(RouterActivityPath.Login.PAGER_LOGIN).withInt("centerX", centerX).withInt("centerY", centerY).navigation(getActivity());}});

转跳界面:获取前页面传递过来xy值,设置一些想要的动画效果。

       centerX =getIntent().getIntExtra("centerX",0);centerX =getIntent().getIntExtra("centerY",0);binding.parent.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {@Overridepublic void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {binding.parent.removeOnLayoutChangeListener(this);float finalRadius = (float) Math.hypot(v.getWidth(), v.getHeight());CircularRevealUtil.startCircularReveal(v, centerX, centerY, 0, finalRadius);}});

CircularRevealUtil : 作了一个示例,圆形揭示

  /*** 开始圆形揭示动画** @param view         要显示的视图* @param centerX      动画的中心X坐标* @param centerY      动画的中心Y坐标* @param startRadius  动画起始半径* @param endRadius    动画结束半径*/public static void startCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius) {Animator anim = ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius);view.setVisibility(View.VISIBLE);anim.start();}

优点:可以定制复杂的转场动画

缺点:不易封装,实现难度,性能消耗等

方案三:使用Android官方推荐的共享元素方式

// 在第一个Activity中启动第二个Activity
Intent intent = new Intent(this, SecondActivity.class);
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,Pair.create(sharedView, "shared_element_transition")
);
startActivity(intent, options.toBundle());

在布局文件中,为共享元素设置 android:transitionName

<!-- activity_first.xml -->
<ImageViewandroid:id="@+id/sharedView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/sample_image"android:transitionName="shared_element_transition" />
<!-- activity_second.xml -->
<ImageViewandroid:id="@+id/sharedView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/sample_image"android:transitionName="shared_element_transition" />
使用 FragmentTransaction 

对于 Fragment 之间的共享元素动画,可以使用 FragmentTransaction 类来设置共享元素。

在第一个 Fragment 中启动第二个 Fragment

Fragment secondFragment = new SecondFragment();
FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.replace(R.id.fragment_container, secondFragment);
transaction.addToBackStack(null);
transaction.addSharedElement(sharedView, "shared_element_transition");
transaction.commit();

在布局文件中,为共享元素设置 android:transitionName

<!-- fragment_first.xml -->
<ImageViewandroid:id="@+id/sharedView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/sample_image"android:transitionName="shared_element_transition" />
<!-- fragment_second.xml -->
<ImageViewandroid:id="@+id/sharedView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/sample_image"android:transitionName="shared_element_transition" />
使用 TransitionSet

如果需要同时使用多种动画效果,可以使用 TransitionSet 来组合多个动画效果。

TransitionSet transitionSet = new TransitionSet();
transitionSet.addTransition(new ChangeBounds());
transitionSet.addTransition(new ChangeTransform());
transitionSet.addTransition(new ChangeImageTransform());getWindow().setSharedElementEnterTransition(transitionSet);
getWindow().setSharedElementReturnTransition(transitionSet);
使用 MaterialContainerTransform

MaterialContainerTransform 是 Android Material Design 提供的一个组件,可以用于容器转换动画,适用于 Activity 和 Fragment 之间的共享元素过渡。

FragmentTransaction transaction = getFragmentManager().beginTransaction();
MaterialContainerTransform transform = new MaterialContainerTransform();
transform.setDuration(300);
secondFragment.setSharedElementEnterTransition(transform);
transaction.addSharedElement(sharedView, "shared_element_transition");
transaction.replace(R.id.fragment_container, new SecondFragment());
transaction.addToBackStack(null);
transaction.commit();

在布局文件中,为共享元素设置 android:transitionName

<!-- fragment_first.xml -->
<Viewandroid:id="@+id/sharedView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:transitionName="shared_element_transition" />
<!-- fragment_second.xml -->
<Viewandroid:id="@+id/sharedView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:transitionName="shared_element_transition" />

2、Fragment add Fragment 动画不生效问题记录。

其实写这篇文章最重要的是想记录这个问题,我卡了一天。怀疑了FragmentTransaction封装,怀疑组件化结构。任何动画设置均不成功。最后看到自己布局里使用的Fragment容器。

       <androidx.fragment.app.FragmentContainerViewandroid:id="@+id/main_container"android:layout_width="match_parent"android:layout_height="match_parent" />

FragmentContainerView 会导致 Fragment转场动画不生效。

FragmentContainerView 会导致 Fragment转场动画不生效。

FragmentContainerView 会导致 Fragment转场动画不生效。

重要的话说三遍

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/498054.html

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

相关文章

IEDA 使用auto Dev编码助手配置Deep Seek V3

文章目录 API Key的申请和创建auto Dev的下载auto Dev的安装Deep seek V3的连接配置和注意事项错误解决&#xff1a;You LLM server Key is empty API Key的申请和创建 登陆Deep Seek开放平台&#xff0c;创建API Key 并复制 auto Dev的下载 auto Dev项目地址&#xff0c;发…

vue3学习笔记(6)-生命周期、hooks

1.生命周期 <template><div><div>{{ a }}</div><div click"test"></div></div> </template> <script setup lang"ts" name"hi"> import { ref, onBeforeMount, onMounted, onBeforeUpdat…

#端云一体化开发# #HarmonyOS Next#《说书人》鸿蒙原生基于角色的对话式文本编辑开发方案

1、写在前面 过去的一百年里&#xff0c;在“编程”的这个行业诞生之初&#xff0c;人们采用面向过程的方式进行开发&#xff0c;但是&#xff0c;伴随着程序规模的日益增大&#xff0c;程序的复杂度也随之增加&#xff0c;使用结构化编程方法来管理复杂的程序逻辑变得越来越困…

【ELK】ES单节点升级为集群模式--太细了!

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言准备工作1. 查看现状【单节点】2. 原节点改集群模式3. 改es配置文件&#xff0c;增加集群相关配置项4. *改docker映射的端口* 启动新节点5. docker-compose起一…

Python跨年烟花

目录 系列文章 写在前面 技术需求 完整代码 下载代码 代码分析 1. 程序初始化与显示设置 2. 烟花类 (Firework) 3. 粒子类 (Particle) 4. 痕迹类 (Trail) 5. 烟花更新与显示 6. 主函数 (fire) 7. 游戏循环 8. 总结 注意事项 写在后面 系列文章 序号直达链接爱…

未来网络技术的新征程:5G、物联网与边缘计算(10/10)

一、5G 网络&#xff1a;引领未来通信新潮流 &#xff08;一&#xff09;5G 网络的特点 高速率&#xff1a;5G 依托良好技术架构&#xff0c;提供更高的网络速度&#xff0c;峰值要求不低于 20Gb/s&#xff0c;下载速度最高达 10Gbps。相比 4G 网络&#xff0c;5G 的基站速度…

艾体宝方案丨全面提升API安全:AccuKnox 接口漏洞预防与修复

一、API 安全&#xff1a;现代企业的必修课 在现代技术生态中&#xff0c;应用程序编程接口&#xff08;API&#xff09;扮演着不可或缺的角色。从数据共享到跨平台集成&#xff0c;API 成为连接企业系统与外部服务的桥梁。然而&#xff0c;伴随云计算的普及与微服务架构的流行…

# 【鸿蒙开发】多线程之Worker的使用

【鸿蒙开发】多线程之Worker的使用 文章目录 【鸿蒙开发】多线程之Worker的使用前言一、Worker的介绍二、注意事项三、Worker使用示例1.新建一个Worker2.主线程使用Worker3.子线程Worker的使用 四、效果展示 前言 本文主要介绍了多线程的方法之一&#xff0c;使用Worker开启多…

leetcode 面试经典 150 题:矩阵置零

链接矩阵置零题序号73题型二维数组解题方法标记数组法难度中等熟练度✅✅✅✅ 题目 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1]…

适用于项目经理的跨团队协作实践:Atlassian Jira与Confluence集成

适用于项目经理的跨团队协作实践&#xff1a;Atlassian Jira与Confluence集成 现代项目经理的核心职责是提供可视性、保持团队一致&#xff0c;并确保团队拥有交付出色工作所需的资源。在过去几年中&#xff0c;由于分布式团队的需求不断增加&#xff0c;项目经理这一角色已迅速…

MySQL官网驱动下载(jar包驱动和ODBC驱动)【详细教程】

1.打开MySQL的官网&#xff0c;选择下载(Download) MySQL[这里是图片001]https://www.mysql.com/cn/ 2.往下划点击MySQL Community(GPL)Downloads 3.要下载MySQL的jar包的选择Connector/J 4.进入后&#xff0c;根据自己的需求选择相应的版本 5.下载完成后&#xff0c;进行解压…

WPF 绘制过顶点的圆滑曲线 (样条,贝塞尔)

在一个WPF项目中要用到样条曲线&#xff0c;必须过顶点&#xff0c;圆滑后还不能太走样&#xff0c;捣鼓一番&#xff0c;发现里面颇有玄机&#xff0c;于是把我多方抄来改造的方法发出来&#xff0c;方便新手&#xff1a; 如上图&#xff0c;看代码吧&#xff1a; ----------…

北京某新能源汽车生产及办公网络综合监控项目

北京某新能源汽车是某世界500强汽车集团旗下的新能源公司&#xff0c;也是国内首个获得新能源汽车生产资质、首家进行混合所有制改造、首批践行国有控股企业员工持股的新能源汽车企业&#xff0c;其主营业务包括纯电动乘用车研发设计、生产制造与销售服务。 项目现状 在企业全…

【阅读笔记】《基于区间梯度的联合双边滤波图像纹理去除方法》

一、联合双边滤波背景 联合双边滤波&#xff08;Joint Bilateral Filter, JBF&#xff09;是一种图像处理技术&#xff0c;它在传统的双边滤波&#xff08;Bilateral Filter, BF&#xff09;基础上进行了改进&#xff0c;通过引入一个引导图&#xff08;guidance image&#x…

VIM: Vision Mamba基于双向状态空间模型的高效视觉表示学习

这篇文章的主要内容可以概括如下&#xff1a; 背景与动机&#xff1a; 近年来&#xff0c;状态空间模型&#xff08;SSM&#xff09;在长序列建模中展现出巨大潜力&#xff0c;尤其是Mamba模型在硬件感知设计上的高效性。 然而&#xff0c;现有的SSM模型在处理视觉数据时面临…

京存SAN助力电子病历建设

引言 随着信息技术的快速发展&#xff0c;电子病历系统(EMR)已成为现代医疗的重要组成部分。电子病历不仅能够提高医疗服务的效率和质量&#xff0c;还能更好地保护患者的隐私和数据安全。作为国内领先的存储解决方案提供商&#xff0c;京存存储凭借其卓越的技术实力和丰富的实…

python利用selenium实现大麦网抢票

大麦网&#xff08;damai.cn&#xff09;是中国领先的现场娱乐票务平台&#xff0c;涵盖演唱会、音乐会、话剧、歌剧、体育赛事等多种门票销售。由于其平台上经常会有热门演出&#xff0c;抢票成为许多用户关注的焦点。然而&#xff0c;由于票务资源的有限性&#xff0c;以及大…

【疑难杂症】 HarmonyOS NEXT中Axios库的响应拦截器无法拦截424状态码怎么办?

今天在开发一个HarmonyOS NEXT的应用的时候&#xff0c;发现http接口如果返回的状态码是424时&#xff0c;我在axios中定义的拦截器失效了。直接走到了业务调用的catch中。 问题表现&#xff1a; 我的拦截器代码如下&#xff1a; 解决办法&#xff1a; 先说解决办法&#xff…

芊芊手印网站

据说25年是佛灯火&#xff08;木火之年&#xff09;&#xff0c;财运之年 芊芊手印网站链接&#xff1a;芊芊手印-手相纹理素描线稿提取工具

“Gold-YOLO:基于聚合与分发机制的高效目标检测新范式”

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;编程探索专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月26日8点00分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文源地址&#xff08;有视频&#xf…