Android高级UI-粒子爆炸效果

作者: 一只胖胖胖胖猿 | 来源:发表于2019-08-28 09:20 被阅读0次

    背景知识

    • Bitmap中有关于获取位图像素的长宽和获取每一个像素点颜色值的方法
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.girl);
            bitmap.getWidth();
            bitmap.getHeight();
            int pixel = bitmap.getPixel(0, 0);
    

    创建一个粒子的实体类对象

    /**
     * 圆形粒子类
     */
    public class Ball {
        public int color; //图片像素点颜色值
        public float x; //粒子圆心x坐标
        public float y; //粒子圆心y坐标
        public float r; //粒子圆半径
        public float vX; //粒子x方向速度
        public float vY; //粒子y方向速度
        public float aX; //粒子x方向加速度
        public float aY; //粒子y方向加速度
    }
    

    自定义一个view,实现粒子爆炸效果

    1、创建一个画笔,用于进行绘制bitmap图形
    2、通过BitampFactory.decodeResource()来将图片转换成bitmap对象,用于获取长、宽、像素颜色等参数
    3、通过嵌套for循环,给ball赋值,最终添加到粒子数组中

            for (int i = 0; i < mBitmap.getWidth(); i++) {
                for (int j = 0; j < mBitmap.getHeight(); j++) {
                    Ball ball = new Ball();
                    ball.color = mBitmap.getPixel(i, j);
                    ball.x = i * d + d / 2; //确定每一个ball粒子的圆心坐标
                    ball.y = j * d + d / 2;
                    ball.r = d / 2;
    
                    //速度()
                    ball.vX = (float) (Math.pow(-1, Math.ceil(Math.random() * 1000)) * 20 * Math.random());
                    ball.vY = rangInt(-15, 35);
    
                    //加速度
                    ball.aX = 0;
                    ball.aY = 0.98f;
                    mBalls.add(ball);
                }
            }
    

    4、重写onDraw()方法,进行绘制bitmap图片,到这一步就可以在屏幕上面显示图片了

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            for (Ball ball : mBalls) {
                mPaint.setColor(ball.color);
                canvas.drawCircle(ball.x, ball.y, ball.r, mPaint);
            }
        }
    

    5、点击图片实现爆炸效果,需要创建一个属性动画

     mValueAnimator = ValueAnimator.ofFloat(0, 1);
            mValueAnimator.setRepeatCount(-1);
            mValueAnimator.setDuration(2000);
            mValueAnimator.setInterpolator(new LinearInterpolator());   //线性变化
            mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {   //添加属性动画更新的监听
                    updateBall();   //更新属性动画
                    invalidate();
                }
            });
    

    6、更新粒子的位置

        private void updateBall() {
            //更新粒子的位置,自由落地运动
            for (Ball ball : mBalls) {
                ball.x += ball.vX;
                ball.y += ball.vY;
    
                ball.vX += ball.aX;
                ball.vY += ball.aY;
            }
        }
    

    7、实现点击事件

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                mValueAnimator.start();
            }
            return super.onTouchEvent(event);
        }
    

    代码地址:https://github.com/JonyZeng/Cancas_Spilt

    相关文章

      网友评论

        本文标题:Android高级UI-粒子爆炸效果

        本文链接:https://www.haomeiwen.com/subject/vdtdectx.html