android转场动画--共享元素(Shared Element)

坍缩超类
• 阅读 11974

什么是共享元素呢?可以理解为当页面跳转是,看起来一个View属于界面A又属于界面B。 看一下下边这个效果:
android转场动画--共享元素(Shared Element)

在这个转场动画中,图片和文字都是共享元素,具体怎么实现这种效果呢?

Step1

首先需要先在style.xml配置上允许内容过度。

 <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="android:windowContentTransitions">true</item>
 </style>

Step2

为共享元素设置上transtionName。设置name的时候两个界面都要添加上,这样才可以检测到是哪两个元素共享。

       <ImageView
        android:id="@+id/image"
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:transitionName="image"
        android:src="@drawable/default_image" />

也可以在代码中设置:

imageView.setTransitionName("image");

Step3

设置好以上的参数后,就可以通过跳转来添加相应的动画了。是不是特别的简单。是的。没有错。只不过再跳转的时候还需要加点东西。看下代码:

 Intent i = new Intent(mContext, Main2Activity.class);
 ActivityOptionsCompat optionsCompat = 
 ActivityOptionsCompat.makeSceneTransitionAnimation(mContext, holder.image, "image");
 startActivity(i,optionsCompat.toBundle());

通过上面的代码就可以实现ImageView的共享了。类似文章开头的效果。设置多个元素共享的时候需要这样:

 Intent i = new Intent(mContext, Main2Activity.class);
 Pair<View, String> pair = new Pair<View, String>(holder.image,"image");
 Pair<View,String> pairText = new Pair<View, String>(holder.text,"text");
 ActivityOptionsCompat optionsCompat = 
 ActivityOptionsCompat.makeSceneTransitionAnimation(mContext, pair,pairText);
 startActivity(i,optionsCompat.toBundle());

在上面的跳转代码中我们用到了ActivityOptionsCompat的两个静态方法。分别是

  • makeSceneTransitionAnimation(Activity activity,View sharedElement,String sharedElementName)
  • makeSceneTransitionAnimation(Activity activity,Pair<View, String>... sharedElements)

通过函数的参数我们应该就可以看的明白,就不解释了。这两个函数就是用来设置共享元素的。

点赞
收藏
评论区
推荐文章
冴羽 冴羽
3年前
VuePress 博客之 SEO 优化(四) Open Graph protocol
前言在中,我们使用VuePress搭建了一个博客,最终的效果查看:。本篇讲讲SEO优化中的OpenGraphprotocol。meta标签如果我们打开思否任意一篇文章,比如这篇,查看DOM元素,我们可以在head中找到这样一段meta标签:我们可以发现name都是以og:开头,这是什么意思呢,又是什么作用呢?其实这是
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
3年前
FTP服务搭建配置笔记
1、什么是文件共享服务?简单来说就是文件域存储块设备可以共享给他人使用。1.1实现文件共享服务的三种方式1.FTP:属于应用层服务,可以跨平台使用2.NFS:属于内核模式,不可以跨平台使用3.Samba:可以跨平台使用1.2实现存储设备域服务器连接的三种方式1.DAS:连接磁盘2.
Stella981 Stella981
3年前
Android 动画和图形概述
Android提供了非常多强大的API来为UI元素应用动画,及绘制定制的2D和3D图形。下面的部分提供了一个APIs和可用的系统功能的概述,并帮助你确定,对于你的需求而言,哪种方法是最好的。动画Androidframework提供了两种动画系统:属性动画(在Android3.0中引入)和view动画。两种动画系统都是可行的选择,但通常而言
Wesley13 Wesley13
3年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Wesley13 Wesley13
3年前
CSS复习笔记二:浮动和清除浮动
 一、浮动的性质1、浮动的元素脱离标准文档流,并且可以设置宽度和高度。2、浮动的元素相互贴靠3、浮动的元素有“文字环绕”效果       含有图片的div浮动,段落不浮动,文字会环绕图片。4、div浮动了且没有设置宽度,那么将自动收缩为内容的宽度。浮动(脱标)的元素是不能把容器惩处高度的。二、浮动的清除
绣鸾 绣鸾
1年前
Principle for Mac动画交互设计工具
Principle是一款Mac平台上的动画和交互设计工具,主要用于创建高质量的用户界面和用户体验。它提供了直观的界面和易于使用的操作方式,可以让设计师快速创建复杂的动态原型和交互式应用程序,并实现精美的动画效果。Principle支持多种常见的设计元素,如
子桓 子桓
1年前
mac电脑ae视频特效制作:After Effects 2024 中文最新 for mac
AfterEffects2024是一款专业视频特效制作软件,它可以帮助用户制作各种视觉特效、动态图形和转场效果等,适用于电影、电视、动画等各种媒体类型和格式的制作。AfterEffects2024的主要功能包括创建电影级影片字幕、片头、过渡(转场效果)、特
鸿蒙小林 鸿蒙小林
2个月前
《仿盒马》app开发技术分享-- 订单详情页(32)
技术栈Appgalleryconnect开发准备在之前的章节中我们实现了订单的提交,以及提交之后跳转到确认订单页面,在确认订单页面我们添加了一个入口,这个入口是查询订单,当我们点击入口时,我们需要跳转到一个新的界面,这个界面通过接收上个界面的订单id或者订
铁扇公主 铁扇公主
2年前
Mac上好用的原型设计软件Axure RP 9介绍
AxureRP9是一款功能强大的原型设计工具,它可以帮助用户创建交互式原型、流程图、线框图等,以便于设计和测试网页和移动应用程序。AxureRP9的主要功能包括:1.创建原型设计:该软件提供了丰富的用户界面元素、交互动画和效果,用户可以使用这些元素创建交互
Iframe在Vue中的状态保持技术 | 京东云技术团队
Iframe是一个历史悠久的HTML元素,根据MDNWEBDOCS官方介绍,Iframe定义为HTML内联框架元素,表示嵌套的BrowsingContext,它能够将另一个HTML页面嵌入到当前页面中。Iframe可以廉价实现跨应用级的页面共享,并且具有使用简单、高兼容性、内容隔离等优点,因此以Iframe为核心形成了前端平台架构领域第1代技术。