Original link: medium.com/felixblasc…

Again, a beautiful animated application of Simple_animations.

Simple_animations have completed support for Flutter Web, and examples of background animations (articles) have become the official Flutter Web example.

After Particle Animation with Flutter, this article will introduce how to use particle animation to interact with users.

As shown above, animation is a “cheap” click effect where the gopher appears briefly in six different places, and when clicked on a gopher (the “circle”) it splits into multiple particles, which then reappear after a random period of time, similar to a simple reaction game (whack-a-Gopher).

Ground squirrels controls

The following code is a simplified gopher control code:

class Mole extends StatefulWidget {
  @override
  _MoleState createState() => _MoleState();
}

class _MoleState extends State<Mole> {
  final List<MoleParticle> particles = [];

  bool _moleIsVisible = false;
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: _buildMole(),
    );
  }

  Rendering _buildMole() {
    return Rendering(
      onTick: (time) => _manageParticleLifecycle(time),
      builder: (context, time) {
        return Stack(
          overflow: Overflow.visible,
          children: [
            if(_moleIsVisible) GestureDetector(onTap: () => _hitMole(time), child: _mole()), ... particles.map((it) => it.buildWidget(time)) ], ); }); } Widget_mole() {
    return Container(
      decoration: BoxDecoration(
          color: Colors.brown, borderRadius: BorderRadius.circular(50)),
    );
  }

  _hitMole(Duration time) {
    _setMoleVisible(false);
    Iterable.generate(50).forEach((i) => particles.add(MoleParticle(time)));
  }

  _manageParticleLifecycle(Duration time) {
    particles.removeWhere((particle) {
      returnparticle.progress.progress(time) == 1; }); }}Copy the code

For gophers, we use GestureDetector instead of Container to put user clicks into the _hitMole method. These gophers are stacked with particles.

Inside the _hitMole() method, we hide the Gopher container and generate 50 moleparticles. The class also provides buildWidget() for building small gopher particles.

Finally, Rendering is achieved by Rendering control, which uses an onTick to make it more convenient for us to deal with the life cycle of particles. In our _manageParticleLifecycle() method, we deleted all particles after animation.

Particle animations

Our particle animation begins by covering the original Gopher container, then over time, the particle container flies randomly in all directions until the particle container is reduced to zero.

The MoleParticle class implements this behavior, as shown in the following code:

class MoleParticle { Animatable tween; AnimationProgress progress; MoleParticle(Duration time) { final random = Random(); final x = (100 + 200) * random.nextDouble() * (random.nextBool() ? 1:1); final y = (100 + 200) * random.nextDouble() * (random.nextBool() ? 1:1); tween = MultiTrackTween([ Track("x").add(Duration(seconds: 1), Tween(begin: 0.0, end: x)),
      Track("y").add(Duration(seconds: 1), Tween(begin: 0.0, end: y)),
      Track("scale").add(Duration(seconds: 1), Tween(begin: 1.0, end: 0.0)]); progress = AnimationProgress( startTime: time, duration: Duration(milliseconds: 600)); } buildWidget(Duration time) { final animation = tween.transform(progress.progress(time));return Positioned(
      left: animation["x"],
      top: animation["y"],
      child: Transform.scale(
        scale: animation["scale"], child: Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.brown, borderRadius: BorderRadius.circular(50)), ), ), ); }}Copy the code

To create particles, we calculate random target positions and store this information in the tween animation. The MultiTrackTween of Simple_animations is used here because it is possible to add three different tween animation properties at once.

Then we create an AnimationProgress to track the progress of the animation, we just need to provide it with the current time.

Finally, the animation tween and progress are combined with transform.scale and maneuver by buildWidget().

Some spawn-related logic is ruled out here, but you can find the complete demo code in the Simple Animations Example App.

This is applied toCarGuo/gsy_github_app_flutterThe effect of the project launch page:

Resources to recommend

  • Making: github.com/CarGuo
  • Open Source Flutter complete project:Github.com/CarGuo/GSYG…
  • Open Source Flutter Multi-case learning project:Github.com/CarGuo/GSYF…
  • Open Source Fluttre Combat Ebook Project:Github.com/CarGuo/GSYF…
  • Open Source React Native project: github.com/CarGuo/GSYG…