开始使用 Transitions（过渡动画） (part 1)

开始使用 Transitions（过渡动画） (part 1)

>
* 原文链接 : Getting Started with Activity & Fragment Transitions (part 1)
* 译者 : tiiime
* 校对者: chaossss

开始使用 Transitions

首先

这篇文章主要介绍 Android 5.0 新加入的 Transition (过渡动画) API，这是这个系列的第一篇文章。主要介绍下面几个话题:

• Part 1: 在 Activity 和 Fragment 中使用 Transition
• Part 2: 深入理解 Transition
• Part 3a: 深入理解共享元素的 Transition
• Part 3b: 延迟共享元素的 Transition
• Part 3c: 共享元素回调实践 (coming soon!)
• Part 4: Activity & Fragment 过渡动画示例(coming soon!)

今天这篇文章是 Transition 的概述，同时也象征着这个专栏的开始，希望大家喜欢啦。

---

先说下什么是 Transition(过渡动画).

Lollipop 中 Activity 和 Fragment 的过渡动画是基于 Android 一个叫作 Transition 的新特性实现的。
初次引入这个特性是在 KitKat 中，Transition 框架提供了一个方便的 API 来构建应用中不同 UI 状态切换时的动画。
这个框架始终围绕两个关键概念:场景和过渡。
场景 描述应用中 UI 的状态，过渡 确定两个场景转换之间的过渡动画。

当场景转换，Transition 的主要职责是：

1. 捕获每一个 View 的起始和结束状态
2. 根据这些数据来创建从一个场景到另一个场景间的过渡动画。

下面是一个简单示例，当用户点击，我们需要 Activity 的 View 视图产生消失和出现的效果。使用 Transition ，实现这个需求只要几行代码，代码如下：(1)

---

public class ExampleActivity extends Activity implements View.OnClickListener {
    private ViewGroup mRootView;
    private View mRedBox, mGreenBox, mBlueBox, mBlackBox;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRootView = (ViewGroup) findViewById(R.id.layout_root_view);
        mRootView.setOnClickListener(this);

        mRedBox = findViewById(R.id.red_box);
        mGreenBox = findViewById(R.id.green_box);
        mBlueBox = findViewById(R.id.blue_box);
        mBlackBox = findViewById(R.id.black_box);
    }

    @Override
    public void onClick(View v) {
        TransitionManager.beginDelayedTransition(mRootView, new Fade());
        toggleVisibility(mRedBox, mGreenBox, mBlueBox, mBlackBox);
    }

    private static void toggleVisibility(View... views) {
        for (View view : views) {
            boolean isVisible = view.getVisibility() == View.VISIBLE;
            view.setVisibility(isVisible ? View.INVISIBLE : View.VISIBLE);
        }
    }
}

---

为了更好地理解底层中发生了什么，我们一步一步地分析下这段代码，首先假设屏幕上的所有的 View 都是可见的:

1. 首先，点击按钮后调用了 beginDelayedTransition()，
   将根场景和Fade Transition对象（淡入/淡出过渡效果）作为参数传递出去。框架立即对场景中所有 View 调用 Transitions 的 captureStartValues() 方法，同时， Transitions 将记录每个 View 的可见性。
2. 调用结束后，开发者将场景中所有 View 设置为不可见的。
3. 在下一个画面，框架对场景中所有 View(近期更新的) 调用 Transitions 的captureEndValues()
   方法， Transitions 记录可见性。

4. 框架调用 Transitions 的 createAnimator() 方法。Transition 分析每一个 View 的起始/结束状态，注意到 View 的可见性发生了变化。之后 Fade 对象利用这些信息创建了一个AnimatorSet 对象，并将其返回到框架中，进而将每个 View 的 alpha 值渐变到 0f。

5. 框架运行返回的动画,让所有 View 从屏幕中淡出。

---

这个栗子强调了 Transition 框架的两个优势。第一，Transition**s 将来自开发人员的动画**概念抽象，显著的降低了
Activity 和 Fragment 内的代码量，我们只要设置好 View 的 起始 和 结束 时的状态，
Transition 会自动创建动画。其次，只要更换 Transition 对象就可以修改两个场景间的动画。
示例 Video 1.1,只要少量代码就可以创建复杂的动画效果。
后续文章会介绍如何做到。

Your browser does not implement html5 video.

Lollipop 中的 Activity & Fragment Transitions

在 Android 5.0 中， 切换 Activitys 或者 Fragments 时可以使用 Transitions 来构建精致的过场动画。
虽然在上个版本中已经引入Activity 和 Fragment 动画(通过 Activity#overridePendingTransition() 和 FragmentTransaction#setCustomAnimation() 方法)，但是动画的对象只能是Activity/Fragment整体。而新的 API 将这个特性延伸，可以为每个 View 单独设置动画，甚至可以在两个独立的 Activity/Fragment 容器内共享某些 View。

---

接下来介绍些术语。注意，虽然下面是以 Activity 为例，但是在 Fragment 中这些术语也同样有效:

假设 A 和 B 是两个 Activity，通过 A 来启动 B。
A 叫做 “调用Activity”(调用 startActivity() 的那个)
B 就是 “被调用Activity”

---

Activity transition API 是围绕退出，进入，返回还有重入过渡动画效果构建的。根据之前的定义我们可以这样描述它们:

Activity A 的 退出 Transition 确定 A 启动 B 时 A 中 View 的动画

Activity B 的 进入 Transition 确定 A 启动 B 时 B 中 View 的动画

Activity B 的 返回 Transition 确定 B 返回 A 时 B 中 View 的动画

Activity A 的 重入 Transition 确定 B 返回 A 时 A 中 View 的动画

---

最后，Transition 框架提供了 Content(内容)和共享元素(Shared Element) 两种类型的Activity过渡动画，每个都可以让我们以独特的方式自定义 Activity 切换间的动画

Content(内容) Transition 确定了非共享元素如何 进入/退出 Activity 场景

共享元素(Shared Element) Transition 确定了两个Activity 共享 View (也被叫做主角视图)的动画效果。

---

Video 1.2这段视频很好的解释了 Content Transition 和 共享元素 Transition，我猜想它使用了下面的过渡动画。

Your browser does not implement html5 video.

---

• A(调用Activity) 的退出和重入 Content Transition 都是 null。因为用户退出和重入时 Activity A中的非共享视图没有动画效果。(2)

• B(被调用Activity) 的进入 Content Transition 使用了一个自定义的 Slide Transition 将list item从底部移至屏幕中。

• Activity B 的返回 Content Transition是一个 TransitionSet，同时进行两个子 Transition:一个Slide (Gravity.TOP) Transition
  针对Activity上半部分的View，一个Slide (Gravity.BOTTOM) Transition 针对Activity 下半部分View。当用户点击按钮返回Activity A，Activity呈现一种断成两半的感觉。

• 共享元素的进入和退出 Transition 都是 ChangeImageTransform，使ImageView过渡动画可以在两个Activity间无缝衔接。

---

你可能也注意到了一个圆形的过渡动画(circular reveal)，我们会在将来的章节中介绍它是如何实现的。现在，我们来继续了解 Activity 和 Fragment transition APIs

---

介绍Activity Transition API

使用 Lollipop 的 APIs 创建一个 Activity 过渡动画 非常简单，下面的总结是实现一个过渡动画的必要步骤。在接下来的文章中我们还会介绍很多提升水平的用例，不过现在先让我们来入个门:

---

• 在你的A(调用Activity)和B(被调用Activity)的 .java 文件或者
  xml(3)布局中请求启用
  Window.FEATURE_ACTIVITY_TRANSITIONS 窗口特性，
  使用Material主题的应用默认已开启。
• 为A和B单独设置 exit 和 enter Content Transition 。
  Material主题的 exit 和 enter Content Transition 默认分别是
  null和Fade。如果没有明确定义 reenter 或 return
  Content Transition 将会使用 Activity 的 exit 和 enter
  Transition 来代替。
• 为 A 和 B 设置 exit 和 enter 共享元素 Transition。
  Material主题中 共享元素 默认设置@android:transition/move作为
  exit 和 enter 过渡动画。如果没有明确定义
  reenter 和 return 的过渡动画将会使用 Activity 的
  exit 和 enter 过渡动画作为替代。

• 启动一个包含 Content Transition 和 共享元素 Transition 的 Activity 时要调用
  startActivity(Context, Bundle)方法，并传递

  ActivityOptions.makeSceneTransitionAnimation(activity, pairs).toBundle();

  作为第二个参数，pairs 是一个 Pair< View, String > 数组，记录Activity间(4) 共享元素的View 和 相对应的特征字符串。别忘了
  在程序中或xml文件里给共享元素设置不重复的名称，否则过渡动画不会正常运行。

• 通过程序启动一个返回 Transition，调用 finishAfterTransition() 代替 finish()。
• Material主题应用默认会在他们的退出/重入 Transition 完成前一点点启动进入/返回 Content Transition，这样会在两个动画间产生一些重叠，让过渡动画更戏剧性。如果你想关闭这个特性可以调用 setWindowAllowEnterTransitionOverlap() 和
  setWindowAllowReturnTransitionOverlap() 方法或者在xml文件里给定适当的属性

---

Fragment 的 Transition API

如果你使用 Fragment 的 transition API，大部分 API 相似，但是会有一些小的不同:

• Content 的退出，进入，重入和返回 过渡动画应该在 Fragment 的.java文件中调用对应的方法或者在 xml 属性声明里设置。
• 共享元素 的进入和 返回 过渡动画应该在 Fragment 的.java文件中调用对应的方法或者在 xml 属性声明里设置。
• 鉴于Activity的 Transition 是通过调用 startActivity() 和 finishAfterTransition() 直接启动的,Fragment 的过渡是在 Fragment
  被add, remove, attach, detach, show,或 hidden 后由 FragmentTransaction 自动启动。
• 共享元素应该在transaction(事务)提交前调用addSharedElement(View, String)声明为 FragmentTransaction 的一部分。

---

结语

这篇文章里我们只是简单的介绍了 Activitiy 和 Fragment transition API，但是在接下来的文章你会发现扎实的基础给你带来的好处，
尤其是在讲到自定义过渡动画时。后面我们会非常深入的讲解 Content Transition 和 共享元素 Transition，让你更加了解 Activity 和 Fragment 背后的工作。

希望你喜欢我的文章，感谢观看～

---

1. 如果你想尝试这个例子，这里有xml代码 ↩

2. 第一眼看上去可能感觉是Activity A fade in/out 屏幕, 事实上是Activity B 在 Activity A 的上面渐变. A 中的 View 事实上是没有动画的. 你可以在被调用 Activity 的 Window 中使用setTransitionBackgroundFadeDuration()方法调节背景渐变持续时间。 ↩

3. 了解更多关于 FEATURE_ACTIVITY_TRANSITIONS 和 FEATURE_CONTENT_TRANSITIONS 窗口特性的不同可以看这里StackOverflow Post↩

4. 启动一个包含Content Transition 而不是共享元素 Transition 的Activity,可以这样创建Bundle

   ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()

   如果想完全禁用Content Transition 和 共享元素 Transition 可以将 Bundle 设为 null. ↩

---

---