在Activity内部做过渡动画:TransitionManager 和 Scene 的使用

1. 为每个Scene定义1个布局文件,并准备好包含这些布局的parent ViewGroup

例如,res/layout/activity_transition_manager.xml 为 Activity 的content view,其中,id为sceneRoot的ViewGroup 用来包含多个Scene的布局


http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

...

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/sceneRoot”> // 这货就是各个 Scene 对应的布局 的parent ViewGroup

// include一个Scene的布局文件。

// 可以去掉这行,然后在onCreate()中使用 mScene1.enter()

为parent ViewGroup 设置初始的布局,有两种方法:

第1种是像上面一样,include 一个Scene对应的布局

第2种是在 onCreate() 中,使用 mScene1.enter(),将mScene1对应的布局添加到parent ViewGroup中

差异是,对前者,parent ViewGroup 没有 current Scene,对后者,parent ViewGroup 有current Scene 是mScene1,

current Scene 是 parent ViewGroup 中当前正在使用的Scene,即正在显示这个Scene对应的布局

使用 Scene.getCurrentScene(View) 和 Scene.setCurrentScene(View, Scene) 方法获取和设置 current Scene

3个Scene,对应3个布局文件,分别是

res/layout/activity_transition_manager_scene1.xml


http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/container">

android:layout_width="100dip"

android:layout_height="50dip"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:background="#f00"

android:id="@+id/view1”/> // 在3个布局中的id相同

android:layout_width="100dip"

android:layout_height="50dip"

android:layout_alignParentTop="true"

android:layout_alignParentRight="true"

android:background="#0f0"

android:id="@+id/view2”/>// 在3个布局中的id相同

res/layout/activity_transition_manager_scene2.xml


http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/container">

android:layout_width="100dip"

android:layout_height="100dip"

android:layout_alignParentTop="true"

android:layout_alignParentRight="true"

android:background="#f00"

android:id="@+id/view1”/>// 在3个布局中的id相同

android:layout_width="100dip"

android:layout_height="100dip"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:background="#0f0"

android:id="@+id/view2”/>// 在3个布局中的id相同

res/layout/activity_transition_manager_scene3.xml


http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/container">

android:layout_width="100dip"

android:layout_height="50dip"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:background="#f00"

android:id="@+id/view1”/>// 在3个布局中的id相同

android:layout_width="100dip"

android:layout_height="50dip"

android:layout_alignParentTop="true"

android:layout_alignParentRight="true"

android:background="#0f0"

android:id="@+id/view2”/>// 在3个布局中的id相同

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:orientation="vertical"

android:id="@+id/grayscaleContainer”>// 只有这个Scene中才存在该子View,因此该Scene和其他Scene切换时,需要单独为这个子View添加transition,例如fade,slide,explode

android:layout_width="match_parent"

android:layout_height="10dip"

android:background="#000"

android:id="@+id/gray1"/>

其实,这只是定义Scene对应的布局的一种方法而已,还可以直接把1个View对象设置给Scene,Scene对应的布局即为该View对象

在此之所以这么做,一是因为用xml定义布局比较普遍,

二是在用xml定义TransitionManager时,Scene的布局(用android:fromScene和android:toScene指定)也必须是xml格式

2. 在Activity 的 onCreate() 中 定义多个Scene 和 TransitionManager

例如:

publicclassActivityTransitionManagerextendsActivity {

ScenemScene1,mScene2,mScene3;// 前面的3个布局,每个对应1个Scene

ViewGroupmSceneRoot;// 用来包含Scene对应布局的parent ViewGroup

TransitionManagermTransitionManager;// 用来管理Scene切换的对象

@Override

protectedvoidonCreate(BundlesavedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_transition_manager);

mSceneRoot= (ViewGroup) findViewById(R.id.sceneRoot);// 必须找到包含Scene的parent ViewGroup,后续很多地方都要用到它

TransitionInflaterinflater= TransitionInflater.from(this);

// 将 Scene,Scene对应的布局,包含布局的parent ViewGroup 关联起来

// 注意,有多种方法用来创建Scene对象,这只是其中一种而已,前面已经描述过

mScene1= Scene.getSceneForLayout(mSceneRoot, R.layout.activity_transition_manager_scene1,this);

mScene2= Scene.getSceneForLayout(mSceneRoot, R.layout.activity_transition_manager_scene2,this);

mScene3= Scene.getSceneForLayout(mSceneRoot, R.layout.activity_transition_manager_scene3,this);

// 从 res/transition/transitions_mgr 文件中inflate出 TransitionManager 对象,需要给定 parent ViewGroup

mTransitionManager=inflater.inflateTransitionManager(R.transition.transitions_mgr,mSceneRoot);

}

}

3. 在xml 中定义 TransitionManager 对象

res/transition/transitions_mgr.xml


http://schemas.android.com/apk/res/android">

// 从 mScene1 切换到 mScene2

android:toScene="@layout/activity_transition_manager_scene2"

android:transition="@transition/changebounds"/>

// 从 mScene2 切换到 mScene1

android:toScene="@layout/activity_transition_manager_scene1"

android:transition="@transition/changebounds"/>

// 从其他 Scene 切换到 mScene3

android:transition="@transition/changebounds_slidein_together"/>

// 从 mScene3 切换到 mScene1

android:toScene="@layout/activity_transition_manager_scene1"

android:transition="@transition/changebounds_fadeout_sequential"/>

// 从 mScene3 切换到 mScene2

android:toScene="@layout/activity_transition_manager_scene2"

android:transition="@transition/changebounds_fadeout_sequential"/>

其中,包含多个,每个定义了一次Scene切换时用到的过渡动画,

android:fromScene表示切换前的布局

android:toScene表示切换后的布局

android:transition表示切换过程中用到的过渡动画

android:fromScene和android:toScene可以同时给出,也可以只给出后者,不允许只给出前者

同时给出时,表示从一个Scene切换到另一个Scene,即一个布局切换到另一个布局

只给出android:toScene时,表示从其他Scene切换到某一个Scene,即从其他布局切换到某一个布局

在 transitions_mgr.xml 中用到的过渡动画分别为

res/transition/changebounds.xml


// 平滑地改变id相同的View的位置和大小

res/transition/changebounds_fadein_together.xml


http://schemas.android.com/apk/res/android">

// 平滑地改变id相同的View的位置和大小

// 对id为 grayscaleContainer 的View,使用特定的过渡动画,这里是淡入的效果

// 这个view 只有 mScene3 中才有,因此 mScene3 和其他Scene切换时,有必要单独为这货单独指定过渡动画

res/transition/changebounds_fadeout_together.xml


http://schemas.android.com/apk/res/android"

android:transitionOrdering="sequential">

// 平滑地改变id相同的View的位置和大小

// 对id为 grayscaleContainer 的View,使用特定的过渡动画,这里是淡出的效果

// 这个view 只有 mScene3 中才有,因此 mScene3 和其他Scene切换时,有必要单独为这货单独指定过渡动画

需要指出的是,上面的 changebounds_fadein_together.xml 和 changebounds_fadeout_together.xml 还有一个差异,

后者指定了android:transitionOrdering值为"sequential",而前者使用的是默认值"together"

即为 TransitionSet 对象,其中包含了一系列的Transition子类,每个代表一个过渡动画,

"sequential"表示各个过渡动画依次运行

"together"表示各个过渡动画同时运行

如果把上面的 fade 替换成 slide 或 explode,你可以看到不同的效果

在 TransitionManager.getTransition() 中可以看出,如果你没有指定过渡动画,TransitionManager 会使用默认的过渡动画,AutoTransition,

在 AutoTransition 中,指定了android:transitionOrdering值为"sequential”, 具体行为:

先为不再存在的子View执行 淡出 的过渡动画

后为 共同的子View执行changeBounds 的过渡动画

最后为新添加的子View执行 淡入 的过渡动画

4. 启动Scene切换,即布局切换

一般,用户点击了某个按钮,在按钮的事件处理函数中,启动Scene切换

publicclassActivityTransitionManagerextendsActivity {

...

// 4个按钮的 事件处理函数

publicvoidselectScene(Viewview) {

switch(view.getId()) {

caseR.id.button1:// 按下第1个按钮,显示 mScene1,即切换到 mScene1 对应的布局

mTransitionManager.transitionTo(mScene1);

break;

caseR.id.button2:// 按下第2个按钮,显示 mScene2,即切换到 mScene2 对应的布局

mTransitionManager.transitionTo(mScene2);

break;

caseR.id.button3:// 按下第3个按钮,显示 mScene3,即切换到 mScene3 对应的布局

mTransitionManager.transitionTo(mScene3);

break;

caseR.id.button4:// 按下第4个按钮,我们改变子View的大小,TransitionManager 会自动帮我们做过渡动画

// scene4 is not an actual 'Scene', but rather a dynamic change in the UI,

// transitioned to using beginDelayedTransition() to tell the TransitionManager

// to get ready to run a transition at the next frame

// 这里没有给定具体的过渡动画,则使用默认的过渡动画 AutoTransition

TransitionManager.beginDelayedTransition(mSceneRoot);

setNewSize(R.id.view1, 150, 25);

setNewSize(R.id.view2, 150, 25);

break;

}

}

}

5. 使用 TransitionManager.beginDelayedTransition() 类,为布局中子View的移动,新增,删除,改变大小等增加过渡动画

注意:子View必须有相同的id和相同的层级结构,但是并不要求是同一种View,例如可以由Button变为ImageView

并且,如果有嵌套,子View的parent的id也必须相同

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,744评论 25 707
  • 前言 早在Android 4.4,Transition 就已经引入,但在5.0才得以真正的实现。而究竟Transi...
    justCode_阅读 1,279评论 2 8
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,365评论 0 17
  • 有一种喜欢,是第一次与你交谈,便对你心存好感。 有一种喜欢,是未曾与你相见,却让我有了淡淡思恋。 有一种喜欢,是你...
    阮阿阮阅读 871评论 8 5
  • 劳动路 赵向向 华为 像素一个副摄像头 今山 新颖 f1.7比2.0 光圈提升多少 今山 梦婷 双核对焦比单个对...
    F木槿阅读 202评论 0 0