MTransition
最近写了一个动画库,叫MTransition,顾名思义,就是过场动画、页面切换动画用的。它可以提高你开发页面切换动画的效率,用一些简单的代码实现非常复杂的动画。跨Activity的动画也适用。
现在代码已经开源,欢迎大家Star:https://github.com/HJ-Money/MTransition
Demo Apk
下载链接:https://github.com/HJ-Money/MTransition/raw/master/Introduction/mtransition_demo.apk
先看效果
在上面的动图示例中,动画执行前后分别是两个不同的Activity。如下图:
像这种跨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的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