Camera Aperture animation for mobile by Flutter

Created by Alfonso Cejudo, Saturday, July 13th 2019. link

This is Alfonso Cejudo encapsulated shutter animation, Alfonso’s design is disc shutter animation. I made secondary encapsulation on his basis and principle, which can achieve full-screen visual animation effect on mobile terminal.

This link is worth checking out for more of his animation principles.

Core Principles:

  • Dart > defines the properties and methods of the ApertureBladePainter class
  • Aperture_blades.dart > Computes the logic and encapsulation of the animation
  • Dart > references the ApertureBladePainter class and appearance layout

Initialize sets animation parameters

  • main.dart >
void initState() { super.initState(); animationController = AnimationController( // ! Initial animation takes 13 seconds vsync: this, duration: duration (milliseconds: 1300)); animationController.addStatusListener((status) { // ! Restart the animation when the shutter (animation area) is mergedif(status == AnimationStatus.completed) { Future.delayed(const Duration(milliseconds: 400), () { animationController.reverse(); // animationController.stop(); }); / /! Stop animation when shutter (animation area) is maximized open}else if (status == AnimationStatus.dismissed) {
      Future.delayed(const Duration(milliseconds: 400), () {
        // animationController.forward();
        animationController.stop();
      });
    }
  });
  // !Starts running this animation inreverse (towards the beginning). // ! Put the animation in the start state (not executed) //! If set to forward will automatically open the animation effects animationController. The reverse (); // animationController.dispose(); } @override // ! Enable stop animation effect voiddispose() {
  animationController.dispose();

  super.dispose();
}
Copy the code

The photo button enables animation

setState((){ // ! Enable animations animationController. Forward (); });Copy the code

Making address:

aperture_demo

CameraAperture_mobile