关闭

Material Design共享元素转换(Shared Element Transition)效果实现

标签: 移动app
1931人阅读 评论(0) 收藏 举报
分类:

前段时间有妖气APP改版,在新版里看到个很炫的效果,点击收藏书架上的书,封面会移动到下个Activity。但是不知道是怎么做出来的,搜都不知道怎么搜。。。。

昨天心血来潮研究下动画,然后看到在Material Design里提供了各种炫丽的转场效果,其中有一种效果正是我要找的,名为共享元素变换(Shared Element Transition)

最后做出的效果图如下

这里写图片描述
参考的文章:http://blog.csdn.net/tm1989tm/article/details/51025309

该效果只有在API 21 以上才能使用

实现该动画需要注意一下几点:
1.首先对于在两个界面间共享的元素,需要为其设置相同的名字,在转场时才能知道共享的是哪个元素,为此需要为两个界面间共享的元素添加一个共享元素名称,有两种方法
在代码中设置

view.setTransitionName("aaa");

或在布局文件中设置

android:transitionName="aaa"

即可

2.转场切换方法,以Activity间切换为例

ActivityOptions options = ActivityOptions
        .makeSceneTransitionAnimation(MainActivity.this, view, "aaa");
// start the new activity
startActivity(intent, options.toBundle());

主要通过设置ActivityOptions.makeSceneTransitionAnimation 声明要在转换时共享的view是哪个,其中后两个参数分别是要共享的view以及设置的共享元素名称。

经过以上简单的设置,即可在程序中使用共享元素转换效果了。

例子里使用了RecyclerView作为列表,并在列表中对图片进行了简单尺寸压缩。
详情见源码


之前在腾讯动漫上也看到这个效果了,不过现在好像都取消了,不知道为什么,可能是因为不兼容低版本手机么?

0
0
查看评论

Android SharedElement详解

转至:http://blog.csdn.net/mr_wrong1/article/details/49669275 概述 SharedElement是什么,翻译是共享元素,但是光说也说不出个杰宝来,no picture say a jb,先看一下效果图,省好多话。 ...
  • h183288132
  • h183288132
  • 2016-04-11 11:16
  • 5162

Android开发 之 共享元素

共享元素 如果要在两个拥有共享元素的操作行为之间安排屏幕转换动画: 1.请在您的主题中启用窗口内容转换。 true 2.在您的风格中指定一个共享元素转换。给要共享的元素设置transitionname 3.将您的转换定义为 XML 资源。共享元素动画可以使用xml定义 4.利...
  • z_x_Qiang
  • z_x_Qiang
  • 2017-07-25 11:10
  • 487

Android动画共享元素(例列表图片放大到详情图片动画)

一、什么是共享元素简单来说共享元素就是两个Activity中都拥有此元素,在第二个Activity中进行强调而展示一些的动画效果。例如圆按钮的漂移动画。图片的放大动画。二、为什么使用共享元素主要是因为在Android5.0以后google推出了 Material Design的设计风格,在Adnro...
  • xuanguofeng
  • xuanguofeng
  • 2017-01-03 13:29
  • 629

Android中Activity切换时共享视图元素的切换动画(4.x兼容方案)

上一篇讲了使用 Google 的 AppCompat-v7 来实现 Activity 切换时实现共享视图元素的切换动画。这一篇介绍两个可以兼容 4.x 的两个第三方方案。上一篇:Android中Activity切换时共享视图元素的切换动画(5.0以上)方案一:PreLollipopTransitio...
  • cnzx219
  • cnzx219
  • 2015-07-30 22:09
  • 2727

Android共享元素场景切换动画的实现

我们知道安卓5.0系统引入了共享元素的概念,能做出非常炫酷的场景切换效果,这让人非常兴奋但是又非常蛋疼,因为低版本没法使用啊,所以今天就跟大家分享一下自己写的一个库,其实只有2个文件而已,还是叫它工具比较合适吧......非常轻量级,简直是人畜无害,兼容安卓5.0以下的版本。
  • u012199331
  • u012199331
  • 2017-05-15 13:41
  • 2388

RecyclerView瀑布流+activity切换元素共享效果+CirclerReveal动画

  • 2016-03-31 15:46
  • 38.09MB
  • 下载

RecyclerView+CardView+共享元素+调色板的综合demo

RecyclerView+CardView+共享元素+调色板的综合demo,利用RecyclerView实现了瀑布流的效果,并且每个item用的是cardView,有圆角和阴影的效果,并且每个cardView使用了调色板取色,点击跳转效果加入了共享元素的效果。
  • u011007829
  • u011007829
  • 2015-05-21 11:31
  • 1508

深入理解 Shared Element Transition (part 3a)

深入理解 Shared Element Transition (part 3a)
  • k_tiiime
  • k_tiiime
  • 2015-05-06 14:00
  • 1236

深入理解共享元素变换(Shared Element Transition)-上

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0201/2394.html http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0201/2394.html...
  • u011904605
  • u011904605
  • 2017-03-04 17:58
  • 544

深入理解Android L新特性之 页面内容&共享元素过渡动画

今天我们来聊聊Android L(5.0)引入的新特性:页面内容过渡动画和页面共享动画,这两个特性都是基于我们前面已经说过的Transition动画,如果你对Transition动画不太属性,请先看我前面的两篇文章。在5.0之前,我们从一个Activity A进入到另外一个Activity B时...
  • wangwangli6
  • wangwangli6
  • 2017-04-17 14:55
  • 758
    个人资料
    • 访问:82893次
    • 积分:1194
    • 等级:
    • 排名:千里之外
    • 原创:35篇
    • 转载:7篇
    • 译文:0篇
    • 评论:23条
    文章分类
    最新评论