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

加入 LINE@ 趣聞不漏接

Linux編程

點擊右側關注，免費入門到精通！

文章來源於Android技術雜貨鋪

照例先上圖

內容目錄

這個庫做了什麼?

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

功能

支持任何view

可靈活配置粒子大小和形狀

可靈活配置粒子動畫

形狀

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

圓形

矩形

星型

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

Bloom.with('activity').setParticleRadius(15).setShapeDistributor(newCircleShapeDistributor())//orsetShapeDistributor(newRectShapeDistributor())//orsetShapeDistributor(newStarShapeDistributor()).boom(view);

什麼是形狀分發器?

ParticleShapeDistributor基礎類:

publicabstractclassParticleShapeDistributor{publicabstractParticleShapegetShape(BloomParticleparticle);}

允許你為每個粒子設置對應的形狀

在類CircleShapeDistributor中, 設置每個粒子為圓形

在類 RectShapeDistributor中, 設置每個粒子為矩形

在類StarShapeDistributor中, 設置每個粒子為星型

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

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

自定義分發器

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

自定義形狀

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

publicabstractclassParticleShape{privatefloatmRadius;privatefloatmCenterX;privatefloatmCenterY;privatePathmPath;publicParticleShape(floatcenterX,floatcenterY,floatradius){mCenterX=centerX;mCenterY=centerY;mRadius=radius;mPath=newPath();}publicfloatgetRadius(){returnmRadius;}publicfloatgetCenterX(){returnmCenterX;}publicfloatgetCenterY(){returnmCenterY;}publicabstractvoidgenerateShape(Pathpath);publicPathgetShapePath(){returnmPath;}}

當你需要做到自定義粒子形狀時，繼承這個類，然後做到generateShape方法，你需要注意這里提供的參數是粒子的中心點坐標（x，y），以及它的最大半徑

最後，讓我們做到三種形狀的隨機效果：

代碼:

Bloom.with(this).setParticleRadius(5).setShapeDistributor(newParticleShapeDistributor(){@OverridepublicParticleShapegetShape(BloomParticleparticle){switch(mRandom.nextInt(3)){case0:returnnewParticleCircleShape(particle.getInitialX(),particle.getInitialY(),particle.getRadius());case1:returnnewParticleRectShape(2,2,particle.getInitialX(),particle.getInitialY(),particle.getRadius());//設置圓角效果case2:returnnewParticleStarShape(particle.getInitialX(),particle.getInitialY(),particle.getRadius());}returnnewParticleCircleShape(particle.getInitialX(),particle.getInitialY(),particle.getRadius());}}).setEffector(newBloomEffector.Builder().setDuration(800).setAnchor(view.getWidth()/2,view.getHeight()/2).build()).boom(view);

截圖:

效果器

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

newBloomEffector.Builder().setDuration(800).setAnchor(view.getWidth()/2,view.getHeight()/2).build()

我們來看看效果器可以使用的所有方法：

功能點描述

錨點

錨點可以控制所有粒子的初始運動方向，原理是所有粒子都與這個錨點坐標（x，y）計算角度，以獲得粒子的下一個運動角度

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

速度

控制粒子的移動速度

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

公式如下：

floatrandomSpeed=mRandom.nextFloat()*(mMaxSpeed-mMinSpeed)+mMinSpeed;

縮放

控制粒子的縮放值

粒子的所防止將從你設置的縮放範圍中獲取隨機值

公式如下：

floatscale=mRandom.nextFloat()*(mMaxScale-mMinScale)+mMinScale

傾斜

控制粒子的傾斜

粒子的傾斜將從你設置的偏斜範圍中獲取隨機值

公式如下：

floatskew=mRandom.nextFloat()*(mMaxSkew-mMinSkew)+mMinSkew;

旋轉

控制粒子的旋轉加速度，如果未設置此值，則粒子不會旋轉

粒子的旋轉動畫將從你設置的旋轉速度範圍中獲取隨機值

公式如下：

floatangelInRadsAcc=(float)(accelerationAngle*Math.PI/180f)//x軸加速度accelerationX=(float)(value*Math.cos(angleInRadsAcc));//y軸加速度accelerationY=(float)(value*Math.sin(angleInRadsAcc));

加速度

控制粒子加速度和加速度方向，加速度方向由你設定的加速度角度決定，計算方法如下：

floatangelInRadsAcc=(float)(accelerationAngle*Math.PI/180f)//x軸加速度accelerationX=(float)(value*Math.cos(angleInRadsAcc));//y軸加速度accelerationY=(float)(value*Math.sin(angleInRadsAcc));

加速度以像素/平方毫秒為單位：

floatfinalTranslateX=accelerationX*milliSecond*milliSecond;floatfinalTranslateY=accelerationY*milliSecond*milliSecond;

淡出

控制粒子的淡出效果，事實是控制粒子的alpha值, 淡出開始時間可以是[0-duration]

監聽器

你可以通過以下方法設置監聽器：

Bloom.with(this).setParticleRadius(5).setBloomListener(newBloomListener(){@OverridepublicvoidonBegin(){//動畫開始}@OverridepublicvoidonEnd(){//動畫結束}}).boom(view);

如果對你的開發起到幫助，請給作者一個star

https://github.com/samlss/Bloom

推薦↓↓↓