Android 显示view的粒子爆炸/绽开效果

照例先上图

Bloom

Bloom

Bloom

这个库作了什么?

它能够以粒子的形式显示任何view的粒子动画效果,你能够下载DEMO来查看效果java

功能

  • 支持任何view
  • 可灵活配置粒子大小和形状
  • 可灵活配置粒子动画

形状

在该库中,支持三种粒子形状git

圆形

Circle

矩形

Rect

星型

Star

代码中,你首先须要设置形状分发器github

Bloom.with('activity')
    .setParticleRadius(15)
    .setShapeDistributor(new CircleShapeDistributor())
    //or setShapeDistributor(new RectShapeDistributor())
    //or setShapeDistributor(new StarShapeDistributor())
    .boom(view);
复制代码
什么是形状分发器?

ParticleShapeDistributor基础类:dom

public abstract class ParticleShapeDistributor {
    public abstract ParticleShape getShape(BloomParticle particle);
}
复制代码

容许你为每一个粒子设置对应的形状ide

关于自定义形状分发器和形状

怎么设置一个自定义形状分发器或者形状?spa

自定义分发器

继承类 ParticleShapeDistributor 而后给每一个粒子返回 形状 .3d

自定义形状

咱们来看一下 形状的基类:

public abstract class ParticleShape {
    private float mRadius;
    private float mCenterX;
    private float mCenterY;
    private Path mPath;

    public ParticleShape(float centerX, float centerY, float radius){
        mCenterX = centerX;
        mCenterY = centerY;
        mRadius  = radius;
        mPath = new Path();
    }

    public float getRadius() {
        return mRadius;
    }

    public float getCenterX() {
        return mCenterX;
    }

    public float getCenterY() {
        return mCenterY;
    }
    
    public abstract void generateShape(Path path);

    public Path getShapePath(){
        return mPath;
    }
}
复制代码

当你须要实现自定义粒子形状时,继承这个类,而后实现generateShape方法,你须要注意这里提供的参数是粒子的中心点坐标(x,y),以及它的最大半径


最后,让咱们实现三种形状的随机效果:

代码:

Bloom.with(this)
    .setParticleRadius(5)
    .setShapeDistributor(new ParticleShapeDistributor() {
        @Override
        public ParticleShape getShape(BloomParticle particle) {
            switch (mRandom.nextInt(3)){
                case 0:
                    return new ParticleCircleShape(particle.getInitialX(), particle.getInitialY(), particle.getRadius());
                case 1:
                    return new ParticleRectShape(2, 2, particle.getInitialX(), particle.getInitialY(), particle.getRadius());//设置圆角效果
                case 2:
                    return new ParticleStarShape(particle.getInitialX(), particle.getInitialY(), particle.getRadius());
            }
            return new ParticleCircleShape(particle.getInitialX(), particle.getInitialY(), particle.getRadius());
        }
    })
    .setEffector(new BloomEffector.Builder()
                 .setDuration(800)
                 .setAnchor(view.getWidth() / 2, view.getHeight() / 2)
                 .build())
    .boom(view);
复制代码

截图:

Random

效果器

BloomEffector 是该库最重要的类 , 您能够经过如下方式构建效果器:

new BloomEffector.Builder()
    .setDuration(800)
    .setAnchor(view.getWidth() / 2, view.getHeight() / 2)
    .build()
复制代码

咱们来看看效果器能够使用的全部方法:

方法 描述
setDuration(long duration) 设置bloom效果动画的长度(以毫秒为单位)
setInterpolator(TimeInterpolator interpolator) 设置bloom效果动画的插值器
setAnchor(float anchorX, float anchorY) 设置全部粒子的锚点
setSpeedRange(float minSpeed, float maxSpeed) 设置粒子的速度范围
setScaleRange(float minScale, float maxScale) 设置粒子的缩放范围
setSkewRange(float minSkew, float maxSkew) 设置粒子的倾斜范围
setRotationSpeedRange(float minRotationSpeedRange, float maxRotationSpeedRange) 设置粒子的旋转速度范围
setAcceleration(float acceleration, int accelerationAngle) 设置粒子加速度
setAccelerationRange(float minAcceleration, float maxAcceleration, int minAccelerationAngel, int maxAccelerationAngel) 设置粒子加速度
setFadeOut(long startTime, TimeInterpolator interpolator) 设置全部粒子的淡出效果
setFadeOut(long startTime) 设置全部粒子的淡出效果
BloomEffector build() 创建一个效果器

功能点描述

锚点

锚点能够控制全部粒子的初始运动方向, 原理是全部粒子都与这个锚点坐标(x,y)计算角度,以得到粒子的下一个运动角度

例如将锚点设置为视图中心点的坐标,则全部粒子将与中心点的坐标计算角度,即全部粒子将相对于中心点偏移,最终粒子动画效果以下:

Anchor

速度

控制粒子的移动速度

粒子的速度将从你设置的速度范围中取一个随机值

公式以下:

float randomSpeed = mRandom.nextFloat()*(mMaxSpeed-mMinSpeed) + mMinSpeed;
复制代码
缩放

控制粒子的缩放值

粒子的所防止将从你设置的缩放范围中获取随机值

公式以下:

float scale = mRandom.nextFloat() * (mMaxScale - mMinScale) + mMinScale
复制代码
倾斜

控制粒子的倾斜

粒子的倾斜将从你设置的偏斜范围中获取随机值

公式以下:

float skew = mRandom.nextFloat() * (mMaxSkew - mMinSkew) + mMinSkew;
复制代码
旋转

控制粒子的旋转加速度,若是未设置此值,则粒子不会旋转

粒子的旋转动画将从你设置的旋转速度范围中获取随机值

公式以下:

float rotationSpeed = mRandom.nextFloat()*(mMaxRotationSpeed-mMinRotationSpeed) + mMinRotationSpeed;
复制代码
加速度

控制粒子加速度和加速度方向,加速度方向由你设定的加速度角度决定,计算方法以下:

float angelInRadsAcc = (float) (accelerationAngle*Math.PI / 180f)

//x轴加速度
accelerationX = (float) (value * Math.cos(angleInRadsAcc));
//y轴加速度
accelerationY = (float) (value * Math.sin(angleInRadsAcc));
复制代码

加速度以像素/平方毫秒为单位:

float finalTranslateX = accelerationX*milliSecond*milliSecond;
float finalTranslateY = accelerationY*milliSecond*milliSecond;
复制代码
淡出

控制粒子的淡出效果,事实是控制粒子的alpha值, 淡出开始时间能够是[0-duration]

监听器

你能够经过如下方法设置监听器:

Bloom.with(this)
    .setParticleRadius(5)
    .setBloomListener(new BloomListener() {
        @Override
        public void onBegin() {
            //动画开始
        }

        @Override
        public void onEnd() {
	    //动画结束
        }
    })
    .boom(view);
复制代码

若是对你的开发起到帮助,请给做者一个star Github地址

相关文章
相关标签/搜索