Práctica de desarrollo de Flutter: realice el efecto de animación guiado por botones de moverse hacia adelante y hacia atrás de izquierda a derecha

Práctica de desarrollo de Flutter: realice el efecto de animación guiado por botones de moverse hacia adelante y hacia atrás de izquierda a derecha

En el proceso de desarrollo reciente, es necesario realizar el efecto de animación de guía del botón que se mueve hacia adelante y hacia atrás de izquierda a derecha.

1. Animación

AnimationController se utiliza para controlar el avance, retroceso, parada y otras operaciones de animación relacionadas de una o más animaciones. De forma predeterminada, AnimationController anima linealmente. Los dos oyentes que escuchan de AnimationController son los siguientes

• addListener
  addListener(); se puede utilizar para agregar un detector de fotogramas a la animación, que se llamará en cada fotograma. El comportamiento más común en un detector de fotogramas es llamar a setState() después de un cambio de estado para activar una reconstrucción de la interfaz de usuario.

• addStatusListener
  addStatusListener(); puede agregar un detector de "cambio de estado de animación" a la animación; el detector de cambio de estado se llamará cuando la animación comience, finalice, avance o retroceda (consulte la definición de AnimationStatus).

2. Realice el efecto de animación de guía de botones al moverse hacia adelante y hacia atrás de izquierda a derecha.

Se requiere TickerProviderStateMixin o SingleTickerProviderStateMixin cuando se usa animación
. Cuando se requieren varias animaciones, use TickerProviderStateMixin

Nota: Cuando utilice AnimationController, debe combinar TickerProvider, porque el parámetro de construcción vsync en AnimationController solo se puede configurar en TickerProvider. TickerProvider es una clase abstracta, por lo que generalmente usamos sus clases de implementación TickerProviderStateMixin y SingleTickerProviderStateMixin.

Realice el efecto de código del efecto de animación de la guía de botones que se mueve hacia adelante y hacia atrás

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);se utiliza en el código para traducir en la dirección especificada del eje xoy.

Tres.Resumen

Práctica de desarrollo de Flutter: realice el efecto de animación guiado por botones de moverse hacia adelante y hacia atrás de izquierda a derecha.
Registros de aprendizaje, sigue mejorando cada día.