Rain.gif

Android 自定义View(二) 下雨效果

一 实现思路，

1. 雨点用线段表示，通过控制线段的大小和宽度来表示不同的线段。
2. 一个雨点下雨的过程可以表示为一条直线，一次雨点在下雨的过程中坐标表示为 y=kx+b;
3. 通过不停的绘制调用onDraw 实现下雨的动画。

二 RainView

整个RainView 继承自View，然后把下雨的过程抽象为雨点，在RainView 中增加N个雨点，这样把整个下雨过程抽象到了RainDrop中，RainView 负责一些初始化工作。

1. 在构造函数里面完成一些属性的解析，比如雨点的数量，所用的雨点用一个ArrayList 保存。
2. 在onMeasure中对雨点做一些初始化工作，因为RainDrop 需要知道View的大小，而在RainView 构造的时候 宽和高还未知，所以放在了onMeasure处理，当然也可以放在onSizeChanged 中。
3. 在OnDraw 方法中遍历调用RainDrop 的rain 方法，让雨点移动，然后调用 postInvalidateDelayed(mDelayTime); 不停的重新绘制，完成下雨的过程。

package com.dawang.androidexample.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import com.dawang.androidexample.R;

import java.util.ArrayList;


public class RainView extends View {
    private ArrayList<RainDrop> mDropList;
    TypedArray mArray;
    private int mDropNum;
    private int mDelayTime = 10;

    public RainView(Context context) {
        super(context);
    }

    public RainView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mArray = context.obtainStyledAttributes(attrs, R.styleable.RainView);
        mDropNum = mArray.getInteger(R.styleable.RainView_drop_number, 30);

        if(mDropList == null){
            mDropList = new ArrayList<>();
            for(int i = 0; i < mDropNum ; i++){
                RainDrop drop = new RainDrop(mArray);
                mDropList.add(drop);
            }
        }

        mArray.recycle();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawRain(canvas);
    }

    void drawRain(Canvas canvas){

        for (RainDrop drop:mDropList) {
            drop.rain(canvas);
        }

        postInvalidateDelayed(mDelayTime);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        for (RainDrop drop:mDropList) {
            drop.init(getMeasuredWidth(), getMeasuredHeight());
            drop.initPos();
        }
    }
}

三 RainDrop

一个雨点在onDraw 方法中表示为

canvas.drawLine(mStartX, mStartY, mStartX+mRainSizeW, mStartY+mRainSizeW*mK, mPaint);

mStartX, mStartY 表示起点位置，mRainSizeW表示雨点的长度，根据y=kx+b 计算出y的坐标。mK表示斜率。下完雨以后，雨点继续向下移动

    mStartX +=mSpeed;
    mStartY +=mSpeed*mK;

雨点的速度(mSpeed)， 起始位置(mStartX, mStartY)，方向(斜率表示mK) 大小(mRainSizeW) 是有一定的随机性，雨点的大小在宽度上用线宽表示

   mPaint.setStrokeWidth(mRainSize);

package com.dawang.androidexample.view;

import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;

import com.dawang.androidexample.R;

import java.util.Random;

public class RainDrop {
    // y=kx + b
    private Paint mPaint = new Paint();
    private int mStartX = 30;
    private int mStartY = 0;

    private int  mK = 3;
    private int mRainSizeW = 8;
    private int mSpeed = 3;
    private int mDirectX = 1;

    private int mViewW;
    private int mViewH;
    private Random mRandom;
    
    private int mRandRainSizeW;
    private int mRandRainSpeed;
    private int mRainColor;
    private int mRainSize;

    public RainDrop(TypedArray array){
        mRandRainSizeW = array.getInteger(R.styleable.RainView_drop_length, 5);
        mRandRainSpeed = array.getInteger(R.styleable.RainView_drop_speed, 5);
        mRainColor = array.getColor(R.styleable.RainView_drop_color, Color.WHITE);
        mRainSize  = array.getInteger(R.styleable.RainView_drop_length, 3);

        mPaint.setColor(mRainColor);
        mPaint.setStrokeWidth(mRainSize);
    }

    void init(int w, int h){
        mViewW = w;
        mViewH = h;
    }

    void initPos(){
        mRandom = new Random();
        mStartX = mRandom.nextInt(mViewW);
        mStartY = mRandom.nextInt(mViewH);

        mRainSizeW = 5 + mRandom.nextInt(mRandRainSizeW);
        mK  = 3 + mRandom.nextInt(5);
        mSpeed = 1+ mRandom.nextInt(mRandRainSpeed);
        if((mSpeed + mK) %2 == 0){
            mDirectX = 1;
        } else {
            mDirectX = 1;
        }
    }

    void rain(Canvas canvas){
        canvas.drawLine(mStartX, mStartY, mStartX+mRainSizeW, mStartY+mRainSizeW*mK, mPaint);
        mStartX +=mSpeed*mDirectX;
        mStartY +=mSpeed*mK;

        if(mStartX > mViewW || mStartY > mViewH){
            initPos();
        }
    }
}