基于ClipPathLayout转场动画布局的实现
在上篇Android中不规则形状View的布局实现中讲解了ClipPathLayout的使用及核心原理实现,这篇将讲解基于ClipPathLayout扩展出来的转场动画布局的实现.
扩展的转场动画布局目前暂且有两种,一种是针对View的切换的,一种是针对Fragment切换的.
依赖
转场动画的布局存在于ClipPathLayout中,所以添加如下依赖即可
implementation 'com.yxf:clippathlayout:1.0.+'
TransitionFrameLayout
这是一个用于View转场切换的一个布局,其继承关系如下
TransitionFrameLayout -> ClipPathFrameLayout -> FrameLayout
其中ClipPathFrameLayout具备完全的FrameLayout的功能,并且增加了对不规则图形的布局支持.
TransitionFrameLayout,首先这个ViewGroup的设定就是用于做场景切换的,那么其实他只需要显示一个子View,所以在TransitionFrameLayout中修改了显示逻辑,添加的子View只有最后一个View会获得显示,其他View都是GONE隐藏状态.然后既然设定如此,那么addView和setVisibility将不建议使用,这两个方法会破坏这个ViewGroup的场景设定.然后子View的大小也要求是和TransitionFrameLayout一致的,即使用match_parent的方式,不然可能会导致出现一些不和谐的切换效果.
使用
TransitionFrameLayout 的使用非常简单,如果需要添加或者将隐藏的View显示出来只需要调用TransitionFrameLayout.switchView即可,这个方法将会把switchView的View显示出来,然后将原来显示的View隐藏.
具体的使用以简单的两个TextView为例
<com.yxf.clippathlayout.transition.TransitionFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/blue_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#880000ff"
android:gravity="center"
android:text="蓝色界面"
android:textSize="30sp" />
<TextView
android:id="@+id/green_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#8800ff00"
android:gravity="center"
android:text="绿色界面"
android:textSize="30sp" />
</com.yxf.clippathlayout.transition.TransitionFrameLayout>
mLayout = (TransitionFrameLayout) inflater.inflate(R.layout.fragment_view_transition, null);
现在绿色界面在上面显示,蓝色隐藏.
如果需要将蓝色界面切换出来,可以调用如下代码.
TransitionAdapter adapter = mLayout.switchView(mBlueView);
switchView有两个方法
@Override
public TransitionAdapter switchView(View view) {
return switchView(view, false);
}
/**
* if you want add a view , just invoke switchView directly ,
* do not invoke addView , it may cause some problem .
*
* @param view
* @return
*/
@Override
public TransitionAdapter switchView(final View view, boolean reverse) {
//.................
}
reverse为false表示动画扩张,为true表示收缩.
在switchView后获得一个adapter对象,此时蓝色界面还没有展示出来.
可以通过adapter获得一个ValueAnimator对象或者一个Controller对象.
可以直接调用
adapter.animate();
来启动场景切换动画效果.
也可以通过
adapter.getAnimator();
获得一个属性动画,自己控制动画过程.
还可以获得一个Controller对象
mController = adapter.getController();
然后通过
mController.setProgress
来控制动画的实现进度.当到达1时(进度范围0~1),即动画结束时,调用
adapter.finish();
来通知转场结束了.
直接使用adapter.animate()的效果如下
也可以通过自己通过Controller控制进度,比如关联滑动,可以获得如下效果
具体实现请自行查阅源码.
原理
现在是实现原理时间,这个实现是基于ClipPathLayout实现的,由于ClipPathLayout具备裁剪子View实现任意形状View的能力.通过这一点,其实可以让子View的Path信息发生变化,进而让子View的绘制形状发生变化.嗯,原理就是这么简单.
当前做的静态的Path形态的变化效果,如果需要做动态的,对于Path生成器的实现会比较复杂,当然动态的Path可以增加一些贝塞尔曲线之类的,实现更加炫酷的效果,有兴趣的同学可以自己尝试去实现.
实现这个动画需要解决几个问题:
- 动画的扩散点(收缩点)定在哪里?
不同的扩散点,Path是不一样的,但是也不能每次都重新写一个Path吧,这样太麻烦了,那把扩散点以参数的方式传给Path生成器吗?这样做,增加了Path生成器的工作,并不合适.最终想到的方式是通过矩阵变幻的方式,通过Path.transform方法生成一个新的Path,这样就可以实现Path的平移和缩放效果了.
- 还有一个问题是动画何时停止?
扩散肯定有个度,需要知道多大的Scale可以让Path内的区域覆盖整个View.这是一个非常难的问题,如果是一个完全闭合而且里面完全填充的Path,还可以通过类似二分查找的方式找到合适的位置,但如果Path里面有镂空的怎么办?就像半个阴阳鱼或者一个圆环,在这种情况下没有很好的办法可以找到一个非常合适的Scale去让扩大后的Path覆盖掉整个View.这里默认将使用二分法的方式找出一个合适的区域,不过基于以上问题的存在,如果Path比较特殊可以实现TransitionPathGenerator接口,这个接口比普通的Path生成器多了一个方法(maxContainSimilarRange),用于确定限定范围内的Path可以包含的最大矩形区域,这个区域当然最好是和外面传进来的区域相似的,然后获得这个区域后就可以通过计算来获得一个合适的Scale,让经过变幻后的Path可以刚好覆盖整个View.
由于直接由Path生成器获得的Path是不能直接使用的,需要转换,所以也有了一个适配器(TransitionAdapter),这个适配器负责将原始的Path进行变幻,然后再交给ClipPathLayout处理.
嗯,原理大概是这样吧!具体详情参见源码,还是写的很简单的.
TransitionFragmentContainer
这个是Fragment的容器,用于Fragment的场景切换,其继承关系如下
TransitionFragmentContainer -> TransitionFrameLayout -> ClipPathFrameLayout -> FrameLayout
没错,这个是TransitionFrameLayout的子View.
使用
这个的使用就巨简单了,将常用的Fragment容器FrameLayout在xml中替换成TransitionFragmentContainer即可
<com.yxf.clippathlayout.transition.TransitionFragmentContainer xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/app_bar_main">
</com.yxf.clippathlayout.transition.TransitionFragmentContainer>
由于这个View是继承于TransitionFrameLayout的,所以这个View支持替换掉默认的适配器,可以设置默认的动画时间,插值器,扩散中心等信息.
mContainer = findViewById(R.id.fragment_container);
RandomTransitionPathGenerator generator =
new RandomTransitionPathGenerator(new CircleTransitionPathGenerator());
generator.add(new OvalTransitionPathGenerator());
generator.add(new RhombusTransitionPathGenerator());
mContainer.setAdapter(new TransitionAdapter(generator));
但是这个动画是自动的,不支持主动控制,所以不应该直接获得其Animator或者Controller对象.
切换效果如下
原理
这个大部分的实现还是基于TransitionFrameLayout实现的,TransitionFragmentContainer需要做处理的是Fragment的添加和删除过程.
Fragment的添加和删除过程在容器中的表现就是可见性的控制和View的增加删除.
所以TransitionFragmentContainer重写了Fragment添加和删除所会用到的addView和removeView和removeViewAt方法.
直接的添加过程还是很简单的,直接在addView中调用switchView即可,但是Fragment的replace过程有点让人头疼.Fragment的replace会先调用删除然后再添加,这样的话就有个问题,如何判断他是replace,而不是remove或者add呢?这里使用的方法是remove的时候使用一个属性动画,然后在动画结束才会真正的把View删掉,如果是替换的话,还会调用到addView方法,然后在addView中取消之前remove的动画,并且继承其需要remove的View,在新的addView动画结束时将需要remove的View删除,写这部分逻辑的时候栽坑里好多次,都是时序问题导致的.........每次都要找很久才找到问题原因..............
代码的具体实现请自行查阅源码吧!
