android view爆炸效果,Android 显示view的粒子爆炸/绽放效果

照例先上图

2d5b6b79bcac5851e59af83dde47d570.gif

c048f8f7906b3129ee6aba37afd70822.gif

9da51cc9e6e109eb184d480de46593a0.gif

这个库做了什么?

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

功能

支持任何view

可灵活配置粒子大小和形状

可灵活配置粒子动画

形状

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

圆形

7e8c1614f7432776f04577487d3ddb36.gif

矩形

b81d578f80a79a0be7d09754298c31f5.gif

星型

9436a6f8dfe3b5dcb36447a222a08c33.gif

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

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

}

复制代码

允许你为每个粒子设置对应的形状

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

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

自定义分发器

自定义形状

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

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

复制代码

截图:7cbfebdb88b8a589523e2f712b2e98aa.gif

效果器

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)计算角度,以获得粒子的下一个运动角度

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

909191d3121848b4fa96f4212d422855.gif

速度

控制粒子的移动速度

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

公式如下:

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值