基于ClipPathLayout转场动画布局的实现

最新推荐文章于 2025-01-03 23:02:28 发布

黑客小安

最新推荐文章于 2025-01-03 23:02:28 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

文章标签： Android开发动画布局实现

本文链接：https://blog.youkuaiyun.com/Coo123_/article/details/87949680

技术文专栏收录该内容

490 篇文章

订阅专栏

本文介绍基于ClipPathLayout的转场动画布局实现，涵盖View和Fragment切换动画，详细解析TransitionFrameLayout和TransitionFragmentContainer的使用及原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于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生成器来做(呵呵呵，其实是写算法是非常麻烦的事情,不想写罢了,再其实是写不出来)。所以转场动画的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支持替换掉默认的适配器，可以设置默认的动画时间，插值器，扩散中心等信息。

但是这个动画是自动的，不支持主动控制，所以不应该直接获得其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删除，写这部分逻辑的时候栽坑里好多次，都是时序问题导致的。