Android动画之场景变换Transition动画的使用

Transition 概述

Trasition 内部保存了所有关于动画的信息,当场景变换时动画将在目标对象上执行。Transition基于两个概念:场景(scenes)和变换(transitions),场景是UI当前状态,变换则定义了在不同场景之间动画变化的过程。

Transition分为三种类型(android5.0中使用)。
进入动画:Activity中的所有视图进入屏幕的动画。
退出动画:Activity中的所有视图退出屏幕的动画。
共享元素动画:利用共享的元素实现Activity的跳转动画。
进入动画和退出动画合称Content Transition(内容变换动画),所以Transition分为内容变换动画和共享元素动画。

当一个场景改变的时候,transition主要负责:
捕捉每个View在开始场景和结束场景时的状态,根据两个场景(开始和结束)之间的区别创建一个Animator,所以Transition内部利用了属性动画。

如何在Activity中使用Transition

  • 在使用Transition 的activity中需要启用transition ,可以通过代码也可以通过设置主题:

代码方式,在setContentView之前调用:
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
主题xml方式:

<item name="android:windowContentTransitions">true</item>
  • Activity中设置进入,退出Transition动画,Material主题默认会将exit的transition设置成null而enter的transition设置成Fade ,如果reenter 或者 return transition没有明确设置,则将用exit 和enter的transition替代。

  • 开始一个activity的content transition需要调用startActivity(Context, Bundle)方法,Bundle参数生成方法ActivityOptions.makeSceneTransitionAnimation(activity, pairs).toBundle();

  • 在代码中触发通过finishAfterTransition()方法触发返回动画,而不是调用finish()方法。

Fragment中使用Transition

和activity中使用大体相同,不同点如下:

  • Fragment在其FragmentTransaction执行added, removed, attached, detached, shown, ,hidden时触发动画。

  • 在Fragment commit之前,共享元素需要通过调用addSharedElement(View, String) 方法来成为FragmentTransaction的一部分。

2 Content Transition

content transition决定了非共享view元素在activity和fragment切换期间是如何进入或者退出场景的
可以利用代码或者XML方式实现。

设置Content Transition的函数:
setEnterTransition() - ActivityA 跳转到 ActivityB,ActivityB中的View进入场景的transition。
setExitTransition() - ActivityA 跳转到 ActivityB,ActivityA中的View退出场景的transition。
setReturnTransition() - 从ActivityB 返回Activity A时,ActivityB中的View退出场景的transition。
setReenterTransition() - 从ActivityB 返回Activity A时,ActivityA中的View进入场景的transition

xml中的属性

//对应setEnterTransition
<item name="android:windowEnterTransition"></item>   
//对应setExitTransition
<item name="android:windowExitTransition"></item>
//对应setReturnTransition
<item name="android:windowReturnTransition"></item>
//对应setReenterTransition
<item name="android:windowReenterTransition"></item>

系统提供的动画效果(用于content Transition)
explode(分解):从屏幕中间进或出,移动视图。
slide(滑动):从屏幕边缘进或出,移动试图。
fade(淡出):通过改变屏幕上的视图的不透明度,达到添加或移除视图。

三种效果都有对应的实现类,分别为:
分解:Explode
Xml中定义方式:<explode xmlns:android="http://schemas.android.com/apk/res/android"/>

滑动:Slide,
setSlideEdge(int slideEdge) 设置从哪个边出现或隐藏,取值为
Gravity.LEFT, Gravity.TOP, Gravity.RIGHT, Gravity.BOTTOM, Gravity.START, Gravity.END.
对应的xml中的属性为android:slideEdge
Xml中定义slide方式:

<slide xmlns:android="http://schemas.android.com/apk/res/android" android:slideEdge="bottom"/>

淡入淡出对应Fade:
Xml中使用方式:<fade xmlns:android="http://schemas.android.com/apk/res/android"/>

XML方式定义transition

explode

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<explode
    android:duration="500"
    android:interpolator="@android:interpolator/accelerate_decelerate"/>
</transitionSet>

fade

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<fade
    android:duration="500"
    android:interpolator="@android:interpolator/accelerate_decelerate"/>
</transitionSet>

slide

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <slide
        android:duration="500"
        android:slideEdge="bottom"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

xml中实现进入退出动画

Style中设置:

<item name="android:windowContentTransitions">true</item>
        <item name="android:windowEnterTransition">@transition/explode</item>
        <item name="android:windowExitTransition">@transition/fade</item>
        <item name="android:windowReenterTransition">@transition/solid</item>
        <item name="android:windowReturnTransition">@transition/explode</item>

调用

ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(Main8Activity.this);
Intent intent = new Intent(Main8Activity.this, Main7Activity.class);
startActivity(intent,activityOptionsCompat.toBundle());

退出时调用:

@Override
public void onBackPressed() {
    super.onBackPressed();
    ActivityCompat.finishAfterTransition(this);
}

代码方式实现

oncreate函数中

@Override
protected void onCreate(Bundle savedInstanceState) {
   // overridePendingTransition(R.anim.translate_left_in,0);
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    getWindow().setEnterTransition(new Explode());
    getWindow().setExitTransition(new Fade());
    Transition transition1 =  TransitionInflater.from(Main8Activity.this).inflateTransition(android.R.transition.slide_bottom);
    getWindow().setReenterTransition(transition1);
    Transition transition2 =  TransitionInflater.from(Main8Activity.this).inflateTransition(R.transition.explode);
    getWindow().setReturnTransition(transition2);
    //super.onCreate之前
    super.onCreate(savedInstanceState);

退出时调用:

@Override
public void onBackPressed() {
    super.onBackPressed();
    ActivityCompat.finishAfterTransition(this);
}

explode,fade,solid效果

explode效果

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Explode());
getWindow().setExitTransition(new Explode());
Transition transition1 =  TransitionInflater.from(Main8Activity.this).inflateTransition(android.R.transition.explode);
getWindow().setReenterTransition(transition1);
Transition transition2 =  TransitionInflater.from(Main8Activity.this).inflateTransition(R.transition.explode);
getWindow().setReturnTransition(transition2);

图片3

fade效果

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Fade());
getWindow().setExitTransition(new Fade());
Transition transition1 =  TransitionInflater.from(Main8Activity.this).inflateTransition(android.R.transition.fade);
getWindow().setReenterTransition(transition1);
Transition transition2 =  TransitionInflater.from(Main8Activity.this).inflateTransition(R.transition.fade);
getWindow().setReturnTransition(transition2);
图片4

solid

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Slide(Gravity.BOTTOM));
getWindow().setExitTransition(new Slide(Gravity.TOP));
Transition transition1 =  TransitionInflater.from(Main8Activity.this).inflateTransition(R.transition.solid);
getWindow().setReenterTransition(transition1);
Transition transition2 =  TransitionInflater.from(Main8Activity.this).inflateTransition(android.R.transition.slide_bottom);
getWindow().setReturnTransition(transition2);

图片5

]
PS:
如果从ActivityA启动ActivityB,界面切换的时候,ActivityA退出还没有完全展示exitAnimator时,ActivityB就进入了,如果想等ActivityA完全退出后ActivityB再进入可以通过设置setAllowEnterTransitionOverlap(false)(默认是true),同样可以在xml中设置:
<item name="android:windowAllowEnterTransitionOverlap">false</item>
<item name="android:windowAllowReturnTransitionOverlap">false</item>

3 共享元素动画

函数说明:
setSharedElementEnterTransition();ActivityA 跳转到 ActivityB,ActivityB进入动画transitionsetSharedElementExitTransition();ActivityA 跳转到 ActivityB,ActivityA退出动画setSharedElementReenterTransition();从ActivityB 返回Activity A时,ActivityA进入场景的transition。
setSharedElementReturnTransition();从ActivityB 返回Activity A时,ActivityB退出场景的transition。

xml中对应的设置

<item name="android:windowSharedElementEnterTransition"></item>
<item name="android:windowSharedElementExitTransition"></item>
<item name="android:windowSharedElementReenterTransition"></item>
<item name="android:windowSharedElementReturnTransition"></item>

系统提供的自定义动画
changeBounds:改变目标视图的布局边界,也就是改变view的宽高或者位置。
changeClipBounds:裁剪目标视图边界,view的裁剪区域边界。
changeTransform:改变目标的缩放比例和旋转角度,对view进行缩放,旋转操作。
changeImageTransform:改变目标图片的大小和缩放比例,也就是改变图片的ScaleType。
overlay:覆盖
arcMotion:圆弧效果

对应的类:
ChangeBounds -捕获共享元素的layout bound,然后播放layout bound变化动画。ChangeBounds 是共享元素变换中用的最多的,因为前后两个activity中共享元素的大小和位置一般都是不同的。
ChangeTransform - 捕获共享元素的缩放(scale)与旋转(rotation)属性 ,然后播放缩放(scale)与旋转(rotation)属性变化动画。
ChangeClipBounds - 捕获共享元素clip bounds,然后播放clip bounds变化动画,view的裁剪区域边界。
ChangeImageTransform - 捕获共享元素(ImageView)的transform matrices 属性,然后播放ImageViewtransform matrices 属性变化动画。与ChangeBounds相结合,这个变换可以让ImageView在动画中高效实现大小,形状或者ImageView.ScaleType 属性平滑过度。

getWindow().setSharedElementsUseOverlay(true); overlay效果开启

定义xml文件
changeBounds

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds
        android:duration="1000"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

changeClipBounds

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeClipBounds
        android:duration="1000"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

changeImageTransform

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

changeTransform

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeTransform
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

style中设置

<item name="android:windowContentTransitions">true</item>
<item name="android:windowSharedElementEnterTransition">@transition/changebounds</item>
<item name="android:windowSharedElementExitTransition">@transition/changeclipbounds</item>
<item name="android:windowSharedElementReenterTransition">@transition/changeimagetransform</item>
<item name="android:windowSharedElementReturnTransition">@transition/changetransform</item>
 Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(Main8Activity.this,gongxiang,"shareElement").toBundle();
 Intent intent = new Intent(Main8Activity.this, Main7Activity.class);
 startActivity(intent,bundle);
<ImageView
    android:id="@+id/gongxiang"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="400px"
    android:src="@drawable/image_home_game_nor2"
    android:transitionName="shareElement"/>
<ImageView
    android:id="@+id/toptop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/image_home_game_nor"
    android:scaleType="fitCenter"
    android:transitionName="shareElement"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

Main8Activity和Main7Activity 共享两个圆形imageView:

代码实现

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
ChangeBounds changeBounds = new ChangeBounds();
changeBounds.setDuration(1000);
ChangeClipBounds changeClipBounds = new ChangeClipBounds();
changeClipBounds.setDuration(1000);
ChangeImageTransform changeImageTransform = new ChangeImageTransform();
changeImageTransform.setDuration(1000);
ChangeTransform changeTransform = new ChangeTransform();
changeTransform.setDuration(1000);
getWindow().setSharedElementEnterTransition(changeBounds);
getWindow().setSharedElementExitTransition(changeClipBounds);
getWindow().setSharedElementReenterTransition(changeImageTransform);
getWindow().setSharedElementReturnTransition(changeTransform);

开启Overlay

Overlay的具体效果不太明白,但是从语义来说应该是让动画更加的融合自然。
getWindow().setSharedElementsUseOverlay(true);


image

参考:
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0201/2394.html

Animation动画概述和执行原理
Android动画之补间动画TweenAnimation
Android动画之逐帧动画FrameAnimation
Android动画之插值器简介和系统默认插值器
Android动画之插值器Interpolator自定义
Android动画之视图动画的缺点和属性动画的引入
Android动画之ValueAnimator用法和自定义估值器
Android动画之ObjectAnimator实现补间动画和ObjectAnimator自定义属性
Android动画之ObjectAnimator中ofXX函数全解析-自定义Property,TypeConverter,TypeEvaluator
Android动画之AnimatorSet联合动画用法
Android动画之LayoutTransition布局动画
Android动画之共享元素动画
Android动画之ViewPropertyAnimator(专用于view的属性动画)
Android动画之Activity切换动画overridePendingTransition实现和Theme Xml方式实现
Android动画之ActivityOptionsCompat概述
Android动画之场景变换Transition动画的使用
Android动画之Transition和TransitionManager使用
Android动画之圆形揭露动画Circular Reveal
Android 动画之 LayoutAnimation 动画
Android动画之视图动画的缺点和属性动画的引入

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

推荐阅读更多精彩内容