加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
    README.md

    #6495ED  刻度条示例

    #6495ED  仿滴滴上车点和大头针动画

    #6495ED  仿网易云音乐鲸云音效

    #6495ED  嵌套滑动

    刻度条示例

    刻度线的绘制是通过不断旋转canvas画布来循环画线实现的,是比较常规的绘制方案。颜色的渐变效果,是获取每个刻度所对应的颜色段内等比例的16进制颜色值。此view的难点是外围文字在环绕过程中,坐标位置的确认,即依圆心坐标,半径,扇形角度,如何计算出扇形终射线与圆弧交叉点的xy坐标,所幸网上都能找到解决方案及背后的数学模型。

    拖动的实现是在规定的区域内,当手指按下,手指滑动,手指弹起时,不断绘制对应的进度p,给人一种圆环被拖着动画的错觉,其实这只是不断重绘的结果。通过onTouchEvent方法来监听手势及获取当前坐标即可。难点在于这是一个弧形轨迹,我们怎么通过当前坐标来获取角度,再根据角度获取相对应的进度。需要注意的是,在我们拖动小图标时,我们需要定一个特定的接收事件的区域范围,只有当用户按在了规定的可滑动区域内,才能让用户拖动进度条,并不是在任意位置都能拖动小图标改变进度的。

    仿滴滴上车点和大头针动画

    考虑到完全绘制大头针会造成Ui不通用的问题,例如实际需要的效果肯定和滴滴不同,所以如果将整个大头针通过Draw进行绘制,那么在移植这个view的时候,改动就会很大。所以现将大头针分为了顶部圆圈View和下面的针Bitmap,只通过更改自定义圆圈的大小颜色等属性来最大限度的适配Ui。

    大头针的加载动画和底部波纹扩散效果,是通过内部handler定时绘制的,每次改变半径和颜色。View的跳动动画这里选择通过AnimatorSet组合动画来实现。至于推荐上车点的圆点文字及描边效果也是通过View绘制实现的。

    仿网易云音乐鲸云音效

    波纹扩散效果,是通过定时改变波纹半径来实现的,此波纹是由先后两个空心圆组成,在实现过程中要注意时间和各自的尺寸变化。圆球效果同样也是定时绘制的结果,平滑运动只是错觉。在这里是每隔200ms(波纹的定时值)在相应的位置进行绘制的,由于波纹扩散周期较短,所以我将圆球的隔旋转周期定为了45度,可根据业务自行修改。这里的难点是在于怎么找到圆球的圆心坐标, 即根据圆心坐标,半径,扇形角度来求扇形终射线与圆弧交叉点的xy坐标的问题。

    动感环绕效果是由四段贝塞尔曲线来拟合实现的。但这种方式出来的效果跟真正的动感环绕差别很大,所以鲸云音效不太可能是由这种方式实现的。如果有更贴近的实现方法,希望不吝赐教。运动中的圆环,是不断的随机更改控制点的坐标,并为起始点添加偏移量的结果,这是一个不断调试的过程…,需要不断调整控制点来控制凸起的幅度,很难找到一个完美的效果。

    嵌套滑动

    这是当前阶段的效果,后续应该还会扩展维护:

    CompNsViewGroup的XML内用法如下,CompNsViewGroup内部包含顶部地图MapView和滑动布局LinearLayout,而LinearLayout布局的内部即我们常用的滑动控件RecyclerView,这里为何还要加层 LinearLayout呢?这样做的好处是,我们可以更好的适配不同滑动控件,而不仅仅是将CompNsViewGroup与RecyclerView耦合住。

        <com.comp.ns.CompNsViewGroup
            android:id="@+id/dd_view_group"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            didi:header_id="@+id/t_map_view"
            didi:target_id="@+id/target_layout"
            didi:inn_id="@+id/inner_rv"
            didi:header_init_top="0"
            didi:target_init_bottom="250">
    
            <com.tencent.tencentmap.mapsdk.maps.MapView
                android:id="@+id/t_map_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    
            <LinearLayout
                android:id="@+id/target_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:background="#fff">
    
                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/inner_rv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"/>
    
            </LinearLayout>
    
        </com.comp.ns.CompNsViewGroup>

    项目简介

    🚀 Github 镜像仓库 🚀

    源项目地址

    https://github.com/MingJieZuo/CustomWidget

    发行版本

    当前项目没有发行版本

    贡献者 2

    开发语言

    • Java 100.0 %