原标题:Android炫酷的Activity切换效果,共享元素

本文原项目地址为:

https://github.com/lgvalle/Material-Animations

在文章最后,有我自己对着这个项目手敲的一份。

代码基本一模一样,只有略微的修改,加了一些注释,以及将其中大多数英文翻译成了中文。

此篇 API 均为 Android 5.0(API 级别 21) 以上才可支持。

此demo一共分为四部分:

1.1 普通过渡 Transition;

1.2 Shared Elements Transition 共享元素;

2.0 TransitionManager 控制动画;

3.0 ViewAnimationUtils 显示或隐藏效果。过渡效果 Transition

Material Design 为应用中的切换页面时,提供了非常优雅的视觉切换效果。

您可为进入、退出转换、页面之间的共享元素转换设置特定的动画。

1. Transition 动画都包含哪些?

Android 5.0(API 级别 21)支持的进入与退出转换有三个:

Explode

Slide

Fade

从中心移入或移出

从边缘移入或移出

调整透明度产生渐变

Android navigation 共享元素过渡 android 共享元素动画_API


Android navigation 共享元素过渡 android 共享元素动画_移出_02


Android navigation 共享元素过渡 android 共享元素动画_移出_03

一会看到使用场景的时候,就会发现上面的三张图,每张图都经历了:(此处可以一会再回过头来看)

Android navigation 共享元素过渡 android 共享元素动画_Android_04

explode:从场景的中心移入或移出

slide:从场景的边缘移入或移出

fade:调整透明度产生渐变效果

这三个类都继承于 Transition ,所有有一些属性都是共同的。

常用属性如下:

Android navigation 共享元素过渡 android 共享元素动画_API_05

至于例子,在下一个给出。

喏,这不就是了。

2. 修饰动画,定义动画的变化率(Interpolator)

在 Java 代码中定义:

Android navigation 共享元素过渡 android 共享元素动画_Android界面元素动画_06

在 Xml 资源定义:

Android navigation 共享元素过渡 android 共享元素动画_Android_07

可选类型:

Android navigation 共享元素过渡 android 共享元素动画_移出_08

3. 设置 Transition 的时机

到底该什么时候,设置什么样的过渡呢?

以下为动画的设置场景:

首先打开页面A :

页面A -> Enter 首次进入

从 A 打开 B :

页面A -> Exit 退出

页面B -> Enter 首次进入

从 B 返回 A :

页面B -> Return 返回

页面A -> Reenter 重新进入

可设置的方法如下:

Android navigation 共享元素过渡 android 共享元素动画_Android_09

以上为 style 中设置属性,在代码中设置为:

Android navigation 共享元素过渡 android 共享元素动画_API_10

4. 跳转页面

至此,用以上知识基本可以设置出绝大多数的过渡效果。

然后,跳转页面跟普通的跳转也有点不一样。

跳转页面:

Android navigation 共享元素过渡 android 共享元素动画_Android_11

退出页面:

Android navigation 共享元素过渡 android 共享元素动画_Android_12

注意:退出时,一定要调用:finishAfterTransition();

通过以上设置,就能够完成一个基本的过渡效果了。

Shared Elements Transition 共享元素

效果如图:

Android navigation 共享元素过渡 android 共享元素动画_API_13

Shared Elements Transition

共享元素的各种设置 与 普通Transition 差不多。

来说说不同的地方。

携带需要共享的 View 进行跳转

也就是在跳转的参数中,增加了要共享的 View控件。

代码如下:

Android navigation 共享元素过渡 android 共享元素动画_Android_14

增加的参数的介绍:

Android navigation 共享元素过渡 android 共享元素动画_Android界面元素动画_15

页面切换时,动画的效果设置

Android 5.0(API 级别 21)支持转换效果如下:

changeBounds - 改变目标视图的布局边界

changeClipBounds - 裁剪目标视图边界

changeTransform - 改变目标视图的缩放比例和旋转角度

changeImageTransform - 改变目标图片的大小和缩放比例

设置代码:

Android navigation 共享元素过渡 android 共享元素动画_移出_16

Shared Elements Transition 就是 特殊的 Transition 用法,都是一样的。

TransitionManager 控制动画

这个框架可以让一些复杂的动画特别简单的被实现。

Android navigation 共享元素过渡 android 共享元素动画_Android界面元素动画_17

TransitionManager

简单的说明一下步骤:

定义需要切换 layout xml页面;

调用 Scene.getSceneForLayout() 保存每个Layout;

调用 TransitionManager.go(scene1, new ChangeBounds()) 切换。

相当于定义了不同的 xml 布局,然后通过简单的调用,就完成了较为复杂的动画。

以下为代码片段:

Android navigation 共享元素过渡 android 共享元素动画_API_18

只需要定义布局,调用调转,

就实现了,点击四个 Button ,分别切换四个布局。

TransitionManager.go() 中可以设置各种动画。

CircularReveal 显示或隐藏 的效果

ViewAnimationUtils.createCircularReveal()

当您显示或隐藏一组 UI 元素时,Circular Reveal 可为用户提供视觉连续性

Android navigation 共享元素过渡 android 共享元素动画_移出_19

CircularReveal

参数说明:

Android navigation 共享元素过渡 android 共享元素动画_移出_20

显示 View :

Android navigation 共享元素过渡 android 共享元素动画_Android界面元素动画_21

隐藏 View :

Android navigation 共享元素过渡 android 共享元素动画_Android界面元素动画_22

因为,这些炫酷的效果都只支持 API 23 以上,所以在我们常用的 APP 中都还不常见。但是效果真的很不错。

值得大家研究一下。

此文是我的一个总结。

项目地址:

https://github.com/Wing-Li/Material-Animations-CN

这个项目是我对着原项目手敲的,

基本一模一样,只是加了一些注释,以及将其中英文翻译成了中文。

大家可以参考参考。