脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android动态效果

Android自定义view利用PathEffect实现动态效果

 更新时间：2022年05月11日 09:43:16   作者：计蒙不吃鱼  
这篇文章主要为大家详细介绍了Android自定义view利用PathEffect实现动态效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android自定义view利用PathEffect实现动态效果的具体代码，供大家参考，具体内容如下

前言

在上一篇此类型的文章中是改变偏移量实现动态效果，借助的方法是drawArc，这篇文章依然是改变偏移量，而借助的是PathEffect的子类。

效果图：

一、首先介绍下PathEffect的一些子类

  • CornerPathEffect：将Path的各个连接线段之间的夹角用一种更平滑的方式连接，类似于圆弧与切线的效果。 参数radius则是指定圆弧的半径。
  • DashPathEffect：将Path的线段虚线化，intervals为虚线的ON和OFF的数组，数组中元素数目需要 >= 2； 而phase则为绘制时的偏移量。
  • DiscretePathEffect：打散Path的线段，使得在原来路径的基础上发生打散效果。 segmentLength指定最大的段长，deviation则为绘制时的偏离量。
  • PathDashPathEffect：使用Path图形来填充当前的路径，shape指的填充图形，advance是每个图形间的间隔， phase为绘制时的偏移量。，style则是该类自由的枚举值，有三种情况：ROTATE、MORPH和TRANSLATE。ROTATE情况下：线段连接处的图形转换以旋转到与下一段移动方向相一致的角度进行连接。MORPH情况下：图形会以发生拉伸或压缩等变形的情况与下一段相连接。TRANSLATE情况下：图形会以位置平移的方式与下一段相连接。
  • ComposePathEffect：组合效果
  • SumPathEffect：叠加效果，和ComposePathEffect不同，在表现时会将两个参数的效果都独立的表现出来， 接着将两个效果简单的重叠在一起显示出来

二、看看子类具体的一些代码

private static void makeEffects(PathEffect[] e, float phase) {
            e[0] = null;     // 无效果
            e[1] = new CornerPathEffect(30);//CornerPathEffect
            e[2] = new DashPathEffect(new float[] {10, 5, 5, 5}, phase);//DashPathEffect
            e[3] = new PathDashPathEffect(makePathDash(), 12, phase,
                                          PathDashPathEffect.Style.ROTATE);//PathDashPathEffect
            e[4] = new ComposePathEffect(e[2], e[1]);//ComposePathEffect
            e[5] = new ComposePathEffect(e[3], e[1]);//ComposePathEffect
        }

三、案例实现（CornerPathEffect，PathDashPathEffect，ComposePathEffect）

实现的效果是上序代码的e[5]，使用CornerPathEffect实现圆弧效果，而重点是PathDashPathEffect。

PathDashPathEffect里面有几个参数：

new PathDashPathEffect(makePathDash(), 12, phase,
         PathDashPathEffect.Style.ROTATE);

第一个参数为小path图形，案例中博主画的是菱形：

private static Path makePathDash() {
            Path p = new Path();
            p.moveTo(0, 0);
            p.lineTo(4, 4);
            p.lineTo(8, 0);
            p.lineTo(4, -4);
            p.moveTo(0, 0);
            return p;
        }

第二个参数为每个图形间的间隔。
第三个参数为绘制时的偏离量
第四个参数为样式，博主选择的是ROTATE情：线段连接处的图形转换以旋转到与下一段移动方向相一致的角度进行连接。

最后使用ComposePathEffect进行组合。

绘制运动路径

private static Path makeFollowPath() {
            Path p = new Path();
            p.moveTo(0, 0);
            p.lineTo(400,0);
            p.lineTo(400,400);
            p.lineTo(0,400);
            p.lineTo(0,0);
            return p;
        }

修改偏移量实现动态效果

mPhase += 1;
invalidate();

四、源码

public class SampleView extends View {
        private Paint mPaint;
        private Path mPath;
        private PathEffect[] mEffects;
        private int mColors;
        private float mPhase;


        private static void makeEffects(PathEffect[] e, float phase) {
            e[0] = null;     
            e[1] = new CornerPathEffect(30);
            e[2] = new DashPathEffect(new float[] {10, 5, 5, 5}, phase);
            e[3] = new PathDashPathEffect(makePathDash(), 12, phase,
                                          PathDashPathEffect.Style.ROTATE);
            e[4] = new SumPathEffect(e[3], e[1]);
            e[5] = new ComposePathEffect(e[3], e[1]);
        }

        public SampleView(Context context) {
            super(context);
            setFocusable(true);
            setFocusableInTouchMode(true);
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(6);
            mPath = makeFollowPath();
            //初始化PathEffect[]
            mEffects = new PathEffect[6];
            mColors = Color.BLACK;
        }

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.WHITE);

            RectF bounds = new RectF();
            mPath.computeBounds(bounds, false);
            canvas.translate(10 - bounds.left, 10 - bounds.top);

            makeEffects(mEffects, mPhase);
            mPhase += 1;
            invalidate();

            //选择样式
            mPaint.setPathEffect(mEffects[5]);
            mPaint.setColor(mColors);
            canvas.drawPath(mPath, mPaint);
            canvas.translate(0, 28);

        }

        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
            switch (keyCode) {
                case KeyEvent.KEYCODE_DPAD_CENTER:
                    mPath = makeFollowPath();
                    return true;
            }
            return super.onKeyDown(keyCode, event);
        }
        //绘制跑动路径
        private static Path makeFollowPath() {
            Path p = new Path();
            p.moveTo(0, 0);
            p.lineTo(400,0);
            p.lineTo(400,400);
            p.lineTo(0,400);
            p.lineTo(0,0);
            return p;
        }
        //绘制跑动的小图标
        private static Path makePathDash() {
            Path p = new Path();
            p.moveTo(0, 0);
            p.lineTo(4, 4);
            p.lineTo(8, 0);
            p.lineTo(4, -4);
            p.moveTo(0, 0);
            return p;
        }
    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解Android TabHost的多种实现方法 附源码下载

    详解Android TabHost的多种实现方法 附源码下载

    这篇文章主要为大家详细介绍了Android TabHost的多种实现方法 文章中针对每一种实现方法都附有源码进行下载，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Android5.0+ CollapsingToolbarLayout使用详解

    Android5.0+ CollapsingToolbarLayout使用详解

    这篇文章主要为大家详细介绍了Android5.0+ CollapsingToolbarLayout使用，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Android中RecyclerView实现多级折叠列表效果（二）

    Android中RecyclerView实现多级折叠列表效果（二）

    这篇文章主要给大家介绍了Android中RecyclerView实现多级折叠列表的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05
  • React-Native Android 与 IOS App使用一份代码实现方法

    React-Native Android 与 IOS App使用一份代码实现方法

    这篇文章主要介绍了React-Native Android 与 IOS App使用一份代码实现方法的相关资料,这里举例说明，该如何实现IOS和Android APP 都使用一样的代码，需要的朋友可以参考下
    2016-12-12
  • android自定义手表效果

    android自定义手表效果

    这篇文章主要为大家详细介绍了android自定义手表效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Toast和Handler的间隔使用实例

    Toast和Handler的间隔使用实例

    Toast和Handler的间隔使用实例，需要的朋友可以参考一下
    2013-05-05
  • Flutter持久化存储之数据库存储（sqflite）详解

    Flutter持久化存储之数据库存储（sqflite）详解

    这篇文章主要给大家介绍了关于Flutter持久化存储之数据库存储的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03
  • Flutter 用自定义转场动画实现页面切换

    Flutter 用自定义转场动画实现页面切换

    本篇介绍了 fluro 导航到其他页面的自定义转场动画实现，Flutter本身提供了不少预定义的转场动画，可以通过 transitionBuilder 参数设计多种多样的转场动画，也可以通过自定义的 AnimatedWidget实现个性化的转场动画效果。
    2021-06-06
  • Android高仿2048小游戏实现代码

    Android高仿2048小游戏实现代码

    这篇文章主要介绍了Android高仿2048小游戏实现代码的相关资料,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下
    2016-10-10
  • Android自定义圆角柱状图

    Android自定义圆角柱状图

    这篇文章主要为大家详细介绍了Android自定义圆角柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论