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的父布局的背景加一个图片,实际的开发中大家可以写一个相对的布局,这个就能实现实时的效果了,好了就写到这里,有疑问请留言或者加群。




人生和爱情一样,错过了爱情就错过了人生”。   爱情是什么?让人无所适从,让人神魂颠倒,面对爱情的时候,勇敢一点,大胆说出自己的爱,有花堪摘直须摘,莫待无花空折枝。人,总会生老病死,怎么过都是一生,错过了爱情就错过了生命的精彩。