Skip to content

1170762202/TransitionExample

BranchesTags
 
 

Repository files navigation

前言

早在Android 4.4，Transition 就已经引入，但在5.0才得以真正的实现。而究竟Transition是用来干嘛的呢。接下来我将通过实例和原理解析来分析下Google这个强大的动画框架。 先来张效果图镇住场面

Google Play上的Newsstand app(v3.3)

这个效果下文会介绍如何实现，不过要先理解透这个框架的一些基础概念。 Transition Framework 核心就是根据Scene(场景,下文解释)的不同帮助开发者们自动生成动画。通常主要是通过以下几个方法开启动画。

  • TransitionManager.go()
  • beginDelayedTransition()
  • setEnterTransition()/setSharedElementEnterTransition()

我们来逐一解释以上各种情况

TransitionManager.go()

首先，先介绍下Scene这个类，看看官方的解释

A scene represents the collection of values that various properties in the View hierarchy will have when the scene is applied. A Scene can be configured to automatically run a Transition when it is applied, which will animate the various property changes that take place during the scene change.

通俗的解释就是这个类存储着一个根view下的各种view的属性。通常由getSceneForLayout (ViewGroup sceneRoot,int layoutId,Context context)获取实例。

  • sceneRoot scene发生改变和动画执行的位置
  • layoutId 即上文所说的根view

可能这样解释有点无力，下面我举个例子。 栗子

private Scene scene1;
private Scene scene2;
private boolean isScene2;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_scene);
    initToolbar();
    initScene();
}

private void initScene() {
    ViewGroup sceneRoot= (ViewGroup) findViewById(R.id.scene_root);
    scene1=Scene.getSceneForLayout(sceneRoot,R.layout.scene_1,this);
    scene2=Scene.getSceneForLayout(sceneRoot,R.layout.scene_2,this);
    TransitionManager.go(scene1);
}

/**
 * scene1和scene2相互切换，播放动画 * @param view
  */
public void change(View view){
    TransitionManager.go(isScene2?scene1:scene2,new ChangeBounds());
    isScene2=!isScene2;
}

scene1: scene1 scene2: scene2

注意，两个scene布局中1和4，2和3除了图片位置大小不一样，其id是一样的。可以当成一个view.因为分析比较起始scene 的不同创建动画是针对于同一个view的。

上述简单的例子是通过第一种方式TransitionManager.go()触发动画。即在进入Activity的时候，手动将start scene通过 TransitionManager.go(scene1)设置为scene1。点击button通过TransitionManager.go(scene2，new ChangeBounds())切换到end scene状态:scene2.Transition 框架通过ChangeBounds类分析start scene和end scene的不同创建并播放动画。由于ChangeBounds类是分析比较两个scene中view的位置边界创建移动和缩放动画。发现从scene1->scene2其实是1->4,2->3。于是就执行相应的动画，即是如下效果:

scene_simple.gif

类似于ChangeBounds类的还有以下几种，他们都是继承Transiton类

  • ChangeBounds 检测view的位置边界创建移动和缩放动画
  • ChangeTransform 检测view的scale和rotation创建缩放和旋转动画
  • ChangeClipBounds 检测view的剪切区域的位置边界，和ChangeBounds类似。不过ChangeBounds针对的是view而ChangeClipBounds针对的是view的剪切区域(setClipBound(Rect rect) 中的rect)。如果没有设置则没有动画效果
  • ChangeImageTransform 检测ImageView（这里是专指ImageView）的尺寸，位置以及ScaleType，并创建相应动画。
  • Fade,Slide,Explode 这三个都是根据view的visibility的不同分别创建渐入，滑动，爆炸动画。 以上各个动画类的实现效果如下：

scene_all.gif

  • AutoTransition 如果TransitionManager.go(scene1)不指定动画，则默认动画是AutoTransition类。它其实是一个动画集合，查看源码可知其实是动画集合中添加了Fade和ChangeBounds类。
private void init() {
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new Fade(Fade.OUT)).
            addTransition(new ChangeBounds()).
            addTransition(new Fade(Fade.IN));
}

说到动画集合，其实动画类不仅可以通过类似new ChangeBounds()方法创建，也可以通过xml文件创建。且如果对于动画集合，xml方式可能会更加方便。 只需要两步，第一步在res/transition创建一个xml文件 如下: res/transition/changebounds_and_fade.xml:

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

然后再代码中调用:

Transition sets=TransitionInflater.from(this).inflateTransition(R.transition.changebounds_and_fade);

最后补充一点，关于和TransitionManager.go(scene2)其实是调用当前的scene(scene1)的scene1.exit()以及下一个scene(scene2)的scene2.enter() 而它们又分别会触发scene1.setExitAction()和scene1.setEnterAction().可以在这两个方法中定制一些特别的效果.

beginDelayedTransition()

接下来介绍下一个触发方式，如果上面的理解透了话下面的就很简单了。之前的那种TransitionManager.go()一直都是根据xml文件创造start scene和end scene,这样未免有些麻烦。 而beginDelayedTransition()原理则是通过代码改变view的属性，然后通过之前介绍的ChangeBounds等类分析start scene和end Scene不同来创建动画。

依然举个例子：

栗子x2

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_begin_delayed);
    initToolBar();
    initView();
}

@Override
public void onClick(View v) {
    //start scene 是当前的scene
  TransitionManager.beginDelayedTransition(sceneRoot, TransitionInflater.from(this).inflateTransition(R.transition.explode_and_changebounds));
    //next scene 此时通过代码已改变了scene statue
  changeScene(v);
}

private void changeScene(View view) {
    changeSize(view);
    changeVisibility(cuteboy,cutegirl,hxy,lly);
    view.setVisibility(View.VISIBLE);
}

/**
 * view的宽高1.5倍和原尺寸大小切换 * 配合ChangeBounds实现缩放效果 * @param view
  */
private void changeSize(View view) {
    isImageBigger=!isImageBigger;
    ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
    if(isImageBigger){
        layoutParams.width=(int)(1.5*primarySize);
        layoutParams.height=(int)(1.5*primarySize);
    }else {
        layoutParams.width=primarySize;
        layoutParams.height=primarySize;
    }
    view.setLayoutParams(layoutParams);
}

/**
 * VISIBLE和INVISIBLE状态切换 * @param views
  */
private void changeVisibility(View ...views){
    for (View view:views){
        view.setVisibility(view.getVisibility()==View.VISIBLE?View.INVISIBLE:View.VISIBLE);
    }
}

当触发点击事件时候，此时记录下当前scene status，然后改变被点击view的尺寸，并改变其他view的visibility，再记录下改变后的scene status。而本例中beginDelayedTransition()第二个参数传的是一个ChangeBounds和Explode动画集合，所以这个集合的中改变尺寸的执行缩放动画,改变visibility的执行爆炸效果。整体效果如下:

beginDelayed.gif

界面切换动画

前面说了那么多终于到了重头戏了:Activity/Fragment之前的切换效果。界面切换有两种，一种是不带共享元素的Content Transition一种是带有共享元素的Shared Element Transition。

Content Transition

先解释下几个重要概念：

transition_A_to_B.png

  • A.exitTransition(transition) Transition框架会先遍历A界面确定要执行动画的view(非共享元素view)，执行A.exitTransition()前A界面会获取界面的start scene(view 处于VISIBLE状态)，然后将所有的要执行动画的view设置为INVISIBLE，并获取此时的end scene(view 处于INVISIBLE状态).根据transition分析差异的不同创建执行动画。
  • B.enterTransition() Transition框架会先遍历B界面，确定要执行动画的view，设置为INVISIBLE。执行B.enterTransition()前获取此时的start scene(view 处于INVISIBLE状态)，然后将所有的要执行动画的view设置为VISIBLE，并获取此时的end scene(view 处于VISIBLE状态).根据transition分析差异的不同创建执行动画。

transition_B_to_A.png

根据上文解释，界面切换动画是建立在visibility的改变的基础上的，所以getWindow().setEnterTransition(transition);中的参数一般传的是Fade,Slide,Explode类的实例（因为这三个类是通过分析visibility不同创建动画的）。通常写一个完整的Activity Content Transiton有以下几个步骤：

  • 在style中添加
<item name="android:windowActivityTransitions">true</item>

Material主题的应用自动设置为true.

  • 设置相应的A离开/B进入/B离开/A重新进入动画。
//A 不设置默认为null
getWindow().setExitTransition(transition);
//B 不设置默认为Fade
getWindow().setEnterTransition(transition);
//B 不设置默认为EnterTransition
getWindow().setReturnTransition(transition);
//A 不设置默认为ExitTransition
getWindow().setReenterTransition(transition);

当然也可以在主题中设置

<item name="android:windowEnterTransition">@transition/slide_and_fade</item>
<item name="android:windowReturnTransition">@transition/return_slide</item>
  • 跳转界面 这里的跳转界面不能仅仅startActivity(intent), 需要
Bundle bundle=ActivityOptionsCompat.makeSceneTransitionAnimation(activity).toBundle;
startActivity(intent,bundle)

ok到这里为止既可以运行activity之间的切换动画了。 但是你会发现，在界面切换的时候，A退出时，过了一小会，B就进入了，（真是过分,不给A完全展示ExitTransition）如果你是想等A完全退出后B再进入可以通过设置setAllowEnterTransitionOverlap(false)(默认是true)，同样可以在xml中设置：

<item name="android:windowAllowEnterTransitionOverlap">false</item>
<item name="android:windowAllowReturnTransitionOverlap">false</item>

说了这么多我觉得又得举个简单例子。 A.Activity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initToolBar();
    getWindow().setExitTransition(TransitionInflater.from(this).inflateTransition(R.transition.slide));
    //未设置setReenterTransition()默认和setExitTransition一样
}

public void goContentTransitions(View view){
    Intent intent = new Intent(this, ContentTransitionsActivity.class);
    ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
    startActivity(intent,activityOptionsCompat.toBundle());
}

res/translation/slide.xml:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<slide android:duration="1000"></slide>
</transitionSet>

B.Activity:

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

    Slide slide=new Slide();
    slide.setDuration(500);
    slide.setSlideEdge(Gravity.LEFT);
    getWindow().setEnterTransition(slide);
    getWindow().setReenterTransition(new Explode().setDuration(600));

}

实现的效果如下:

contentTransition.gif

仔细看着动画你其实可以发现A的状态栏也跟着下拉上拉了，而且和下面的视图有一定的间距。处女座表示不能忍。 其实从原理上来解释，Activity的切换动画针对的是整个界面的view的visibility，而有没有什么方法能让Transition框架只关注某一个view或者不关注某个view呢。当然，transition.addTarget()和transition.excludeTarget()可以分别实现上述功能。 方便的是也可以在xml设置该属性，那么我们现在要做的是将statusBar排除掉，可以在slide.xml这样写:


<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<slide android:duration="1000">
    <targets >
        <!--表示除了状态栏-->
        <target android:excludeId="@android:id/statusBarBackground"/>
        <!--表示只针对状态栏-->
 <!--<target android:targetId="@android:id/statusBarBackground"/>-->  </targets>
</slide>
</transitionSet>

大功告成，效果我就不贴了，各位可以脑补一下...

Shared Element Transition

shared_element.png

界面切换中往往Content Transition和Shared Element Transition是同时存在的，区别于Content Transition,主要有以下几个不同点:

  • startActivity()
Bundle bundle=ActivityOptionsCompat.makeSceneTransitionAnimation(activity，pairs).toBundle;
startActivity(intent,bundle)

这里的pairs是Pair<View, String>类的实例集合，存储着两个activity之间共享view和name。这里的name要和B界面的共享view的transitionName一致。就像这样：

Intent intent = new Intent(this, WithSharedElementTransitionsActivity.class);
ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this
  ,new Pair<View, String>(shared_image,"shared_image_")
        ,new Pair<View, String>(shared_text,"shared_text_"));
startActivity(intent,activityOptionsCompat.toBundle());

//xml
<TextView
  android:text="withShared"
  android:transitionName="shared_text_"
 style="@style/MaterialAnimations.TextAppearance.Title.Inverse"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />


><de.hdodenhof.circleimageview.CircleImageView
  android:id="@+id/icon_gg"
  android:layout_centerInParent="true"
  android:src="@mipmap/xkl"
  android:transitionName="shared_image_"
  android:layout_width="150dp"
  android:layout_height="150dp" />
  • setSharedElementEnterTransition()/setSharedElementReturnTransition()

不设置的话默认是@android:transition/move动画。而setExitTransition()和setEnterTransition()默认为null和Fade.

其实Shared Element Transition原理和Content Transition类似都是根据始末scene status的不同创建动画。 不同的是Content Transition是通过改变view的visibility来改变scene状态从而进一步创建动画，而Shared Element Transition是分析A B界面共享view的尺寸，位置，样式的不同创建动画化的。所以前者通常设置Fade等Transition后者通常设置ChangeBounds等Transition.

最后的最后让我们来分析如何实现文章一开始的那个gif图效果。

  1. 整个动画包括Content Transition和Shared Element Transition。而A界面的setExitTransition()并没有设置为null。
  2. 当进入B界面，这里的共享view只是单纯的移动所以setSharedElementEnterTransition(transition)可以不用设置，默认为move。同时会执行一个水纹展开动画，这个可以通过ViewAnimationUtils.createCircularReveal()方法实现。在Shared Element Transition结束之后执行Content Transition,可以看出是Slide动画。所以可以通过设置setExitTransition(new Slide())完成。注意这里Slide只作用于底部的item(要设置target)，否则就作用于一整个视图了。
  3. 最关键的来了，在B退出时候，可以看到屏幕上半部分向上滑过，下半部分向下滑过。一种从中间撕开的视觉效果。所以可以将布局一分为二并指定为用两个不同方向的Slide的Target,差不多像这样:
<transitionSet
android:duration="800" xmlns:android="http://schemas.android.com/apk/res/android">
<slide android:slideEdge="top">
    <targets >
        <target android:targetId="@id/viewGroup_top"></target>
    </targets>
</slide>
<slide android:slideEdge="bottom">
    <targets >
        <target android:targetId="@id/viewGroup_bottom"></target>
    </targets>
</slide>
</transitionSet>

这里其实有个坑，我们先来看看isTransitionGroup()这个方法:

public boolean isTransitionGroup() {
    if ((mGroupFlags & FLAG_IS_TRANSITION_GROUP_SET) != 0) {
        return ((mGroupFlags & FLAG_IS_TRANSITION_GROUP) != 0);
    } else {
        final ViewOutlineProvider outlineProvider = getOutlineProvider();
        return getBackground() != null || getTransitionName() != null ||
                (outlineProvider != null && outlineProvider != ViewOutlineProvider.BACKGROUND);
    }
}

返回值为true表示这个ViewGroup作为一个整体执行Activity Transition，false表示这个ViewGroup中子view各自执行各自的。如果这个ViewGroup设置了background或者TransitionName，或者setTransitionGroup(true)则返回值为true表示作为一个整体执行动画. 所以这里的viewGroup_bottom和viewGroup_top最好设置下setTransitionGroup(true).

实现效果如下，自己加了点其他特效

finish

参考

About

a demo of Transition Framework

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • Java 100.0%