Android界面元素动画,Android炫酷的Activity切换效果，共享元素

原标题：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

从中心移入或移出

从边缘移入或移出

调整透明度产生渐变

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

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

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

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

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

常用属性如下：

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

喏，这不就是了。

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

在 Java 代码中定义：

在 Xml 资源定义：

可选类型：

3. 设置 Transition 的时机

到底该什么时候，设置什么样的过渡呢？

以下为动画的设置场景：

首先打开页面A ：

页面A -> Enter 首次进入

从 A 打开 B ：

页面A -> Exit 退出

页面B -> Enter 首次进入

从 B 返回 A ：

页面B -> Return 返回

页面A -> Reenter 重新进入

可设置的方法如下：

以上为 style 中设置属性，在代码中设置为：

4. 跳转页面

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

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

跳转页面：

退出页面：

注意：退出时，一定要调用：finishAfterTransition();

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

Shared Elements Transition 共享元素

效果如图：

Shared Elements Transition

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

来说说不同的地方。

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

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

代码如下：

增加的参数的介绍：

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

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

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

changeClipBounds - 裁剪目标视图边界

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

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

设置代码：

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

TransitionManager 控制动画

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

TransitionManager

简单的说明一下步骤：

定义需要切换 layout xml页面；

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

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

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

以下为代码片段：

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

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

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

CircularReveal 显示或隐藏 的效果

ViewAnimationUtils.createCircularReveal()

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

CircularReveal

参数说明：

显示 View ：

隐藏 View ：

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

值得大家研究一下。

此文是我的一个总结。

项目地址：

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

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

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

大家可以参考参考。返回搜狐，查看更多

责任编辑：