Android 顯示view的粒子爆炸/綻開效果

照例先上圖

這個庫作了什麼?

它能夠以粒子的形式顯示任何view的粒子動畫效果，你能夠下載DEMO來查看效果

功能

• 支持任何view
• 可靈活配置粒子大小和形狀
• 可靈活配置粒子動畫

形狀

在該庫中，支持三種粒子形狀

圓形

矩形

星型

代碼中，你首先須要設置形狀分發器

Bloom.with('activity')
    .setParticleRadius(15)
    .setShapeDistributor(new CircleShapeDistributor())
    //or setShapeDistributor(new RectShapeDistributor())
    //or setShapeDistributor(new StarShapeDistributor())
    .boom(view);
複製代碼

什麼是形狀分發器?

ParticleShapeDistributor基礎類:

public abstract class ParticleShapeDistributor {
    public abstract ParticleShape getShape(BloomParticle particle);
}
複製代碼

容許你爲每一個粒子設置對應的形狀

• 在類CircleShapeDistributor中, 設置每一個粒子爲圓形

• 在類 RectShapeDistributor中, 設置每一個粒子爲矩形

• 在類StarShapeDistributor中, 設置每一個粒子爲星型

關於自定義形狀分發器和形狀

怎麼設置一個自定義形狀分發器或者形狀?

自定義分發器

繼承類 ParticleShapeDistributor 而後給每一個粒子返回 形狀 .

自定義形狀

咱們來看一下 形狀的基類:

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);
複製代碼

截圖:

效果器

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）計算角度，以得到粒子的下一個運動角度

例如將錨點設置爲視圖中心點的座標，則全部粒子將與中心點的座標計算角度，即全部粒子將相對於中心點偏移，最終粒子動畫效果以下：

速度

控制粒子的移動速度

粒子的速度將從你設置的速度範圍中取一個隨機值

公式以下：

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地址