confetti
介绍:
高度自定义的粒子喷发效果。
运行效果:
使用说明:
依赖
compile 'com.github.jinatonic.confetti:confetti:1.0.0'
The only thing you need to get confetti on your screen is a parent view to host the ConfettiView
and thus the confetti animation. From this point on, this parent view is referred to as container
.
You can generate pre-configured confetti from CommonConfetti
. You only need to provide it with the parent container
, aConfettiSource
, and an array of possible colors for the confetti. The default confetti shapes are circle, triangle, and square.
CommonConfetti.rainingConfetti(container, new int\[\] { Color.BLACK })
.infinite();
More custom usage
First, we need to define what our individual confetto is through the ConfettoGenerator
. Each call of generateConfetto
must generate a brand new Confetto
object (the ConfettiManager
will recycle the generated confetto as needed so you might see fewer and fewer calls to generateConfetto
as the animation goes on). We pass in a Random
intogenerateConfetto
in case you want to randomly generate a confetto from a list of possible confetti.
A simple ConfettoGenerator
might look like this:
final List<Bitmap> allPossibleConfetti = constructBitmapsForConfetti();
// Alternatively, we provide some helper methods inside \`Utils\` to generate square, circle,
// and triangle bitmaps.
// Utils.generateConfettiBitmaps(new int\[\] { Color.BLACK }, 20 /* size */);
final int numConfetti = allPossibleConfetti.size();
final ConfettoGenerator confettoGenerator = new ConfettoGenerator() {
@Override
public Confetto generateConfetto(Random random) {
final Bitmap bitmap = allPossibleConfetti.get(random.nextInt(numConfetti));
return new BitmapConfetto(bitmap);
}
}
Once we have our ConfettoGenerator
, we'll need to define a ConfettiSource
from which confetti will appear out of. This source can be any arbitrary point or line.
final int containerMiddleX = container.getWidth() / 2;
final int containerMiddleY = container.getHeight() / 2;
final ConfettiSource confettiSource = new ConfettiSource(containerMiddleX, containerMiddleY);
Now you are ready! construct your ConfettiManager
, configure the animation to your liking, and then call animate()
!
new ConfettiManager(context, confettoGenerator, confettiSource, container)
.setEmissionDuration(1000)
.setEmissionRate(100)
.setVelocityX(20, 10)
.setVelocityY(100)
.setRotationalVelocity(180, 180)
.animate();
The animate()
call will create and configure the various Confetto
objects on demand, create a new ConfettiView
, initialize the proper states for all of the components, attach the view to the container
and start the animation. TheConfettiView
will auto-detach itself once all of the confetti have terminated and are off the screen.
For more sample usage of the library, please check out the confetti-sample app that's included in this project.
Configuration
The ConfettiManager
is easily configurable. For simplicity's sake, all of the velocity and acceleration attributes are in pixels per second or pixels per second^2, whereas all of the raw time attributes (such as ttl
and emissionDuration
) are in milliseconds.
You will notice that most of the setters for the physical attributes (e.g. velocity, acceleration, rotation) can take in either one argument for the actual value or two arguments. The second argument allows you to specify a random deviation if you want to randomize the behavior among all of the generated confetto.
For example:
confettiManager.setVelocityX(200f, 50f);
The generated confetto will have an initial X velocity of anywhere between 200 - 50
or 150
and 200 + 50
or 250
, eventually distributed.
enableFadeOut(Interpolator fadeOutInterpolator)
is another interesting method. You can specify that fade out occurs as a confetto nears its boundary (either reaching the physical boundary specified in bound
(this is either the entirety ofcontainer
or set in setBound
) or reaching ttl
). The interpolator essentially takes in a value between 0 and 1 (0 means that the confetto is at its source, 1 means the confetto is at its bound) and outputs an alpha value between 0 and 1 (0 is transparent and 1 is opaque). This way, we allow you to have the full power of specifying how the fade out occurs.
Or, if you are lazy, you can just use Utils.getDefaultAlphaInterpolator()
.