照例先上图
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);
什么是形状分发器?
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()
我们来看看效果器可以使用的所有方法:
方法 | 描述 |
---|---|
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地址
网友评论