android 下雪动画,自定义下雪动画（上）

最新推荐文章于 2022-12-26 19:08:13 发布

Ivankaswift

最新推荐文章于 2022-12-26 19:08:13 发布

阅读量130

点赞数

文章标签： android 下雪动画

本章目录

Part One：构造方法

Part Two：自定义属性

Part Three：布局测量

Part Four：绘制

Part Five：重绘

在了解了自定义View的基本绘制流程后，还需要大量的练习去巩固这方面的知识，所以这一节我们再练习个下雪案例。

Part One：构造方法

构造方法的写法还是老样子，没有啥改变的：

public class SnowView extends View{

public SnowView(Context context) {

this(context, null);

}

public SnowView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public SnowView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

this(context, attrs, defStyleAttr, 0);

}

public SnowView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {

super(context, attrs, defStyleAttr, defStyleRes);

initAttrs(context, attrs);

}

private void initAttrs(Context context, AttributeSet attrs) {

}

需要注意的是，这里需要把app的gradle中的minSDK改为21(android5.0)。如果想适配更低版本的手机，也就是说想要在android5.0以下的手机上运行，需要把4个参数的构造方法删除，在3个参数的构造方法里使用super和初始化属性。

Part Two：自定义属性

下面开始正式画了，如果不太清楚如何下手的话，可以先把问题简单化，跑通了，再给它复杂化。比如说本例，一群雪花不会，那就先处理一朵雪花的情况。

假设我们需要绘制一朵大小随机，出现的位置随机的雪花，要处理的属性有什么：

int minSize：雪花大小随机值下限

int maxSize：雪花大小随机值上限

Bitmap snowSrc：雪花的图案

int moveX：雪花每次移动的横向距离，也就是横向移动速度

int moveY：雪花每次移动的纵向距离，也就是纵向移动速度

前三个属性都好理解，后两个移动属性可能有的人会有点疑惑，先来看看屏幕坐标。

d028ed6d7ed9

屏幕坐标.png

屏幕的左上角是起点(0，0)，

X轴坐标从起点位置向右是正数，向左是负数

Y轴坐标从起点位置向下是正数，向上是负数

如果我们雪花从屏幕顶端出现，想要实现一个移动的效果，就是在一个固定时间内(比如20 - 50毫秒)，改变图片的X轴和Y轴的值，重绘。如此反复循环就造成雪花的移动效果了。

好了，意义明白了，接下来就是把这些属性初始化了。

attrs.xml中：

SnowView中：

public class SnowView extends View{

private int minSize; //雪花大小随机值下限

private int maxSize; //雪花大小随机值上限

private Bitmap snowSrc; //雪花的图案

private int moveX; //雪花每次移动的横向距离，也就是横向移动速度

private int moveY; //雪花每次移动的纵向距离，也就是纵向移动速度

public SnowView(Context context) {

this(context, null);

}

public SnowView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public SnowView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

this(context, attrs, defStyleAttr, 0);

}

public SnowView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {

super(context, attrs, defStyleAttr, defStyleRes);

initAttrs(context, attrs);

}

private void initAttrs(Context context, AttributeSet attrs) {

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SnowView, 0, 0);

minSize = typedArray.getInt(R.styleable.SnowView_minSize, 48);//获取最小值，默认48

maxSize = typedArray.getInt(R.styleable.SnowView_maxSize, 72);//获取最大值，默认72

int srcId = typedArray.getResourceId(R.styleable.SnowView_snowSrc, R.drawable.snow_flake);//获取默认图片资源ID

snowSrc = BitmapFactory.decodeResource(getResources(), srcId);//根据资源ID生成Bitmap对象

moveX = typedArray.getInt(R.styleable.SnowView_moveX, 10);//获取X轴移动速度

moveY = typedArray.getInt(R.styleable.SnowView_moveY, 10);//获取Y轴移动速度

if (minSize > maxSize){

maxSize = minSize;

}

typedArray.recycle();//TypedArray共享资源，资源回收

}

activity_main.xml中：

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"

tools:context="com.terana.mycustomview.MainActivity">

android:layout_width="match_parent"

android:layout_height="match_parent"

app:minSize="16"

app:maxSize="48"

app:snowSrc="@drawable/snow_ball"

app:moveX="10"

app:moveY="10"/>

Part Three：布局测量

测量我们之前说过，除了MeasureSpec.AT_MOST这种，也就是包裹内容需要根据情况设定个默认值，其它的写法完全可以一样，可以照搬。

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int width = getDefaultMeasureSizes(getSuggestedMinimumWidth(), widthMeasureSpec, true);

int height = getDefaultMeasureSizes(getSuggestedMinimumHeight(), heightMeasureSpec, false);

setMeasuredDimension(width, height);

}

private int getDefaultMeasureSizes(int suggestedMinimumSize, int defaultMeasureSpec, boolean flag) {

int result = suggestedMinimumSize;

int specMode = MeasureSpec.getMode(defaultMeasureSpec);

int specSize = MeasureSpec.getSize(defaultMeasureSpec);

switch (specMode){

case MeasureSpec.UNSPECIFIED:

result = suggestedMinimumSize;

break;

case MeasureSpec.AT_MOST:

if (flag){

result = snowSrc.getWidth() + getPaddingLeft() +getPaddingRight();

}else {

result = snowSrc.getHeight() + getPaddingTop() +getPaddingBottom();

}

break;

case MeasureSpec.EXACTLY:

result = specSize;

break;

}

return result;

}

其实从实际情况来说，本例只需要让SnowView全屏才比较适合，即便不写测量布局，默认就是全屏显示，只不过写上更规范一些。

Part Four：绘制

好了，准备工作都做好了，可以正式开始画图了。

绘制工作很简单，就是在onDraw方法里调用drawBitmap方法即可，它有四个参数：

Bitmap bitmap：需要绘制的位图，就是我们自定义的snowSrc。

Rect src：就是位图的原始区域，比如说想动态改变原图的大小会调用，本例用null就可以了，即不对原图做任何改变。

RectF dst：位图要放置在屏幕的区域，比如正中央或者屏幕顶端之类的。

Paint paint：画笔，不多说了，本例没有啥特性绘制的东西，直接new一个默认即可。

暂时先把雪花画一个固定位置，比如屏幕的中心顶部：

public class SnowView extends View{

private int minSize; //雪花大小随机值下限

private int maxSize; //雪花大小随机值上限

private Bitmap snowSrc; //雪花的图案

private int moveX; //雪花每次移动的横向距离，也就是横向移动速度

private int moveY; //雪花每次移动的纵向距离，也就是纵向移动速度

private Paint snowPaint;

public SnowView(Context context) {

this(context, null);

}

public SnowView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public SnowView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

this(context, attrs, defStyleAttr, 0);

}

public SnowView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {

super(context, attrs, defStyleAttr, defStyleRes);

initAttrs(context, attrs);

initVariables();

}

private void initVariables() {

snowPaint = new Paint();