The feeling of flutter animation heartbeat

Get into the habit of writing together! This is the first day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

In order to pursue a better user experience, sometimes we need a control that beats like a heartbeat to attract the user's attention. This is a small optimization requirement, but in Flutter, the two-piece animation stinks like a foot wrap It is long, so it needs to encapsulate an AnimatedWidget to liberate productivity.

implement animation

混入 SingleTickerProviderStateMixin

When creating an AnimationController, you need to pass a vsyncparameter that, when present vsync, will prevent the animated UI from consuming unnecessary resources when it is not on the current screen. By mixing in SingleTickerProviderStateMixin.

class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{}
复制代码

Create animation

Create an animation controller with an interval of nearly a second:

  late final AnimationController animController;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    }
复制代码

The heartbeat animation is from small to big, and then small, so you need an animation that changes the size of the value:

  late final Animation<double> animation;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
     animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    );
    }

复制代码

The heartbeat is uninterrupted, so you need to monitor the animation to resume the animation when it finishes, and then continue to start the animation:

    animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    ).animate(animController)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          animController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          animController.forward();
        }
      });
复制代码

Use the zoom controls:

Transform.scale(
                scale: animation.value,
                child: const FlutterLogo(
                  size: 80,
                ),
              ),
复制代码

For the jumping effect, highlight the jumping animation and shorten the retraction time:

   animController = AnimationController(
      reverseDuration: const Duration(milliseconds: 700),
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
复制代码

Finally don't forget to release resources:

  @override
  void dispose() {
    animController.dispose();
    super.dispose();
  }
复制代码

Extract into small components

In order to use a similar animation every time you only need to import it, you need to separate the animation and display components. Create a new one BounceWidget, include animation, and then pass in UI components:

class BounceWidget extends StatefulWidget {
  final Widget child;

  const BounceWidget({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  State<BounceWidget> createState() => _BounceWidgetState();
}
复制代码

Continue to implement the animation:

class _BounceWidgetState extends State<BounceWidget>
    with SingleTickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController animController;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      reverseDuration: const Duration(milliseconds: 700),
      duration: const Duration(milliseconds: 800),
      vsync: this,
    );
    animation = Tween<double>(
      begin: 0.9,
      end: 1.05,
    ).animate(animController)
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          animController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          animController.forward();
        }
      });
    animController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: animation.value,
      child: widget.child,
    );
  }

  @override
  void dispose() {
    animController.dispose();
    super.dispose();
  }
}
复制代码

To import animation:

  Center(
              child: BounceWidget(
                child: FlutterLogo(
                  size: 80,
                ),
              ),
复制代码

Full code:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 80, left: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const <Widget>[
            Text(
              "心动的",
              style: TextStyle(
                fontSize: 28,
                color: Colors.black,
              ),
            ),
            Text(
              "感觉",
              style: TextStyle(
                fontSize: 48,
                color: Colors.black,
              ),
            ),
            Center(
              child: BounceWidget(
                child: FlutterLogo(
                  size: 80,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
复制代码