在 Activity 和 Fragment 中使用 Transition (part-1)

转载自:Android开发技术前线 ( android-tech-frontier )

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

首先

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

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

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

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

当场景转换,Transition 的主要职责是:

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

下面是一个简单示例,当用户点击,我们需要 Activity 的 View 视图产生消失和出现的效果。使用 Transition ,实现这个需求只要几行代码,代码如下:<a id="1" href="#b1">(1)</a>

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 将开发人员所需要的动画概念抽象,减少了 Activity 和 Fragment 内的代码复用,使得我们只要设置好 View 的 起始 和 结束 时的状态,就能通过 Transition 自动创建动画。第二,只要更换 Transition 对象就可以修改两个场景间的动画。

示例 Video 1.1,只要少量代码就可以创建复杂的动画效果。
后续文章会介绍如何做到。

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 中这些术语也同样有效:

假设 AB 是两个 Activity,通过 A 来启动 B
A 叫做 "调用Activity"(调用 startActivity() 的那个)
B 就是 "被调用Activity"

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

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

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

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

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

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

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

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

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

  • A(调用Activity) 的退出重新进入 Content Transition 都是 null。因为用户退出和重新进入时 Activity A中的非共享视图没有动画效果。<a id="2" href="#b2">(2)</a>
  • 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间无缝衔接。

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

介绍Activity Transition API

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

  • 在你的A(调用Activity)和B(被调用Activity)的 .java 文件或者
    xml<a id="3" href="#b3">(3)</a>布局中请求启用
    Window.FEATURE_ACTIVITY_TRANSITIONS 窗口特性,
    使用Material主题的应用默认已开启。

  • 为A和B单独设置 exitenter Content Transition 。
    Material主题的 exitenter Content Transition 默认分别是
    nullFade。如果没有明确定义 reenterreturn
    Content Transition 将会使用 Activity 的 exitenter
    Transition 来代替。

  • 为 A 和 B 设置 exitenter 共享元素 Transition。
    Material主题中共享元素默认设置 @android:transition/move 作为
    exitenter 过渡动画。如果没有明确定义
    reenterreturn 的过渡动画将会使用 Activity 的
    exitenter 过渡动画作为替代。

  • 启动一个包含 Content Transition 和 共享元素 Transition 的 Activity 时要调用
    startActivity(Context, Bundle)方法,其中第二参数 Bundle 通过下面这段代码获得:

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

pairs 是一个 Pair< View, String > 数组,记录Activity间<a id="4" href="#b4">(4)</a> 共享元素的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代码 <a id="b1" href="#1">↩</a>

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

  3. 了解更多关于 FEATURE_ACTIVITY_TRANSITIONSFEATURE_CONTENT_TRANSITIONS 窗口特性的不同可以看这里StackOverflow Post<a id="b3" href="#3">↩</a>

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

    ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()
    

如果想完全禁用Content Transition 和 共享元素 Transition 可以将 Bundle 设为 null. <a id="b4" href="#4">↩</a>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容