Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Android动态效果

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

作者:计蒙不吃鱼

这篇文章主要为大家详细介绍了Android自定义view利用PathEffect实现动态效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

前言

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

效果图:

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

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

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;
        }
    }

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

您可能感兴趣的文章:
阅读全文