android m过渡动画,MTransition介绍和使用 ---- 一个页面切换动画库（Android）

MTransition

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

Demo Apk

demo_qrcode.png

先看效果

1.gif

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

1.png

2.png

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

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

需求背景

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

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；

2.gif

3.gif

其他

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

SlidingActivity

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

MTransition的优点

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

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

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

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

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

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

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

更详细的使用说明