Android自定义View——从零开始实现雪花飘落效果(2)

private void moveObject(){
moveY();
if(presentY>parentHeight){
reset();
}
}

/**

  • Y轴上的移动逻辑
    */
    private void moveY(){
    presentY += presentSpeed;
    }

/**

  • 重置object位置
    */
    private void reset(){
    presentY = -objectHeight;
    presentSpeed = initSpeed;
    }
    }

FallingView中相应地设置添加物体的方法

public class FallingView extends View {
//省略部分代码…
private List fallObjects;

private void init(){
fallObjects = new ArrayList<>();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(fallObjects.size()>0){
for (int i=0;i<fallObjects.size();i++) {
//然后进行绘制
fallObjects.get(i).drawObject(canvas);
}
// 隔一段时间重绘一次, 动画效果
getHandler().postDelayed(runnable, intervalTime);
}
}

// 重绘线程
private Runnable runnable = new Runnable() {
@Override
public void run() {
invalidate();
}
};

/**

  • 向View添加下落物体对象
  • @param fallObject 下落物体对象
  • @param num
    */
    public void addFallObject(final FallObject fallObject, final int num) {
    getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    @Override
    public boolean onPreDraw() {
    getViewTreeObserver().removeOnPreDrawListener(this);
    for (int i = 0; i < num; i++) {
    FallObject newFallObject = new FallObject(fallObject.builder,viewWidth,viewHeight);
    fallObjects.add(newFallObject);
    }
    invalidate();
    return true;
    }
    });
    }
    }

Activity中向FallingView添加一些物体看看效果

//绘制雪球bitmap
snowPaint = new Paint();
snowPaint.setColor(Color.WHITE);
snowPaint.setStyle(Paint.Style.FILL);
bitmap = Bitmap.createBitmap(50, 50, Bitmap.Config.ARGB_8888);
bitmapCanvas = new Canvas(bitmap);
bitmapCanvas.drawCircle(25,25,25,snowPaint);

//初始化一个雪球样式的fallObject
FallObject.Builder builder = new FallObject.Builder(bitmap);
FallObject fallObject = builder
.setSpeed(10)
.build();

fallingView = (FallingView) findViewById(R.id.fallingView);
fallingView.addFallObject(fallObject,50);//添加50个雪球对象

效果如图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

到这里我们完成了一个最基础的下落物体类,下面开始扩展功能和效果


扩展一:增加导入Drawable资源的构造方法和设置物体大小的接口

我们之前的FallObject类中Builder只支持bitmap的导入,很多时候我们的图片样式都是从drawable资源文件夹中获取的,每次都要将drawable转成bitmap是件很麻烦的事,因此我们要在FallObject类中封装drawable资源导入的构造方法,修改FallObject

public static final class Builder {
//省略部分代码…
public Builder(Bitmap bitmap) {
this.initSpeed = defaultSpeed;
this.bitmap = bitmap;
}

public Builder(Drawable drawable) {
this.initSpeed = defaultSpeed;
this.bitmap = drawableToBitmap(drawable);
}
}

/**

  • drawable图片资源转bitmap
  • @param drawable
  • @return
    */
    public static Bitmap drawableToBitmap(Drawable drawable) {
    Bitmap bitmap = Bitmap.createBitmap(
    drawable.getIntrinsicWidth(),
    drawable.getIntrinsicHeight(),
    drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
    : Bitmap.Config.RGB_565);
    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
    drawable.draw(canvas);
    return bitmap;
    }

有了drawable资源导入的构造方法,肯定需要配套改变FallObject图片样式大小的接口,依然是在FallObjectBuilder中扩展相应的接口

public static final class Builder {
//省略部分代码…
public Builder setSize(int w, int h){
this.bitmap = changeBitmapSize(this.bitmap,w,h);
return this;
}
}

/**

  • 改变bitmap的大小
  • @param bitmap 目标bitmap
  • @param newW 目标宽度
  • @param newH 目标高度
  • @return
    */
    public static Bitmap changeBitmapSize(Bitmap bitmap, int newW, int newH) {
    int oldW = bitmap.getWidth();
    int oldH = bitmap.getHeight();
    // 计算缩放比例
    float scaleWidth = ((float) newW) / oldW;
    float scaleHeight = ((float) newH) / oldH;
    // 取得想要缩放的matrix参数
    Matrix matrix = new Matrix();
    matrix.postScale(scaleWidth, scaleHeight);
    // 得到新的图片
    bitmap = Bitmap.createBitmap(bitmap, 0, 0, oldW, oldH, matrix, true);
    return bitmap;
    }

Activity中初始化下落物体样式时我们就可以导入drawable资源和设置物体大小了(图片资源我是在阿里图标库下载的)

FallObject.Builder builder = new FallObject.Builder(getResources().getDrawable(R.drawable.ic_snow));
FallObject fallObject = builder
.setSpeed(10)
.setSize(50,50)
.build();

来看下效果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


扩展二:实现雪花“大小不一”、“快慢有别”的效果

之前我们通过导入drawable资源的方法让屏幕“下起了雪花”,但雪花个个都一样大小,下落速度也都完全一致,这显得十分的单调,看起来一点也不像现实中的下雪场景。因此我们需要利用随机数实现雪花大小不一快慢有别的效果,修改FallObject

public class FallObject {
//省略部分代码…
private boolean isSpeedRandom;//物体初始下降速度比例是否随机
private boolean isSizeRandom;//物体初始大小比例是否随机

public FallObject(Builder builder, int parentWidth, int parentHeight){
//省略部分代码…
this.builder = builder;
isSpeedRandom = builder.isSpeedRandom;
isSizeRandom = builder.isSizeRandom;

initSpeed = builder.initSpeed;
randomSpeed();
randomSize();
}

private FallObject(Builder builder) {
//省略部分代码…
isSpeedRandom = builder.isSpeedRandom;
isSizeRandom = builder.isSizeRandom;
}

public static final class Builder {
//省略部分代码…
private boolean isSpeedRandom;
private boolean isSizeRandom;

public Builder(Bitmap bitmap) {
//省略部分代码…
this.isSpeedRandom = false;
this.isSizeRandom = false;
}

public Builder(Drawable drawable) {
//省略部分代码…
this.isSpeedRandom = false;
this.isSizeRandom = false;
}

/**

  • 设置物体的初始下落速度
  • @param speed
  • @return
    */
    public Builder setSpeed(int speed) {
    this.initSpeed = speed;
    return this;
    }

/**

  • 设置物体的初始下落速度
  • @param speed
  • @param isRandomSpeed 物体初始下降速度比例是否随机
  • @return
    */
    public Builder setSpeed(int speed,boolean isRandomSpeed) {
    this.initSpeed = speed;
    this.isSpeedRandom = isRandomSpeed;
    return this;
    }

/**

  • 设置物体大小
  • @param w
  • @param h
  • @return
    */
    public Builder setSize(int w, int h){
    this.bitmap = changeBitmapSize(this.bitmap,w,h);
    return this;
    }

/**

  • 设置物体大小
  • @param w
  • @param h
  • @param isRandomSize 物体初始大小比例是否随机
  • @return
    */
    public Builder setSize(int w, int h, boolean isRandomSize){
    this.bitmap = changeBitmapSize(this.bitmap,w,h);
    this.isSizeRandom = isRandomSize;
    return this;
    }
    }

/**

  • 重置object位置
    */
    private void reset(){
    presentY = -objectHeight;
    randomSpeed();//记得重置时速度也一起重置,这样效果会好很多
    }

/**

  • 随机物体初始下落速度
    */
    private void randomSpeed(){
    if(isSpeedRandom){
    presentSpeed = (float)((random.nextInt(3)+1)0.1+1) initSpeed;//这些随机数大家可以按自己的需要进行调整
    }else {
    presentSpeed = initSpeed;
    }
    }

/**

  • 随机物体初始大小比例
    */
    private void randomSize(){
    if(isSizeRandom){
    float r = (random.nextInt(10)+1)*0.1f;
    float rW = r * builder.bitmap.getWidth();
    float rH = r * builder.bitmap.getHeight();
    bitmap = changeBitmapSize(builder.bitmap,(int)rW,(int)rH);
    }else {
    bitmap = builder.bitmap;
    }
    objectWidth = bitmap.getWidth();
    objectHeight = bitmap.getHeight();
    }
    }

Activity中设置相应参数即可

FallObject.Builder builder = new FallObject.Builder(getResources().getDrawable(R.drawable.ic_snow));
FallObject fallObject = builder
.setSpeed(10,true)
.setSize(50,50,true)
.build();

效果如图,是不是看起来感觉好多了๑乛◡乛๑

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传


扩展三:引入“风”的概念

“风”其实是一种比喻,实际上要做的是让雪花除了做下落运动外,还会横向移动,也就是说我们要模拟出雪花在风中乱舞的效果。为了让雪花在X轴上的位移不显得鬼畜(大家可以直接随机增减x坐标值就知道为什么是鬼畜了哈哈),我们采用正弦函数来获取X轴上的位移距离,如图所示

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

正弦函数曲线见下图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们选取-π到π这段曲线,可以看出角的弧度在为π/2时正弦值最大(-π/2时最小),因此我们在计算角度时还需要考虑其极限值。同时,因为我们添加了横向的移动,所以判断边界时要记得判定最左和最右的边界,修改FallObject

public class FallObject {
//省略部分代码…
public int initSpeed;//初始下降速度
public int initWindLevel;//初始风力等级

private float angle;//物体下落角度

private boolean isWindRandom;//物体初始风向和风力大小比例是否随机
private boolean isWindChange;//物体下落过程中风向和风力是否产生随机变化

private static final int defaultWindLevel = 0;//默认风力等级
private static final int defaultWindSpeed = 10;//默认单位风速
private static final float HALF_PI = (float) Math.PI / 2;//π/2

public FallObject(Builder builder, int parentWidth, int parentHeight){
//省略部分代码…
isWindRandom = builder.isWindRandom;
isWindChange = builder.isWindChange;

initSpeed = builder.initSpeed;
randomSpeed();
randomSize();
randomWind();
}

private FallObject(Builder builder) {
//省略部分代码…
isWindRandom = builder.isWindRandom;
isWindChange = builder.isWindChange;
}

public static final class Builder {
//省略部分代码…
private boolean isWindRandom;
private boolean isWindChange;

public Builder(Bitmap bitmap) {
//省略部分代码…
this.isWindRandom = false;
this.isWindChange = false;
}

public Builder(Drawable drawable) {
//省略部分代码…
this.isWindRandom = false;
this.isWindChange = false;
}

/**

  • 设置风力等级、方向以及随机因素
  • @param level 风力等级(绝对值为 5 时效果会比较好),为正时风从左向右吹(物体向X轴正方向偏移),为负时则相反
  • @param isWindRandom 物体初始风向和风力大小比例是否随机
  • @param isWindChange 在物体下落过程中风的风向和风力是否会产生随机变化
  • @return
    */
    public Builder setWind(int level,boolean isWindRandom,boolean isWindChange){
    this.initWindLevel = level;

题外话

我们见过很多技术leader在面试的时候,遇到处于迷茫期的大龄程序员,比面试官年龄都大。这些人有一些共同特征:可能工作了7、8年,还是每天重复给业务部门写代码,工作内容的重复性比较高,没有什么技术含量的工作。问到这些人的职业规划时,他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段,一定要在业务范围内的扩张,技术广度和深度提升上有自己的计划,才有助于在职业发展上有持续的发展路径,而不至于停滞不前。

不断奔跑,你就知道学习的意义所在!

注意:我们之前因为秋招收集的二十套一二线互联网公司Android面试真题(含BAT、小米、华为、美团、滴滴)和我自己整理Android复习笔记(包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。)

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

注意:我们之前因为秋招收集的二十套一二线互联网公司Android面试真题(含BAT、小米、华为、美团、滴滴)和我自己整理Android复习笔记(包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。)

[外链图片转存中…(img-frmvVuNT-1714452174904)]

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

  • 7
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值