Android 自定义动画 单个View平面位移以及一组View轮回旋转（一）

最近IOS的朋友写了一个动画 问我多长时间能实现，本着热爱学习的精神，一下午搞出来一个，，咳咳。。。

话不多说，先看第一个随机运动，上图

这是一个比较初始的动画，主要是绘制一个小方块View，并且改变这个View在画布中的位置，然后进行刷新Canvas来实现动画

关于代码也是很简单，先创建一个been类去保存这个view的一些参数

/**
 * @author： jjf
 * @date： 2019/5/10
 * @describe：View 参数
 */
public class BlockBeen {

    //初始View位置
    private int viewAddressX = 100;
    private int viewAddressY = 200;
    //View 大小
    private int viewWide = 100;
    private int viewHeight = 100;
    //画view的画笔仓库
    private  Paint viewPain ;
    //view仓库
    private RectF rectF;
    //地址状态 0：第一排 1：牧默认位置（中间一排） 2：下边一排
    private int addressState;


    public int getAddressState() {
        return addressState;
    }

    public void setAddressState(int addressState) {
        this.addressState = addressState;
    }

    public int getViewAddressX() {
        return viewAddressX;
    }

    public void setViewAddressX(int viewAddressX) {
        this.viewAddressX = viewAddressX;
    }

    public int getViewAddressY() {
        return viewAddressY;
    }

    public void setViewAddressY(int viewAddressY) {

        this.viewAddressY = viewAddressY;
    }
    String TAG="MoveBlockView";
    public int getViewWide() {
        return viewWide;
    }

    public void setViewWide(int viewWide) {
        this.viewWide = viewWide;
    }

    public int getViewHeight() {
        return viewHeight;
    }

    public void setViewHeight(int viewHeight) {
        this.viewHeight = viewHeight;
    }

    public Paint getViewPain() {
        return viewPain;
    }

    public void setViewPain(Paint viewPain) {
        this.viewPain = viewPain;
    }

    public RectF getRectF() {
        return rectF;
    }

    public void setRectF(RectF rectF) {
        this.rectF = rectF;
    }
}

然后用这个模型，我们去填充一组数据，并把数据绘制出来，请看大屏幕。。。

 /**
     * 画View
     *
     * @param canvas
     * @param position 第几个view
     */
    public void drawBlock(Canvas canvas, int position) {//viewAddressY+ position * (viewWide+padding)+viewHeight
        BlockBeen blockBeen;
        if (position >= blockBeens.size()) {
            blockBeen = new BlockBeen();
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);//创建画笔
            paint.setColor(getResources().getColor(R.color.colorPrimaryDark));//添加画笔颜色
            blockBeen.setViewPain(paint);
        } else {
            blockBeen = blockBeens.get(position);
        }
        if (position == 0) {
            blockBeen.setViewAddressX(viewAddressX);
            blockBeen.setViewAddressY(viewAddressY - padding - blockBeen.getViewHeight());
        } else {
            blockBeen.setViewAddressX(viewAddressX + (position - 1) * (viewWide + padding));
            blockBeen.setViewAddressY(viewAddressY);
        }

        blockBeen.setViewWide(viewWide);
        blockBeen.setViewHeight(viewHeight);
        RectF rectF;
        if (blockBeen.getRectF() == null) {
            rectF = new RectF(blockBeen.getViewAddressX(), blockBeen.getViewAddressY(),
                    blockBeen.getViewAddressX() + blockBeen.getViewWide(),
                    blockBeen.getViewAddressY() + blockBeen.getViewHeight());//先画一个矩形
            blockBeen.setRectF(rectF);
        } else {
            rectF = blockBeen.getRectF();
            rectF.set(blockBeens.get(position).getViewAddressX()
                    , blockBeens.get(position).getViewAddressY(), blockBeens.get(position).getViewAddressX() + blockBeens.get(position).getViewWide()
                    , blockBeens.get(position).getViewAddressY() + blockBeens.get(position).getViewHeight());
        }
        if (!blockBeens.contains(blockBeen)) {
            blockBeens.add(blockBeen);
        }
        canvas.drawRoundRect(rectF, 30, 30, blockBeen.getViewPain());//根据提供的矩形为四个角画弧线，（其中的数字：第一个表示X轴方向大小，第二个Y轴方向大小。可以改成其他的，你可以自己体验），最后添加画笔。
        //绘制View
        invalidate();
    }

好了，核心代码已经奉上，根据这个两行代码，大家应该可以明白了这个视图的绘制，关于行参中的position，是因为我为下个动画准备的，下个动画理论是可以无限增加个方块去循环运动，好了。最最最重要的环节，就是让这个方块动起来：

 /**
     * 移动小方块
     * @param position 第几个View移动
     * @param goX  在X轴上移动的幅度
     * @param goY  在Y轴上移动的幅度
     * @param canvas 画布
     */
    private void moveTo(int position, int goX, int goY, Canvas canvas) {

        // check the borders, and set the direction if a border has reached
        if (blockBeens.get(position).getViewAddressX() > (parentWight - MAX_SIZE)) {
            goRight = false;
        }

        if (blockBeens.get(position).getViewAddressX() <= 0) {
            goRight = true;
        }

        if (blockBeens.get(position).getViewAddressY() > (parentHeight - MAX_SIZE)) {
            goDown = false;
        }
        if (blockBeens.get(position).getViewAddressY() <= 0) {
            goDown = true;
        }
        // move the x and y
        if (goRight) {
            blockBeens.get(position).setViewAddressX(blockBeens.get(position).getViewAddressX() + goX);
        } else {
            blockBeens.get(position).setViewAddressX(blockBeens.get(position).getViewAddressX() - goX);
        }
        if (goDown) {
            blockBeens.get(position).setViewAddressY(blockBeens.get(position).getViewAddressY() + goY);
        } else {
            blockBeens.get(position).setViewAddressY(blockBeens.get(position).getViewAddressY() - goY);
        }
        blockBeens.get(position).getRectF().set(blockBeens.get(position).getViewAddressX()
                , blockBeens.get(position).getViewAddressY(), blockBeens.get(position).getViewAddressX() + blockBeens.get(position).getViewWide()
                , blockBeens.get(position).getViewAddressY() + blockBeens.get(position).getViewHeight());
        canvas.drawRoundRect(blockBeens.get(position).getRectF(), 30, 30, blockBeens.get(position).getViewPain());
        invalidate();
    }

以上就是小方块随机移动的核心代码，这片文章受到另一个博主的文章的启发，它的思路是为小方块自定义一个View，然后另一个View里面直接引入这个小方块，我这里主要是做下一个动画，它的实现步骤有很大限制，所以跟之前的那位博主的实现方法有差异。

 boolean bo = true;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //初始化
        if (bo) {
            for (int i = 0; i < count; i++) {
                drawBlock(canvas, i);
                //单词初始化核心代码
                if (i == 0) {
                    blockBeens.get(i).setAddressState(0);
                } else {
                    blockBeens.get(i).setAddressState(1);
                }
            }
            bo = false;
        }
//        moveCirclePath(canvas);
        moveTo(0, 5, 5, canvas);

    }

好了最后奉上这个代码的引用部分，因为另一个动画 是在同一个类里面写的，为了防止读者混淆了，我把那个主要动画放在下一个博客中，当然 完整的整篇代码也会放在下一篇文章中。

引用部分

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#80000000"
    tools:context="com.jjf.blockmoveforcirclepath.MainActivity">

    <com.jjf.blockmoveforcirclepath.customview.MoveBlockView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

Android自定义动画 单个View 平面位移以及一组View轮回旋转（二）