Flutter development practice - realize the button-guided animation effect of moving back and forth from left to right

In the recent development process, it is necessary to realize the button guidance animation effect of moving back and forth from left to right

insert image description here

1. Animation

AnimationController is used to control the forward, reverse, stop and other related animation operations of one or more animations. By default, AnimationController animates linearly. The two listening Listeners of AnimationController are as follows

addListener
addListener(); it can be used to add a frame listener to Animation, which will be called every frame. The most common behavior in a frame listener is to call setState() after a state change to trigger a UI rebuild.
addStatusListener
addStatusListener(); it can add an "animation state change" listener to the Animation; the state change listener will be called when the animation starts, ends, forward or reverse (see AnimationStatus definition).

2. Realize the button-guiding animation effect of moving back and forth from left to right

TickerProviderStateMixin or SingleTickerProviderStateMixin is required when using animation
. When multiple Animations are required, use TickerProviderStateMixin

Note: When using AnimationController, you need to combine TickerProvider, because the construction parameter vsync in AnimationController can only be configured under TickerProvider. TickerProvider is an abstract class, so we generally use its implementation classes TickerProviderStateMixin and SingleTickerProviderStateMixin.

Realize the code effect of the button guide animation effect that moves back and forth

import 'package:flutter/material.dart';

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

  final Widget child;

  @override
  _ShakeContainerState createState() => _ShakeContainerState();
}

class _ShakeContainerState extends State<ShakeContainer>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 600));

    //使用弹性曲线
    _animation =
        CurvedAnimation(parent: _animationController, curve: Curves.easeOut);
    _animation = Tween(begin: 0.0, end: 1.0).animate(_animation);

    _animationController.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });

    _animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        _animationController.forward();
      }
    });

    _animationController.forward();
  }

  void animationDispose() {
    _animationController.dispose();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    animationDispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Transform(
        ///构建Matrix4
        transform: buildMatrix4(),

        ///中心对齐
        alignment: Alignment.center,
        child: widget.child,
      ),
    );
  }

  Matrix4 buildMatrix4() {
    double dx = 0;
    double dy = 0;

    ///x轴方向平移
    dx = _animation.value * 60;

    return Matrix4.translationValues(dx, dy, 0);
  }
}

/// 左右摆动的心
class HeartItem extends StatelessWidget {
  const HeartItem({Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 150.0,
      alignment: Alignment.center,
      child: Image.asset("assets/images/touch_here.png",
          width: 200.0,
        height: 150,
      ),
    );
  }
}

Matrix4.translationValues(dx, dy, 0); is used in the code to translate in the specified x or y axis direction.

insert image description here

3. Summary

Flutter development practice - realize the button-guided animation effect of moving back and forth from left to right.
Learning records, keep improving every day.