基于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()的效果如下

image

也可以通过自己通过Controller控制进度,比如关联滑动,可以获得如下效果

image

具体实现请自行查阅源码.

原理

现在是实现原理时间,这个实现是基于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生成器来做(呵呵呵,其实是写算法是非常麻烦的事情,不想写罢了,再其实是写不出来).所以转场动画的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对象.

切换效果如下

image

原理

这个大部分的实现还是基于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删除,写这部分逻辑的时候栽坑里好多次,都是时序问题导致的.........每次都要找很久才找到问题原因...心酸...........

代码的具体实现请自行查阅源码吧!

源码

ClipPathLayout