Android Transition Framework 详解 --- 超炫的动画框架
vnoj9675
8年前
<h2>前言</h2> <p>早在Android 4.4，Transition 就已经引入，但在5.0才得以真正的实现。而究竟Transition是用来干嘛的呢。接下来我将通过实例和原理解析来分析下Google这个强大的动画框架。</p> <p>先来张效果图镇住场面</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a44d7e9454b2e24a748786c949eac2bf.gif"></p> <p>Google Play上的Newsstand app(v3.3)</p> <p>这个效果下文会介绍如何实现，不过要先理解透这个框架的一些基础概念。</p> <p>Transition Framework 核心就是根据Scene(场景,下文解释)的不同帮助开发者们自动生成动画。通常主要是通过以下几个方法开启动画。</p> <ul> <li>TransitionManager.go()</li> <li>beginDelayedTransition()</li> <li>setEnterTransition() / setSharedElementEnterTransition()</li> </ul> <p>我们来逐一解释以上各种情况</p> <h2>TransitionManager.go()</h2> <p>首先，先介绍下Scene这个类，看看官方的解释</p> <p>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.</p> <p>通俗的解释就是这个类存储着一个根view下的各种view的属性。通常由 getSceneForLayout (ViewGroup sceneRoot,int layoutId,Context context) 获取实例。</p> <ul> <li>sceneRoot<br> scene发生改变和动画执行的位置</li> <li>layoutId<br> 即上文所说的根view</li> </ul> <p>可能这样解释有点无力，下面我举个例子。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/be70b7d350ad78b21ab35fdb40905bc6.jpg"></p> <p>栗子</p> <pre> <code class="language-java">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; }</code></pre> <p>scene1:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2b67c95be6b50b04f69f94fc21acea30.jpg"></p> <p style="text-align:center">scene1</p> <p>scene2:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/b133e00cdd44e6ea61c8592ba3bca848.jpg"></p> <p style="text-align:center">scene2</p> <p>注意，两个scene布局中1和4，2和3除了图片位置大小不一样，其id是一样的。可以当成一个view.因为分析比较起始scene 的不同创建动画是针对于同一个view的。</p> <p>上述简单的例子是通过第一种方式 TransitionManager.go() 触发动画。即在进入Activity的时候，手动将start scene通过</p> <p>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。于是就执行相应的动画，即是如下效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/2f99b76f004f66ca6d84dab703eaa511.gif"></p> <p style="text-align:center">scene_simple.gif</p> <p>类似于 ChangeBounds 类的还有以下几种，他们都是继承Transiton类</p> <ul> <li>ChangeBounds<br> 检测view的位置边界创建移动和缩放动画</li> <li>ChangeTransform<br> 检测view的scale和rotation创建缩放和旋转动画</li> <li>ChangeClipBounds<br> 检测view的剪切区域的位置边界，和ChangeBounds类似。不过ChangeBounds针对的是view而ChangeClipBounds针对的是view的剪切区域( setClipBound(Rect rect) 中的rect)。如果没有设置则没有动画效果</li> <li>ChangeImageTransform<br> 检测 <strong>ImageView</strong> （这里是专指ImageView）的尺寸，位置以及ScaleType，并创建相应动画。</li> <li>Fade,Slide,Explode<br> 这三个都是根据view的visibility的不同分别创建渐入，滑动，爆炸动画。<br> 以上各个动画类的实现效果如下：</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/8e49c73bfb784b053532ea2f38a901c7.gif"></p> <p style="text-align:center">scene_all.gif</p> <ul> <li> <p>AutoTransition</p> 如果 TransitionManager.go(scene1) <p>不指定动画，则默认动画是AutoTransition类。它其实是一个动画集合，查看源码可知其实是动画集合中添加了Fade和ChangeBounds类。</p> <pre> <code class="language-java">private void init() { setOrdering(ORDERING_SEQUENTIAL); addTransition(new Fade(Fade.OUT)). addTransition(new ChangeBounds()). addTransition(new Fade(Fade.IN)); }</code></pre> <p>说到动画集合，其实动画类不仅可以通过类似 new ChangeBounds() 方法创建，也可以通过xml文件创建。且如果对于动画集合，xml方式可能会更加方便。</p> <p>只需要两步，第一步在res/transition创建一个xml文件</p> <p>如下:</p> <strong>res/transition/changebounds_and_fade.xml</strong> <p>:</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds /> <fade /> </transitionSet></code></pre> </li> </ul> <p>然后再代码中调用:</p> <pre> <code class="language-java">Transition sets=TransitionInflater.from(this).inflateTransition(R.transition.changebounds_and_fade);</code></pre> <p>最后补充一点，关于和 TransitionManager.go(scene2) 其实是调用当前的scene(scene1)的 scene1.exit() 以及下一个scene(scene2)的 scene2.enter()<br> 而它们又分别会触发 scene1.setExitAction() 和 scene1.setEnterAction() .可以在这两个方法中定制一些特别的效果.</p> <h2>beginDelayedTransition()</h2> <p>接下来介绍下一个触发方式，如果上面的理解透了话下面的就很简单了。之前的那种 TransitionManager.go() 一直都是根据xml文件创造start scene和end scene,这样未免有些麻烦。</p> <p>而 beginDelayedTransition() 原理则是通过代码改变view的属性，然后通过之前介绍的ChangeBounds等类分析start scene和end Scene不同来创建动画。</p> <p>依然举个例子：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f544c0f667a88055d59094248c1befe7.jpg"></p> <p style="text-align:center">栗子x2</p> <pre> <code class="language-java">@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); } }</code></pre> <p>当触发点击事件时候，此时记录下当前scene status，然后改变被点击view的尺寸，并改变其他view的visibility，再记录下改变后的scene status。而本例中 beginDelayedTransition() 第二个参数传的是一个 ChangeBounds 和 Explode 动画集合，所以这个集合的中改变尺寸的执行缩放动画,改变visibility的执行爆炸效果。整体效果如下:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4b4a575c14d325769984b9f6676b83cd.gif"></p> <p style="text-align:center">beginDelayed.gif</p> <h2>界面切换动画</h2> <p>前面说了那么多终于到了重头戏了:Activity/Fragment之前的切换效果。界面切换有两种，一种是不带共享元素的Content Transition一种是带有共享元素的Shared Element Transition。</p> <h3>Content Transition</h3> <p>先解释下几个重要概念：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/980e3445d4b03bae04fb5199898e3d57.png"></p> <p style="text-align:center">transition_A_to_B.png</p> <ul> <li>A.exitTransition(transition)<br> Transition框架会先遍历A界面确定要执行动画的view(非共享元素view)，执行 A.exitTransition() 前A界面会获取界面的start scene(view 处于VISIBLE状态)，然后将所有的要执行动画的view设置为INVISIBLE，并获取此时的end scene(view 处于INVISIBLE状态).根据transition分析差异的不同创建执行动画。</li> <li>B.enterTransition()<br> Transition框架会先遍历B界面，确定要执行动画的view，设置为INVISIBLE。执行 B.enterTransition() 前获取此时的start scene(view 处于INVISIBLE状态)，然后将所有的要执行动画的view设置为VISIBLE，并获取此时的end scene(view 处于VISIBLE状态).根据transition分析差异的不同创建执行动画。</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/e7ecf6979f0844812ec680763baeb989.png"></p> <p style="text-align:center">transition_B_to_A.png</p> <p>根据上文解释，界面切换动画是建立在visibility的改变的基础上的，所以 getWindow().setEnterTransition(transition); 中的参数一般传的是 Fade , Slide , Explode 类的实例（因为这三个类是通过分析visibility不同创建动画的）。通常写一个完整的Activity Content Transiton有以下几个步骤：</p> <ul> <li>在style中添加 <pre> <code class="language-java"><item name="android:windowActivityTransitions">true</item></code></pre> Material主题的应用自动设置为true.</li> <li>设置相应的A离开/B进入/B离开/A重新进入动画。 <pre> <code class="language-java">//A 不设置默认为null getWindow().setExitTransition(transition); //B 不设置默认为Fade getWindow().setEnterTransition(transition); //B 不设置默认为EnterTransition getWindow().setReturnTransition(transition); //A 不设置默认为ExitTransition getWindow().setReenterTransition(transition);</code></pre> 当然也可以在主题中设置 <pre> <code class="language-java"><item name="android:windowEnterTransition">@transition/slide_and_fade</item> <item name="android:windowReturnTransition">@transition/return_slide</item></code></pre> </li> <li>跳转界面<br> 这里的跳转界面不能仅仅 startActivity(intent) ,<br> 需要 <pre> <code class="language-java">Bundle bundle=ActivityOptionsCompat.makeSceneTransitionAnimation(activity).toBundle; startActivity(intent,bundle)</code></pre> </li> </ul> <p>ok到这里为止既可以运行activity之间的切换动画了。</p> <p>但是你会发现，在界面切换的时候，A退出时，过了一小会，B就进入了，（真是过分,不给A完全展示ExitTransition）如果你是想等A完全退出后B再进入可以通过设置 setAllowEnterTransitionOverlap(false) (默认是true)，同样可以在xml中设置：</p> <pre> <code class="language-java"><item name="android:windowAllowEnterTransitionOverlap">false</item> <item name="android:windowAllowReturnTransitionOverlap">false</item></code></pre> <p>说了这么多我觉得又得举个简单例子。</p> <p>A.Activity:</p> <pre> <code class="language-java">@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()); }</code></pre> <p>res/translation/slide.xml:</p> <pre> <code class="language-java"><transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <slide android:duration="1000"></slide> </transitionSet></code></pre> <p>B.Activity:</p> <pre> <code class="language-java">@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)); }</code></pre> <p>实现的效果如下:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8ed0d53d2f9b8e4b022ffe6335e3b697.gif"></p> <p style="text-align:center">contentTransition.gif</p> <p>仔细看着动画你其实可以发现A的状态栏也跟着下拉上拉了，而且和下面的视图有一定的间距。处女座表示不能忍。</p> <p>其实从原理上来解释，Activity的切换动画针对的是整个界面的view的visibility，而有没有什么方法能让Transition框架只关注某一个view或者不关注某个view呢。当然， transition.addTarget() 和 transition.excludeTarget() 可以分别实现上述功能。</p> <p>方便的是也可以在xml设置该属性，那么我们现在要做的是将statusBar排除掉，可以在slide.xml这样写:</p> <pre> <code class="language-java"><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></code></pre> <p>大功告成，效果我就不贴了，各位可以脑补一下...</p> <h3>Shared Element Transition</h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/82c2047b6a7a5ba2c0b0a8802aaeae7d.png"></p> <p style="text-align:center">shared_element.png</p> <p>界面切换中往往Content Transition和Shared Element Transition是同时存在的，区别于Content Transition,主要有以下几个不同点:</p> <ul> <li>startActivity() <pre> <code class="language-java">Bundle bundle=ActivityOptionsCompat.makeSceneTransitionAnimation(activity，pairs).toBundle; startActivity(intent,bundle)</code></pre> 这里的pairs是 Pair<View, String> 类的实例集合，存储着两个activity之间共享view和name。这里的name要和B界面的共享view的 transitionName 一致。就像这样：</li> </ul> <pre> <code class="language-java">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" /></code></pre> <ul> <li>setSharedElementEnterTransition() / setSharedElementReturnTransition()</li> </ul> <p>不设置的话默认是 @android:transition/move 动画。而 setExitTransition() 和 setEnterTransition() 默认为null和Fade.</p> <p>其实Shared Element Transition原理和Content Transition类似都是根据始末scene status的不同创建动画。</p> <p>不同的是Content Transition是通过改变view的visibility来改变scene状态从而进一步创建动画，而Shared Element Transition是分析A B界面共享view的尺寸，位置，样式的不同创建动画化的。所以前者通常设置Fade等Transition后者通常设置ChangeBounds等Transition.</p> <p>最后的最后让我们来分析如何实现文章一开始的那个gif图效果。</p> <ol> <li>整个动画包括Content Transition和Shared Element Transition。而A界面的 setExitTransition() 并没有设置为null。</li> <li>当进入B界面，这里的共享view只是单纯的移动所以 setSharedElementEnterTransition(transition) 可以不用设置，默认为move。同时会执行一个水纹展开动画，这个可以通过 ViewAnimationUtils.createCircularReveal() 方法实现。在Shared Element Transition结束之后执行Content Transition,可以看出是Slide动画。所以可以通过设置 setExitTransition(new Slide()) 完成。注意这里Slide只作用于底部的item(要设置target)，否则就作用于一整个视图了。</li> <li>最关键的来了，在B退出时候，可以看到屏幕上半部分向上滑过，下半部分向下滑过。一种从中间撕开的视觉效果。所以可以将布局一分为二并指定为用两个不同方向的Slide的Target,差不多像这样: <pre> <code class="language-java"><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></code></pre> 这里其实有个坑，我们先来看看 isTransitionGroup() 这个方法: <pre> <code class="language-java">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); } }</code></pre> 返回值为true表示这个ViewGroup作为一个整体执行Activity Transition，false表示这个ViewGroup中子view各自执行各自的。如果这个ViewGroup设置了background或者TransitionName，或者 setTransitionGroup(true) 则返回值为true表示作为一个整体执行动画.<br> 所以这里的 viewGroup_bottom 和 viewGroup_top 最好设置下 setTransitionGroup(true) .</li> </ol> <p>实现效果如下，自己加了点其他特效</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4228df46272b365bb5c956c802e70af2.gif"></p> <p style="text-align:center">finish</p> <p>具体代码我就不贴了，本文的所有的代码已上传Github，包括Fragment的切换本文未作介绍代码中有写。希望大家能点个star。</p> <p>如果你看了一遍还是不知所云那我强烈建议你结合代码运行下在看一遍，其实搞懂了还是蛮简单的。</p> <p>最后我想说的是关于这个Transition Framework还有一些内容没说完，可能要等过段时间更新了，接下来还会写关于Dagger 2的相关文章以及NavigationBar的加强版，敬请期待吧。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0ca2d27c960e265a5193c8265f6457b5.jpg"></p> <p style="text-align:center">拜拜</p> <h2>参考</h2> <ul> <li><a href="/misc/goto?guid=4959737694307800702" rel="nofollow,noindex">Getting Started with Activity & Fragment Transitions</a></li> <li><a href="/misc/goto?guid=4958867433177598880" rel="nofollow,noindex">https://github.com/lgvalle/Material-Animations</a></li> </ul> <p>如果有什么错误欢迎指正。</p> <p> </p> <p>来自：http://www.jianshu.com/p/e497123652b5</p> <p> </p>