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

已于 2024-04-30 12:42:43 修改
阅读量545 收藏 21
点赞数 8
分类专栏： 程序员 文章标签： android
于 2024-04-30 12:42:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84123213/article/details/138341849
版权

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图片样式大小的接口，依然是在FallObject的Builder中扩展相应的接口

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;
    this.isWindRandom = isWindRandom;
    this.isWindChange = isWindChange;
    return this;
    }
    }

/**

  • 移动物体对象
    */
    private void moveObject(){
    moveX();
    moveY();
    if(presentY>parentHeight || presentX<-bitmap.getWidth() || presentX>parentWidth+bitmap.getWidth()){
    reset();
    }
    }

/**

  • X轴上的移动逻辑
    */
    private void moveX(){
    presentX += defaultWindSpeed * Math.sin(angle);
    if(isWindChange){
    angle += (float) (random.nextBoolean()?-1:1) * Math.random() * 0.0025;
    }
    }

/**

  • 重置object位置
    */
    private void reset(){
    presentY = -objectHeight;
    randomSpeed();//记得重置时速度也一起重置，这样效果会好很多
    randomWind();//记得重置一下初始角度，不然雪花会越下越少（因为角度累加会让雪花越下越偏）
    }

/**

  • 随机风的风向和风力大小比例，即随机物体初始下落角度
    */
    private void randomWind(){
    if(isWindRandom){
    angle = (float) ((random.nextBoolean()?-1:1) * Math.random() * initWindLevel /50);
    }else {
    angle = (float) initWindLevel /50;
    }

//限制angle的最大最小值
if(angle>HALF_PI){
angle = HALF_PI;
}else if(angle<-HALF_PI){
angle = -HALF_PI;
}
}
}

在Activity中调用新增加的接口
FallObject.Builder builder = new FallObject.Builder(getResources().getDrawable(R.drawable.ic_snow));
FallObject fallObject = builder
.setSpeed(7,true)
.setSize(50,50,true)
.setWind(5,true,true)
.build();
效果如图
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
至此本篇教程到此结束，如果大家看了感觉还不错麻烦点个赞，你们的支持是我最大的动力~

学习分享

在当下这个信息共享的时代，很多资源都可以在网络上找到，只取决于你愿不愿意找或是找的方法对不对了

很多朋友不是没有资料，大多都是有几十上百个G，但是杂乱无章，不知道怎么看从哪看起，甚至是看后就忘

如果大家觉得自己在网上找的资料非常杂乱、不成体系的话，我也分享一套给大家，比较系统，我平常自己也会经常研读。

2021最新上万页的大厂面试真题

七大模块学习资料：如NDK模块开发、Android框架体系架构…

只有系统，有方向的学习，才能在段时间内迅速提高自己的技术。

这份体系学习笔记，适应人群：
**第一，**学习知识比较碎片化，没有合理的学习路线与进阶方向。
**第二，**开发几年，不知道如何进阶更进一步，比较迷茫。
第三，到了合适的年纪，后续不知道该如何发展，转型管理，还是加强技术研究。如果你有需要，我这里恰好有为什么，不来领取！说不定能改变你现在的状态呢！
由于文章内容比较多，篇幅不允许，部分未展示内容以截图方式展示

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

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

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

体系学习笔记，适应人群：

**第一，**学习知识比较碎片化，没有合理的学习路线与进阶方向。
**第二，**开发几年，不知道如何进阶更进一步，比较迷茫。
第三，到了合适的年纪，后续不知道该如何发展，转型管理，还是加强技术研究。如果你有需要，我这里恰好有为什么，不来领取！说不定能改变你现在的状态呢！
由于文章内容比较多，篇幅不允许，部分未展示内容以截图方式展示

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

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

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

2401_84123213
关注
专栏目录
Android自定义View——从零开始实现覆盖翻页效果
AnliaLee的博客
12-13 4427
实现了覆盖翻页效果，同时教程中讲述了页面内容的封装过程
Android自定义View——从零开始实现圆形进度条
热门推荐
AnliaLee的博客
10-12 1万+
以前老是用别人造的轮子，知其然不知其所以然，有时看懂了别人写的过多几个月又忘了，遂来开个坑把一步步实现和思路写下来，弄成一个系列。本篇只要讲的是Android自定义圆形进度条
Android 源码实现雪花飘落效果
04-28
本附件Android源码实现雪花飘落效果，欢迎各位童鞋在阅读完源码之后提出指正意见。
Android自定义View——从零开始实现雪花飘落效果
AnliaLee的博客
11-23 5169
转眼已是十一月下旬了，天气慢慢转冷，不知道北方是不是已经开始下雪了呢？本期教程我们就顺应季节主题，一起来实现雪花飘落的效果吧
android雪花飘落动画,Android自定义View——从零开始实现雪花飘落效果
weixin_39742727的博客
05-25 465
大家要是看到有错误的地方或者有啥好的建议，欢迎留言评论前言：转眼已是十一月下旬了，天气慢慢转冷，不知道北方是不是已经开始下雪了呢？本期教程我们就顺应季节主题，一起来实现 雪花飘落的效果吧。本篇效果思路参考自国外大神的Android实现雪花飞舞效果，并在此基础上实现进一步的封装和功能扩展本篇只着重于思路和实现步骤，里面用到的一些知识原理不会非常细地拿来讲，如果有不清楚的api或方法可以在网上搜下相应...
Android之雪花飘落效果
最新发布
叶已初秋的博客
12-30 3004
Android自定义View实现雪花飘落效果，还可以设置飘落速度，雪花大小以及风速风向，一定是你想要的
Android代码-可以落雪花，还可以落汉堡包的飘落效果
08-08
FallingView FallingView可以实现碎片飘落效果的控件，默认的碎片是雪花图片，可以自定义碎片的图片，支持飘落的速度、碎片大小、碎片密度。Enjoy it O(∩_∩)O build.gradle中引用 compile 'com.dingmouren.fallingview:fallingview:1.0.2' 使用 xml中使用 代码中使用 mFallingView.setImageResource(R.drawable.img1);//设置碎片的图片,默认的图片是雪花 mFallingView.setDensity(progress);//设置密度，数值越大，碎片越密集,默认值是80 mFallingView.setScale(progress);//设置碎片的大小，数值越大，碎片越小，默认值是3 mFallingView.setDelay(progress);//设置碎片飘落的速度，数值越大，飘落的越慢，默认值是10 FallingView可以单个使用，也可以包裹其他控件，比如: 欢迎大家提Issues.
BookPage-Android自定义View实现翻页效果，并附带实现教程.zip
09-23
Android自定义View——从零开始实现书籍翻页效果（三） Android自定义View——从零开始实现书籍翻页效果（四） Android自定义View——从零开始实现书籍翻页效果（性能优化篇）效果展示：覆盖翻页效果CoverPageView...
Android自定义View——扇形统计图的实现代码
01-04
自定义View 定义成员变量 private int mHeight, mWidth;//宽高 private Paint mPaint;//扇形的画笔 private Paint mTextPaint;//画文字的画笔 private int centerX, centerY;//中心坐标 //其他的value //扇形...
Android自定义View——贝塞尔曲线实现直播点赞效果
12-28
Android自定义View——贝塞尔曲线实现直播点赞效果 Android自定义View——贝塞尔曲线实现直播点赞效果
Android-循环绘制下落物体的View可以模拟雪花雨滴金币等物体样式的飘落效果
08-12
循环绘制下落物体的View，可以模拟雪花、雨滴、金币等物体样式的飘落效果
雪花飘落安卓实现
12-29
在安卓中使用SurfaceView来实现雪花飘落的动画效果。SurfaceView拥有独立的绘图表面，能够实现复杂而高效的界面，可以下载研究学习。
Android雪花飘落特效
12-28
Android雪花飘落特效 类似淘宝 圣诞节飘落特效
Android 雪花飘落效果，代码很简单！！！！！-IT计算机-毕业设计.zip
04-05
Android应用源码开发Demo，主要用于毕业设计学习。
安卓动画效果相关-安卓中自定义View实现下雪效果.zip
07-29
安卓中自定义View实现下雪效果.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
Android 雪花飘落效果
ywl5320的专栏
07-13 2659
我的视频课程：《FFmpeg打造Android万能音频播放器》        由于项目需要实现类似于雪花飘落的效果，在Github中找到了开源项目（NineOldAndroids）：https://github.com/JakeWharton/NineOldAndroids/，其中有一个效果就是类似于雪花飘落效果，在这里我只单独把那个效果提取出来了，大家可以下载整个项目自己研究，我们都是站在别人的...
Android--雪花飘动特效
独具匠心的博客
01-10 2136
写这篇博客呢主要是来自一个需求吧，快到除夕了，每个公司能年前都要上一个版本，年前的版本里面肯定会需要一些特效，就比如今天的说的这个从上到下飘落雪花的特效，我写的是雪花的，至于你们想飘什么你们来定喽，建议大家在用代码的同时看一看代码，其实很简单。好的先看效果吧。 看到这个大家可能会感觉到难，那你就想多了，很简单，下面我就开始讲解一下这个效果。 首先看主Activity的布局和代码
Android实战简易教程-第六十九枪（自定义控件实现雪花飘落效果）
张亚运的专栏
10-29 3963
现在APP要求越来越高了，不只是要求实现功能，颜值的要求也越来越高，下面我们通过自定义控件来实现雪花飘落的效果，可以作为界面背景哦。1.自定义控件：package com.test.a; import java.util.Random; import android.content.Context; import android.content.res.Resources; import an
Android实现雪花飘落特效
Maxi的专栏
12-28 6944
圣诞节各大电商平台app都会有节日的气息，越是优秀的app越会让你感觉到它是一个活生生的app，是有一个强大的运营团队营造的富有生气的app，就像淘宝，圣诞节当天会把app主题更换成圣诞主题一样，图标都换成圣诞节特有的一些物品，而且app界面上也是飘起了雪花，很漂亮，所以在此我也写了一下雪花飘落的demo，不废话了先上图看效果吧。 截图效果不咋好，大家可以下载文章末的demo试试。自定义Sno
Android自定义View实现抽屉效果详解
"Android自定义View实现抽屉效果的相关资料" 在Android开发中，自定义View是一种常见的需求，尤其是在创建复杂的交互或独特的UI元素时。本文将深入探讨如何在Android中实现一个抽屉效果的自定义View。抽屉效果通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值