Android自定義View實(shí)現(xiàn)氣泡動(dòng)畫(huà)
本文實(shí)例為大家分享了Android自定義View實(shí)現(xiàn)氣泡動(dòng)畫(huà)的具體代碼,供大家參考,具體內(nèi)容如下
一、前言最近有需求制作一個(gè)水壺的氣泡動(dòng)畫(huà),首先在網(wǎng)上查找了一番,找到了一個(gè)文章:Android實(shí)現(xiàn)氣泡動(dòng)畫(huà)
測(cè)試了一下發(fā)現(xiàn),如果把它作為子視圖的話,會(huì)出現(xiàn)小球溢出邊界的情況。所以簡(jiǎn)單的修改了一下。
二、代碼1. 隨機(jī)移動(dòng)的氣泡
Ball類(lèi)
/** * @author jiang yuhang * @date 2021-04-18 19:57 */class Ball { // 半徑 @kotlin.jvm.JvmField var radius = 0 // 圓心 @kotlin.jvm.JvmField var cx = 0f // 圓心 @kotlin.jvm.JvmField var cy = 0f // X軸速度 @kotlin.jvm.JvmField var vx = 0f // Y軸速度 @kotlin.jvm.JvmField var vy = 0f @kotlin.jvm.JvmField var paint: Paint? = null // 移動(dòng) fun move() {//向角度的方向移動(dòng),偏移圓心cx += vxcy += vy } fun left(): Int {return (cx - radius).toInt() } fun right(): Int {return (cx + radius).toInt() } fun bottom(): Int {return (cy + radius).toInt() } fun top(): Int {return (cy - radius).toInt() }}
BallView類(lèi)
/** * @author jiang yuhang * @date 2021-04-18 19:53 */public class BallView extends View { private final Random mRandom; private final int mCount = 5; // 小球個(gè)數(shù) private final int minSpeed = 5; // 小球最小移動(dòng)速度 private final int maxSpeed = 20; // 小球最大移動(dòng)速度 public Ball[] mBalls; // 用來(lái)保存所有小球的數(shù)組 private int maxRadius; // 小球最大半徑 private int minRadius; // 小球最小半徑 private int mWidth = 200; private int mHeight = 200; public BallView(final Context context, final AttributeSet attrs) {super(context, attrs);// 初始化所有球(設(shè)置顏色和畫(huà)筆, 初始化移動(dòng)的角度)this.mRandom = new Random();final RandomColor randomColor = new RandomColor(); // 隨機(jī)生成好看的顏色,github開(kāi)源庫(kù)。this.mBalls = new Ball[this.mCount];for (int i = 0; i < this.mCount; i++) { this.mBalls[i] = new Ball(); // 設(shè)置畫(huà)筆 final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setColor(randomColor.randomColor()); paint.setStyle(Paint.Style.FILL); paint.setAlpha(180); paint.setStrokeWidth(0); // 設(shè)置速度 final float speedX = (this.mRandom.nextInt(this.maxSpeed - this.minSpeed + 1) + 5) / 10f; final float speedY = (this.mRandom.nextInt(this.maxSpeed - this.minSpeed + 1) + 5) / 10f; this.mBalls[i].paint = paint; this.mBalls[i].vx = this.mRandom.nextBoolean() ? speedX : -speedX; this.mBalls[i].vy = this.mRandom.nextBoolean() ? speedY : -speedY;} } @Override protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);this.mWidth = View.resolveSize(this.mWidth, widthMeasureSpec);this.mHeight = View.resolveSize(this.mHeight, heightMeasureSpec);this.setMeasuredDimension(this.mWidth, this.mHeight);this.maxRadius = this.mWidth / 12;this.minRadius = this.maxRadius / 2;// 初始化圓的半徑和圓心for (Ball mBall : this.mBalls) { mBall.radius = this.mRandom.nextInt(this.maxRadius + 1 - this.minRadius) + this.minRadius; // 初始化圓心的位置, x最小為 radius, 最大為mwidth- radius mBall.cx = this.mRandom.nextInt(this.mWidth - mBall.radius) + mBall.radius; mBall.cy = this.mRandom.nextInt(this.mHeight - mBall.radius) + mBall.radius;} } @Override protected void onDraw(final Canvas canvas) {final long startTime = System.currentTimeMillis();// 先畫(huà)出所有圓for (int i = 0; i < this.mCount; i++) { final Ball ball = this.mBalls[i]; canvas.drawCircle(ball.cx, ball.cy, ball.radius, ball.paint);}// 球碰撞邊界for (int i = 0; i < this.mCount; i++) { final Ball ball = this.mBalls[i]; this.collisionDetectingAndChangeSpeed(ball); // 碰撞邊界的計(jì)算 ball.move(); // 移動(dòng)}final long stopTime = System.currentTimeMillis();final long runTime = stopTime - startTime;// 16毫秒執(zhí)行一次this.postInvalidateDelayed(Math.abs(runTime - 16)); } // 判斷球是否碰撞碰撞邊界 public void collisionDetectingAndChangeSpeed(final Ball ball) {final int left = 0;final int top = 0;final int right = this.mWidth;final int bottom = this.mHeight;final float speedX = ball.vx;final float speedY = ball.vy;// 碰撞左右,X的速度取反。 speed的判斷是防止重復(fù)檢測(cè)碰撞,然后黏在墻上了=。=if (ball.left() <= left && speedX < 0) { ball.vx = -ball.vx;} else if (ball.top() <= top && speedY < 0) { ball.vy = -ball.vy;} else if (ball.right() >= right && speedX > 0) { ball.vx = -ball.vx;} else if (ball.bottom() >= bottom && speedY > 0) { ball.vy = -ball.vy;} }}
2.熱水氣泡
/** * @author jiang yuhang * @date 2021-04-18 19:57 */class Ball { // 半徑 @kotlin.jvm.JvmField var radius = 0 // 圓心 @kotlin.jvm.JvmField var cx = 0f // 圓心 @kotlin.jvm.JvmField var cy = 0f // X軸速度 @kotlin.jvm.JvmField var vx = 0f // Y軸速度 @kotlin.jvm.JvmField var vy = 0f @kotlin.jvm.JvmField var paint: Paint? = null // 移動(dòng) fun move() {//向角度的方向移動(dòng),偏移圓心cx += vxcy += vy } fun left(): Int {return (cx - radius).toInt() } fun right(): Int {return (cx + radius).toInt() } fun bottom(): Int {return (cy + radius).toInt() } fun top(): Int {return (cy - radius).toInt() }}
/** * @author jiang yuhang * @date 2021-04-18 19:53 */public class BallView extends View { final RandomColor randomColor = new RandomColor(); // 隨機(jī)生成好看的顏色,github開(kāi)源庫(kù)。 private final Random mRandom = new Random(); private final int mCount = 5; // 小球個(gè)數(shù) private final int minSpeed = 5; // 小球最小移動(dòng)速度 private final int maxSpeed = 15; // 小球最大移動(dòng)速度 public Ball[] mBalls = new Ball[this.mCount]; // 用來(lái)保存所有小球的數(shù)組 private int maxRadius; // 小球最大半徑 private int minRadius; // 小球最小半徑 private int mWidth = 200; private int mHeight = 200; public BallView(final Context context, final AttributeSet attrs) {super(context, attrs); } @Override protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);this.mWidth = View.resolveSize(this.mWidth, widthMeasureSpec);this.mHeight = View.resolveSize(this.mHeight, heightMeasureSpec);this.setMeasuredDimension(this.mWidth, this.mHeight);this.maxRadius = this.mWidth / 12;this.minRadius = this.maxRadius / 2;// 初始化所有球(設(shè)置顏色和畫(huà)筆, 初始化移動(dòng)的角度)for (int i = 0; i < mBalls.length; i++) { this.mBalls[i] = getRandomBall();} } private Ball getRandomBall() {Ball mBall = new Ball();// 設(shè)置畫(huà)筆setRandomBall(mBall);return mBall; } private void setRandomBall(Ball ball) {// 設(shè)置畫(huà)筆final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);paint.setColor(randomColor.randomColor());paint.setStyle(Paint.Style.FILL);paint.setAlpha(180);paint.setStrokeWidth(0);ball.paint = paint;// 設(shè)置速度f(wàn)inal float speedX = (this.mRandom.nextInt(this.maxSpeed - this.minSpeed + 1) + 5) / 10f;final float speedY = (this.mRandom.nextInt(this.maxSpeed - this.minSpeed + 1) + 5) / 10f;ball.vx = this.mRandom.nextBoolean() ? speedX : -speedX;ball.vy = -speedY;ball.radius = mRandom.nextInt(maxRadius + 1 - minRadius) + minRadius;ball.cx = mRandom.nextInt(mWidth - ball.radius) + ball.radius;ball.cy = mHeight - ball.radius; } @Override protected void onDraw(final Canvas canvas) {final long startTime = System.currentTimeMillis();// 先畫(huà)出所有圓for (int i = 0; i < this.mCount; i++) { final Ball ball = this.mBalls[i]; canvas.drawCircle(ball.cx, ball.cy, ball.radius, ball.paint);}// 球碰撞邊界for (int i = 0; i < this.mCount; i++) { collisionDetectingAndChangeSpeed(mBalls[i]); // 碰撞邊界的計(jì)算 mBalls[i].move(); // 移動(dòng)}final long stopTime = System.currentTimeMillis();final long runTime = stopTime - startTime;// 16毫秒執(zhí)行一次this.postInvalidateDelayed(Math.abs(runTime - 16)); } // 判斷球是否碰撞碰撞邊界 public void collisionDetectingAndChangeSpeed(Ball ball) {final int left = 0;final int top = 0;final int right = this.mWidth;final int bottom = this.mHeight;final float speedX = ball.vx;final float speedY = ball.vy;// 碰撞左右,X的速度取反。 speed的判斷是防止重復(fù)檢測(cè)碰撞,然后黏在墻上了=。=if (ball.left() <= left && speedX < 0) { ball.vx = -ball.vx;} else if (ball.top() <= top && speedY < 0) { setRandomBall(ball);} else if (ball.right() >= right && speedX > 0) { ball.vx = -ball.vx;} }}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 八種Vue組件間通訊方式合集(推薦)2. GIT相關(guān)-IDEA/ECLIPSE工具配置的教程詳解3. idea設(shè)置代碼格式化的方法步驟4. JSP實(shí)現(xiàn)百萬(wàn)富翁猜數(shù)字游戲5. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法6. ASP實(shí)現(xiàn)加法驗(yàn)證碼7. php bugs代碼審計(jì)基礎(chǔ)詳解8. UDDI FAQs9. 高德地圖WEB版基礎(chǔ)控件展示 原創(chuàng)10. requestAnimationFrame定時(shí)動(dòng)畫(huà)屏幕刷新率節(jié)流示例淺析
