如何实现炫酷的ArtLine

看见大神实现了一个自定义view

里面只有两个点，两个点在进行圆周运动，通过绘制两点之间的线，并保存下这些线，实现图片效果。
实现只有短短的几十行代码。我默默的拿来学习了下。主要有以下几点：
- 优雅的实现不断的重绘
- 决定两点的运动轨迹
- 保存绘制的线

一、实现不断的重绘界面

大神使用了ValueAnimator，
ValueAnimator本身不作用于任何对象，从名字也可以了解到，它是对值进行动画，然后通过监听其listener，在动画过程中修改对象的属性值来达到动画的目的。
在实现这个ArtLine的demo中，只是利用了LinearInterpolator（恒定变化速率的补间器）和ValueAnimator的动画监听器。就达到了不断去重绘的目的。

ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
        animator.setDuration(time);
        //恒定变化速度的interpolator（补间器）
        animator.setInterpolator(new LinearInterpolator());
        //在指定的时间内，将一个数从0变到1，然后动画的每一帧会回调onAnimationUpdate方法
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
            //重绘
                invalidate();
            }
        });
        animator.setStartDelay(500);
        animator.start();

二 、决定两点的运动轨迹
上面已经分析过了，这是两个点的圆周运动，下面这4个值就是a点和B点的坐标。

aX = (float) (Math.cos(angleA) * aXR);
aY = (float) (Math.sin(angleA) * aYR);
bX = (float) (Math.cos(angleB) * bXR);
bY = (float) (Math.sin(angleB) * bYR);

Math.cos（弧度）返回余弦值，Math.sin(弧度)返回正弦值，
余弦值*R得到X轴上的坐标
正弦值*R得到Y轴上的坐标。

通过每次draw的时候增加弧度，让点做圆周运动。

//这里的speendA，speedB就是个弧度值，如speendA越大，A点移动的角度就越大，在上一个A点和这一个A点之间的距离就越大。
angleA += speedA;
angleB += speedB;

这里如果在X轴和在Y轴的半径一样，绘制出来的就是正圆，如果两个轴的半径不同，绘制出来的就是椭圆。
我很想录个屏上来啊，但是不会，只能截图了。
比如这样一个形状

它的两点运动轨迹就是这样的。

三、保存绘制的线
上面的两张图都是经过保存的，否则就只能显示一根线，或者两个点

//将两个点的坐标保存到集合中
listPos.add(aX);
listPos.add(aY);
listPos.add(bX);
listPos.add(bY);
//循环绘制到画布上
  for (int i = 0; i < listPos.size(); i++) {
            if (i % 4 == 0) {
                canvas.drawLine(listPos.get(i), listPos.get(i + 1), listPos.get(i + 2), listPos.get(i + 3), paint);
            }
        }

通过改变speedA, speedB, aXR, aYR, bXR, bYR着六个值，就可以出现多种多样的图形，代码很简单，绘制出来的图形多种多样，绘制过程也很迷人，也许这就是简单法则的魅力吧。

给双鱼的自己画个鱼

最后附上完整代码

package com.wingjay.wjmagiccurvedemo;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;

import java.util.ArrayList;

/**
 * Created by kang on 2016/4/25.
 */
public class KangArtLineView extends View {

    private final String TAG = this.getClass().getSimpleName();

    private Paint paint;
    private ArrayList<Float> listPos = new ArrayList<>();
    private int centerX, centerY;
    private float aX, aY, bX, bY, angleA, angleB, speedA, speedB, aXR, aYR, bXR, bYR;
    private long time;
    private String color;

    public KangArtLineView(Context context) {
        this(context, null);
    }

    public KangArtLineView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public KangArtLineView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //抗锯齿的画笔
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);
        paint.setStrokeWidth(1);

        speedA = 2.0f;
        speedB = 1.0f;
        aXR = 320;
        aYR = 20;
        bXR = 20;
        bYR = 320;
        time = 40 * 1000;

        startAnim(time);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        centerX = w / 2;
        centerY = h / 2;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.i(TAG, "onDraw");
        angleA += speedA;
        angleB += speedB;

        aX = (float) (Math.cos(angleA) * aXR);
        aY = (float) (Math.sin(angleA) * aYR);
        bX = (float) (Math.cos(angleB) * bXR);
        bY = (float) (Math.sin(angleB) * bYR);

        listPos.add(aX);
        listPos.add(aY);
        listPos.add(bX);
        listPos.add(bY);

        //把画布移动到view的中心
        canvas.translate(centerX, centerY);
        canvas.drawColor(Color.BLACK);
        //canvas.save()与canvas.restore()成对出现，
//        save()用来保存画布的状态
        canvas.save();
        for (int i = 0; i < listPos.size(); i++) {
            if (i % 4 == 0) {
                canvas.drawLine(listPos.get(i), listPos.get(i + 1), listPos.get(i + 2), listPos.get(i + 3), paint);
            }
        }
        //restore()用来恢复画布保存的状态
        canvas.restore();
    }

    public void startAnim(long time) {
        ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
        animator.setDuration(time);
        //恒定变化速度的interpolator（补间器）
        animator.setInterpolator(new LinearInterpolator());
        //在指定的时间内，将一个数从0变到1，然后动画的每一帧会回调onAnimationUpdate方法
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                invalidate();
            }
        });
        animator.setStartDelay(500);
        animator.start();
    }

  public void destory() {
        listPos.clear();
        invalidate();
    }
}

---

附上网址

http://mp.weixin.qq.com/s?__biz=MzA4NTc5MDU5OQ==&mid=411441608&idx=1&sn=5e846a882f58a7ba1b5312bdbeaafccf&scene=23&srcid=0120GiYhMXjmNDoN9MFQj7f5#rd
GIF 动图系列 1－ 简单法则的魅力