MTransition介绍和使用 ---- 一个页面切换动画库（Android）

2019年6月7日 330次阅读 来源: MJun钧

MTransition

最近写了一个动画库，叫MTransition，顾名思义，就是过场动画、页面切换动画用的。它可以提高你开发页面切换动画的效率，用一些简单的代码实现非常复杂的动画。跨Activity的动画也适用。

现在代码已经开源，欢迎大家Star：https://github.com/HJ-Money/MTransition

Demo Apk

下载链接:https://github.com/HJ-Money/MTransition/raw/master/Introduction/mtransition_demo.apk

《MTransition介绍和使用 ---- 一个页面切换动画库（Android）》 demo_qrcode.png

先看效果

《MTransition介绍和使用 ---- 一个页面切换动画库（Android）》 1.gif

在上面的动图示例中，动画执行前后分别是两个不同的Activity。如下图：

《MTransition介绍和使用 ---- 一个页面切换动画库（Android）》 1.png

《MTransition介绍和使用 ---- 一个页面切换动画库（Android）》 2.png

像这种跨Activity的切换动画是现有技术比较难实现的，并且还需要响应用户的跟手操作。MTransition非常适合这种情况。

作为开发者的你，只需要完成两个Activity的UI开发即可，中间的过渡动画交给MTransiton处理，MTransiton可以完美实现你需要的各种页面切换\过渡动画，节省你的开发时间。

更多示例请看仓库代码或者SlidingActivity

需求背景

之前在各种项目中写过很多页面切换的动画，从我自身的经验来说，写这些过场动画存在以下痛点：

1、由于这些动画往往涉及两个不同模块的页面，所以代码很容易将两个模块耦合在一起；

2、大部分过场动画的动画驱动层代码是非常类似的，仅仅是动画的元素和动画路径不一样。这样每次写一个新的动画，都有一部分代码以前写过，现在不得不又写一遍。重复代码多，重复造轮子；

3、有很多动画其实效果很简单，但是由于需要计算位置，计算动画属性值，各种繁琐的计算，然后又需要控制View的显示和消失等，有时候View的宽高还不确定，要等第一帧绘制完之后才能做动画，结果代码就分开好几块地方。这些都繁琐的小问题堆在一起，导致代码看起来相当复杂，可读性也不强；

所以我就想做一个过场动画的库MTransition，解决这些问题，节省开发成本。

使用MTransition

MTransition适用于所有页面的切换动画，这里的页面不一定是Activity，也可以是Fragment、Window或者是同一个Activity的两个View，但是页面必须是占满整个屏幕的，否则可能会出现效果不符合预期。

你可以通过Gradle引用它：
compile 'com.mjun:mtransition:0.1.3'

现假设我们需要实现一个从页面A(FromPage)到页面B(ToPage)的过渡动画，首先我们先完成页面A和页面B本身的UI开发，然后可以用MTransition完成过渡动画。

基础用法

step1、在页面A打开页面B之前创建MTransition，并设置页面A最外层的View给MTransition：

final MTransition transition = MTransitionManager.getInstance().createTransition("example");
transition.fromPage().setContainer(mContainerView, new ITransitPrepareListener() {
    @Override
    public void onPrepare(MTransitionView container) {
        // 传递需要做动画的View
        transition.fromPage().addTransitionView("icon", mIconView);
        ...
    }
});

step2、在页面B创建之后，且在页面显示之前，设置页面B最外层的View给MTransition，同时告诉MTransition页面的View要做哪些动画，调整View顺序等：

final MTransition transition = MTransitionManager.getInstance().getTransition("example");
transition.toPage().setContainer(mContainerView, new ITransitPrepareListener() {
  @Override
  public void onPrepare(MTransitionView container) {
      // 设置动画属性
      container.alpha(0f, 1f);
      MTransitionView icon = transition.toPage().addTransitionView("icon", mImageView);
      transition.fromPage().getTransitionView("icon").above(icon).transitTo(icon, true);
  }
});

step3、设置动画时长，然后start MTransition，一个过渡动画即完成

transition.setDuration(500);
transition.start();
NOTE：

1、如果页面A和B是Activity的话，因为Activity默认是有Activity的进场退场动画，所以需要在startActivity()和finish()之后调用以下代码：

startActivity(intent);
MTranstionUtil.removeActivityAnimation(this);

finish();
MTranstionUtil.removeActivityAnimation(this);

2、在确定不再需要当前页面的MTransition时，请务必调用destoryTransition()来销毁MTransition，不然会内存泄漏：

MTransitionManager.getInstance().destoryTransition("example");

进阶用法

反向动画

在页面B返回页面A时，你很有可能需要刚才的过渡动画反向执行一次，这时候可以调用reverse()，执行一遍反向动画，当然你可以随时改变动画路径，
例如你可以改变动画时长、甚至完全换一个过渡动画；

final MTransition transition = MTransitionManager.getInstance().getTransition("example");
transition.reverse();
定格动画

你可以调用setProgress()让动画停留在你想要的地方，因此你可以利用这点实现跟手动画，具体请参考本仓库代码；

自定义动画

MTransition已经提供了一堆基础的动画api，例如平移、旋转、缩放、透明度等。这些api已经可以满足大部分需求，但是如果你需要一些形变或者更加复杂的动画，
你就需要自定义动画。

step1、将你的自定义动画View实现ITransitional接口

step2、调用replaceBy()接口，将你的自定义动画View替换原本的View，让它在过渡动画过程中做动画

该方案可以结合Lottie或者其他动画库，实现一些非常酷炫的效果，如下图，具体请参考本仓库代码中的Demo5、6、7；

《MTransition介绍和使用 ---- 一个页面切换动画库（Android）》 2.gif
《MTransition介绍和使用 ---- 一个页面切换动画库（Android）》 3.gif

其他

各种用法请详细参考MTransition的Demo代码。

SlidingActivity

SlidingActivity是一个基于MTransition做的UI框架，你不需要改动任何代码，只需让你的Activity继承仓库中的BaseTransitionActivity，就可以自动实现边缘滑动过场动画。更多效果可以自己改造自定义。

具体请参考：https://github.com/HJ-Money/SlidingActivity

MTransition的优点

1、提升效率，实现简单，实现上面的效果只需极少的核心代码；

2、解耦，页面模块不再有交集，非常独立，并且所有动画相关的代码都交给MTransition处理，页面只写布局即可，页面内不需要再处理动画，只需向MTransition配置你的动画路径；

3、将底层的动画框架封装起来，减少重复代码，同时把计算的代码都处理好；

4、可以实现跨Activity的过渡，也可实现同一个Activity不同View切换的动画；

5、几乎可以在不修改原有代码的基础上，为页面切换增加过渡动画；

6、支持自定义（可以结合Lottie），可以实现的效果十分丰富，没有上限；

7、天生支持跟手动画，原路径回退动画（其实就是可以控制动画的进度）；

更详细的使用说明

更详细的使用说明，请看下一篇文章：MTransition使用示例、Q&A

    原文作者：MJun钧
    原文地址: https://www.jianshu.com/p/f101d9bb6a9b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞