『Android-技能篇』优雅的转场动画之-Transition---掘金技术征文-双节特别篇

相信大家在平常开发也会遇到类似的转场动画,如果想要要实现上图的效果有哪些方式呢?

首先分析一下转场过程,我们把起始 View 分别定义为 startViewendViewstartView 为常见的列表布局,左侧头像和右侧为文本介绍;endView 为详情页面,置顶的大图和详细的文本介绍。

不难发现,这些元素都是对应关系,只不过起始状态的基本属性不同:

  • 头像,位置和大小以及 scaleType 发生变化
  • 背景,颜色、位置和大小发生变化
  • 名称,字体大小、颜色和位置发生变化
  • 描述,字体大小和位置发生变化

对于此效果,有很多办法可以实现,综合其实现成本和预期效果进行最终选择,我能想到的大概有三种:

  1. 直接把上述的每个对象看做是独立个体,各自创建独立的动画对象,控制其执行和结束状态。

这种方式,无疑是最简单粗暴的,但是实现和维护起来都很困难,更不容易拓展

  1. 使用 MotionLayout,不得不说很强大,是 Google 推崇的动画组件,基本不用编写 java 代码就可完成负责的手势和动画,后面有时间会介绍。

  2. 使用 Transition,Google 在 Android 5.0 完整引入,虽没有 MotionLayout 那么强大,但是其复用性很强,并且很容易理解,上手也很快。

今天咱们就以下面三个方向并结合对应效果来带大家了解一下 Transition。

  1. 原生提供的 Transition
  2. 自己实现 Transition
  3. Scene

原生 Transition

准备

核心关键类 TransitionManager, TransitionManager.beginDelayedTransition(ViewGroup viewGroup, Transition transition); 作为动画的开始,传入需要做转场动画的父布局或根布局,随后改变 View 的相关属性,比如 setVisible(),便可自动完成转场动画效果。

默认实现的 AutoTransition,内部集成了基础动画:

private void init() {
setOrdering(ORDERING_SEQUENTIAL);
addTransition(new Fade(Fade.OUT)).
addTransition(new ChangeBounds()).
addTransition(new Fade(Fade.IN));
}
复制代码

Slide、Fade 和 Explode

这三者作为 Visibility 的三个子类,通过控制 view.setVisible() 的方式来达到具体的效果。

Fade,淡出 出场,淡入 入场

Slide,向下离开屏幕出场,向上进入屏幕入场

Explode,四边散开出场,四边汇入入场

同样,可以通过:

Fade fade = new Fade();
Slide slide = new Slide();
TransitionSet set = new TransitionSet();
se

你可能感兴趣的:(程序员,android)