照例先上圖

Bloom

Bloom

Bloom

這個庫做了什么?

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

功能

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

形狀

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

圓形

Circle

矩形

Rect

星型

Star

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

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);

截圖:

Random

效果器

BloomEffector 是該庫最重要的類 , 您可以通過以下方式構建效果器：

new BloomEffector.Builder()
    .setDuration(800)
    .setAnchor(view.getWidth() / 2, view.getHeight() / 2)
    .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地址