AnimatedPathView实现自定义图片标签

老早用过小红书app，对于他们客户端笔记这块的设计非常喜欢，恰好去年在小红书的竞争对手公司，公司基于产品的考虑和产品的发展，也需要将app社交化，于是在社区分享这块多多少少参照了小红书的设计，这里面就有一个比较有意思的贴纸，标签等设计，这里用到了GpuImage的库，这个demo我也将代码开源了，有需要的去fork我的github的代码，今天要说的是详情页面的AnimatedPathView实现可以动起来的标签。（之前我们项目中由于时间问题，将这种效果用h5实现了，不过现在回React Native之后，发现实现起来更简单了），今天要说的是用android实现这种效果。

且看个效果图：

要实现我们这样的效果，首先分析下，线条的绘制和中间圆圈的实现，以及文字的绘制。

对于线条的绘制我们不多说，直接canvas.DrawLine，不过这种线条是死的，不能实现运动的效果，还好Java为我们提供了另一个方法，我们可以用Path去实现，之前做腾讯手写板的时候也是这么做的(可以点击链接查看效果，不过代码没办法公开)，点击打开链接，通过上面说的，我们改变PathEffect的偏移量就可以改变path显示的长度，从而实现动画的效果。而PathEffect有很多子类，从而满足不同的效果，这里不再说明。

float percentage = 0.0f;PathEffect effect = new DashPathEffect(new float[]{pathLength, pathLength}, pathLength - pathLength*percentage);

这里贴出AnimatedPathView的完整代码：

public class AnimatedPathView extends View {    private Paint mPaint;    private Path mPath;    private int mStrokeColor = Color.parseColor("#ff6c6c");    private int mStrokeWidth = 8;    private float mProgress = 0f;    private float mPathLength = 0f;    private float circleX = 0f;    private float circleY = 0f;    private int radius = 0;    private String pathText="化妆包...";    private int textX,textY;    public AnimatedPathView(Context context) {        this(context, null);        init();    }    public AnimatedPathView(Context context, AttributeSet attrs) {        this(context, attrs, 0);        init();    }    public AnimatedPathView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AnimatedPathView);        mStrokeColor = a.getColor(R.styleable.AnimatedPathView_pathColor, Color.parseColor("#ff6c6c"));        mStrokeWidth = a.getInteger(R.styleable.AnimatedPathView_pathWidth, 8);        a.recycle();        init();    }    private void init() {        mPaint = new Paint();        mPaint.setColor(mStrokeColor);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setStrokeWidth(mStrokeWidth);        mPaint.setAntiAlias(true);        setPath(new Path());    }    public void setPath(Path p) {        mPath = p;        PathMeasure measure = new PathMeasure(mPath, false);        mPathLength = measure.getLength();    }    public void setPathText(String pathText,int textX,int textY ) {        this.pathText=pathText;        this.textX=textX;        this.textY=textY;    }    public void setPath(float[]... points) {        if (points.length == 0)            throw new IllegalArgumentException("Cannot have zero points in the line");        Path p = new Path();        p.moveTo(points[0][0], points[0][1]);        for (int i = 1; i < points.length; i++) {            p.lineTo(points[i][0], points[i][1]);        }        //将第一个xy坐标点作为绘制的原点        circleX = points[0][0] - radius / 2;        circleY = points[0][1] - radius / 2;        setPath(p);    }    public void setPercentage(float percentage) {        if (percentage < 0.0f || percentage > 1.0f)            throw new IllegalArgumentException("setPercentage not between 0.0f and 1.0f");        mProgress = percentage;        invalidate();    }    public void scalePathBy(float x, float y) {        Matrix m = new Matrix();        m.postScale(x, y);        mPath.transform(m);        PathMeasure measure = new PathMeasure(mPath, false);        mPathLength = measure.getLength();    }    public void scaleCircleRadius(int radius) {        this.radius = radius;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //绘制圆形//        drawCircle(canvas);        //绘线条        drawPathEffect(canvas);        //绘制文字        drawText(canvas);        canvas.restore();    }    private void drawText(Canvas canvas) {        mPaint.setTextSize(28);        mPaint.setColor(Color.parseColor("#ffffff"));        if (canvas!=null&& !TextUtils.isEmpty(pathText)){            canvas.drawText(pathText,textX,textY,mPaint);        }        invalidate();    }    private void drawPathEffect(Canvas canvas) {        PathEffect pathEffect = new DashPathEffect(new float[]{mPathLength, mPathLength}, (mPathLength - mPathLength * mProgress));        mPaint.setPathEffect(pathEffect);        mPaint.setStrokeWidth(4);        mPaint.setColor(Color.parseColor("#ffffff"));        canvas.save();        canvas.translate(getPaddingLeft(), getPaddingTop());        canvas.drawPath(mPath, mPaint);    }    private void drawCircle(Canvas canvas) {        int strokenWidth = 25;        mPaint.setStrokeWidth(strokenWidth);        mPaint.setColor(Color.parseColor("#ffffff"));        canvas.drawCircle(circleX, circleY, radius , mPaint);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int widthSize = MeasureSpec.getSize(widthMeasureSpec);        int heightSize = MeasureSpec.getSize(heightMeasureSpec);        int widthMode = MeasureSpec.getMode(widthMeasureSpec);        int heightMode = MeasureSpec.getMode(widthMeasureSpec);        int measuredWidth, measuredHeight;        if (widthMode == MeasureSpec.AT_MOST)            throw new IllegalStateException("AnimatedPathView cannot have a WRAP_CONTENT property");        else            measuredWidth = widthSize;        if (heightMode == MeasureSpec.AT_MOST)            throw new IllegalStateException("AnimatedPathView cannot have a WRAP_CONTENT property");        else            measuredHeight = heightSize;        setMeasuredDimension(measuredWidth, measuredHeight);    }}

这段代码借鉴了点击打开链接的部分代码，并在此基础上做了更多的判断和改变，以满足本文开头说说的那种需要，上面的代码只是实现了画线条的效果，那么如何实现中间圆圈的闪烁呢，其实也很简单，我们可以用动画来实现（View动画），这里我们大可以自己自定义一个View实现，而这个View包含了圆圈闪烁和画线，按照上面的逻辑我们写一个自定义的View，代码如下：

public class PointView extends FrameLayout {    private Context mContext;    private List<PointScaleBean> points;    private FrameLayout layouPoints;    private AnimatedPathView animatedPath;    private int radius=10;    private String text="图文标签 $99.00";    public PointView(Context context) {        this(context, null);    }    public PointView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public PointView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initView(context, attrs);    }    private void initView(Context context, AttributeSet attrs) {        this.mContext = context;        View imgPointLayout = inflate(context, R.layout.layout_point, this);        layouPoints = (FrameLayout) imgPointLayout.findViewById(R.id.layouPoints);        animatedPath=(AnimatedPathView) imgPointLayout.findViewById(R.id.animated_path);    }    public void addPoints(int width, int height) {        addPoint(width, height);    }    public void setPoints(List<PointScaleBean> points) {        this.points = points;    }    private void addPoint(int width, int height) {        layouPoints.removeAllViews();        for (int i = 0; i < points.size(); i++) {            double width_scale = points.get(i).widthScale;            double height_scale = points.get(i).heightScale;            LinearLayout view = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.layout_img_point, this, false);            ImageView imageView = (ImageView) view.findViewById(R.id.imgPoint);            imageView.setTag(i);            AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();            animationDrawable.start();            LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();            layoutParams.leftMargin = (int) (width * width_scale);            layoutParams.topMargin = (int) (height * height_scale);//            imageView.setOnClickListener(this);            layouPoints.addView(view, layoutParams);        }        initView();        initPathAnimated();    }    private void initPathAnimated() {        ViewTreeObserver observer = animatedPath.getViewTreeObserver();        if(observer != null){            observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {                @Override                public void onGlobalLayout() {                    animatedPath.getViewTreeObserver().removeGlobalOnLayoutListener(this);                    animatedPath.scaleCircleRadius(radius);                    animatedPath.scalePathBy(animatedPath.getWidth()/2,animatedPath.getHeight()/2);                    float[][] points = new float[][]{                            {animatedPath.getWidth()/2-radius/2,animatedPath.getHeight()/2-radius/2},                            {animatedPath.getWidth()/2- UIUtils.dp2px(mContext,30), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,40)},                            {animatedPath.getWidth()/2-UIUtils.dp2px(mContext,150), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,40)},                    };                    animatedPath.setPath(points);//                    animatedPath.setPathText(text,animatedPath.getWidth()/2-UIUtils.dp2px(mContext,150), animatedPath.getHeight()/2- UIUtils.dp2px(mContext,50));                }            });        }    }    private void initView() {        animatedPath.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                ObjectAnimator anim = ObjectAnimator.ofFloat(view, "percentage", 0.0f, 1.0f);                anim.setDuration(2000);                anim.setInterpolator(new LinearInterpolator());                anim.start();            }        });    }}

上面对应的布局和资源文件：

layou_point.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    >    <com.yju.app.widght.path.AnimatedPathView        android:id="@+id/animated_path"        android:layout_width="match_parent"        android:layout_height="wrap_content"        />    <FrameLayout        android:id="@+id/layouPoints"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_gravity="center" /></FrameLayout>

layout_img_point.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:orientation="vertical">    <ImageView        android:id="@+id/imgPoint"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/point_img" /></LinearLayout>

文中用到的Anim就是帧动画了，

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false">    <item        android:drawable="@drawable/point_img1"        android:duration="100" />    ....省略n多图片资源    <item        android:drawable="@drawable/point_img13"        android:duration="100" /></animation-list>

而最后我们只需要在我们自己的MainActivity中添加简单的代码既可实现上面的效果：

private void initPointView() {        List<PointScaleBean> list=new ArrayList<>();        PointScaleBean point=new PointScaleBean();        point.widthScale = 0.36f;        point.heightScale = 0.75f;        list.add(point);        pointView.setPoints(list);        pointView.addPoints(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);    }

对于布局我是这么做的，将View的父布局的背景加一个图片，实际的开发中大家可以写一个相对的布局，这个就能实现实时的效果了，好了就写到这里，有疑问请留言或者加群(278792776)。

附件：一个滤镜效果：点击打开链接