Android Transition Framework详解---超炫的动画框架

最新推荐文章于 2024-04-05 07:21:05 发布

Harry Potter%

最新推荐文章于 2024-04-05 07:21:05 发布

阅读量655

点赞数

分类专栏： android的成长文章标签： android 框架动画

android的成长专栏收录该内容

24 篇文章 0 订阅

订阅专栏

好长时间都没写的东西了，这段时间一直不知道该写些什么，所以今天趁着午休的时候，分享给大家点我看到的文章，写的不错，很早之前就想去实现这个，没想到今天看到了，哈哈；废话不多收，直接开车；
很早之前看过的这个动画效果是在youtobe上，一直没时间琢磨，现在看到这个感觉还不错；

前言：

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

这个效果下文会介绍如何实现，不过要先理解透这个框架的一些基础概念。

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;
}

上述简单的例子是通过第一种方式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。于是就执行相应的动画，即是如下效果:

类似于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的不同分别创建渐入，滑动，爆炸动画。

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不同来创建动画。

依然举个例子：

@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的执行爆炸效果。整体效果如下:

界面切换动画

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

Content Transition
先解释下几个重要概念：

● 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分析差异的不同创建执行动画。

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

在style中添加

<item name="android:windowActivityTransitions">true</item>

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

//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)

但是你会发现，在界面切换的时候，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>

@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));

}

仔细看着动画你其实可以发现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

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

startActivity()

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

这里的pairs是Pair

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的不同创建动画。

最后的最后让我们来分析如何实现文章一开始的那个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);
 }
}