[Flutter Actual Combat] Más de 20 componentes de animación en una reunión literaria

Guía de Lao Meng: este artículo es el tercer artículo de la serie de animación Flutter, seguido de secuencias de animación, animaciones de transición, animaciones de transición y animaciones personalizadas.

El sistema Flutter proporciona más de 20 componentes de animación. Siempre que comprenda el artículo sobre [Animation Core] (enlace al final del artículo), estos componentes son muy fáciles para usted. La mayoría de estos componentes son para operaciones comunes. Paquete.

Mostrar componentes de animación

Revise los tres pasos necesarios para crear animaciones en el último artículo [Animation Core]:

Cree AnimationController.
Monitor AnimationController, llamando a setStateactualizar la interfaz de usuario.
Suelta el AnimationController.

Mire el segundo paso, cada animación necesita este paso, por lo que está empaquetado y llamado MyAnimatedWidget:

class MyAnimatedWidget extends StatefulWidget {
  final AnimationController controller;
  final Widget child;

  const MyAnimatedWidget(
      {Key key, @required this.controller, @required  this.child})
      : super(key: key);

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

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
  @override
  void initState() {
    super.initState();
    widget.controller.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }

  @override
  void dispose() {
    super.dispose();
    widget.controller.dispose();
  }
}

El componente de animación personalizada solo tiene dos funciones:

Escuche AnimationController y llame setState.
Suelta el AnimationController.

La creación de AnimationController debe ser creada por el desarrollador. ¿Por qué está encapsulado en un componente personalizado? Esto se presentará más adelante.

De hecho, este componente no necesita ser encapsulado por nosotros mismos, porque el sistema ya está encapsulado. Es muy importante personalizar el componente en el proceso de aprendizaje de Flutter. Por lo tanto, encapsula más componentes, incluso si el sistema ya existe, compáralo con el tuyo. Puede mejorar enormemente nuestra capacidad para personalizar componentes.

El componente similar al anterior encapsulado por el sistema es AnimatedWidget , que es una clase abstracta, código fuente:

la diferencia:

Usamos para escuchar AnimationController, llamar setState, y el sistema usa Listenable , Listenable es un objeto que mantiene una lista de oyentes, que se usa para notificar al cliente que el objeto ha sido actualizado.

Hay dos variantes de Listenable:
1. ValueListenable : una interfaz que extiende la interfaz [Listenable] y tiene el concepto de valores actuales.
2. Animación : Una interfaz que extiende la interfaz [ValueListenable], agregando el concepto de dirección (hacia adelante o hacia atrás).
La estructura de herencia de AnimationController:

AnimationController también hereda de Listenable, por lo que el uso de Listenable es aplicable a un rango más amplio, no solo para Animation, sino también para ChangeNotifier.
Debido a que se usa Listenable, monitorear y liberar el uso listenable.addListenery listenable.removeListener.

AnimatedWidget es una clase abstracta y no se puede usar directamente. Sus subclases incluyen:

Tome ScaleTransition como ejemplo para usar:

class AnimationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimationDemo();
}

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    _animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);

    _animation = Tween(begin: .5, end: .1).animate(_animationController);

    //开始动画
    _animationController.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: _animation,
      child: Container(
        height: 200,
        width: 200,
        color: Colors.red,
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}

La única diferencia con la escritura en [Animation Core] es que no es necesario llamarlo activamente setState.

El uso de otras subclases de AnimatedWidget es similar, y no se presentan una por una. El uso detallado de otros componentes se puede ver en http://laomengit.com/flutter/widgets/widgets_structure.html .

Componente de animación implícito

AnimatedWidget está simplemente encapsulado setState. ¿El sistema tiene componentes que encapsulan AnimationController, Tween, Curve y administran automáticamente AnimationController? Sí, este componente es ImplicitlyAnimatedWidget e ImplicitlyAnimatedWidget también es una clase abstracta, y sus subclases incluyen:

Tome AnimatedOpacity como ejemplo para usar:

class AnimatedWidgetDemo extends StatefulWidget {
  @override
  _AnimatedWidgetDemoState createState() => _AnimatedWidgetDemoState();
}

class _AnimatedWidgetDemoState extends State<AnimatedWidgetDemo> {
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedOpacity(
        opacity: _opacity,
        duration: Duration(seconds: 2),
        child: GestureDetector(
          onTap: () {
            setState(() {
              _opacity = 0;
            });
          },
          child: Container(
            height: 60,
            width: 150,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

Usando AnimatedOpacity no creamos activamente AnimationController y Tween, porque AnimatedOpacity ya se creó internamente.

Así que no mire los más de 20 componentes de animación integrados de Flutter, el 90% de los cuales encapsulan los dos métodos anteriores, llamados componentes de animación implícitos y componentes de animación de visualización:

Componentes de animación implícitos : solo proporcione los valores de inicio y fin de la animación del componente, el componente crea AnimationController, Curve, Tween, ejecuta la animación y libera el AnimationController. Lo llamamos el componente de animación implícita. Los componentes de animación implícitos son: AnimatedAlign , AnimatedContainer , AnimatedDefaultTextStyle , AnimatedOpacity , AnimatedPadding , AnimatedFysicalModel , AnimatedPositioned , AnimatedPositionedDirectional , AnimatedTheme , SliverAnimatedOpacity , TweenAnimationBuilder , AnimatedContainer, etc.
Mostrar componentes de animación : debe configurar AnimationController para controlar la ejecución de animaciones. Use animaciones explícitas para completar cualquier efecto de animación implícito e incluso tenga más funciones. Sin embargo, debe administrar el ciclo de vida del controlador de animación. AnimationController no es un control, por lo que Debe colocarse en un control de estado. Componentes de visualización de animaciones son: AlignTransition , AnimatedBuilder , AnimatedModalBarrier , DecoratedBoxTransition , DefaultTextStyleTransition , PositionedTransition , RelativePositionedTransition , RotationTransition , ScaleTransition , SizeTransition , SlideTransition , FadeTransition, etc.

No es difícil ver que el uso de controles de animación implícitos simplifica el código y no hay necesidad de administrar el ciclo de vida de AnimationController. Algunas personas piensan que los componentes de animación implícitos son muy convenientes. ¿Por qué deberían mostrarse los componentes de animación? Porque: cuanto más complejo es el paquete, más sencillo es de utilizar y, a menudo, va acompañado de funciones menos abundantes. Por ejemplo, si desea que la animación se ejecute repetidamente, el componente de animación implícita no se puede realizar.

Hay un componente universal en el componente de animación de visualización y el componente de animación implícita. Son AnimatedBuilder y TweenAnimationBuilder . Cuando el componente de animación que queremos no existe en el sistema, estos dos componentes se pueden utilizar. Tome AnimatedBuilder como ejemplo para lograr el tamaño del contenedor. Animar el color al mismo tiempo,

class AnimatedBuilderDemo extends StatefulWidget {
  @override
  _AnimatedBuilderDemoState createState() => _AnimatedBuilderDemoState();
}

class _AnimatedBuilderDemoState extends State<AnimatedBuilderDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Color> _colorAnimation;
  Animation<Size> _sizeAnimation;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 2));

    _colorAnimation =
        ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
    _sizeAnimation =
        SizeTween(begin: Size(100.0, 50.0), end: Size(200.0, 100.0))
            .animate(_controller);

    _controller.forward();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, widget) {
          return Container(
            width: _sizeAnimation.value.width,
            height: _sizeAnimation.value.height,
            color: _colorAnimation.value,
          );
        },
      ),
    );
  }
}

AnimatedBuilder y TweenAnimationBuilder esencialmente no son diferentes de otros componentes de animación, pero nos brindan más flexibilidad.

Como escoger

La animación incorporada de Flutter se divide en dos componentes: un componente de animación implícito y muestra un componente de animación , el componente de animación muestra encapsula el único setStatemétodo que requiere que los desarrolladores creen AnimationController y la gestión de AnimationController. El componente de animación implícita encapsula AnimationController, Curve y Tween, y solo necesita proporcionar los valores de inicio y fin de la animación del componente, y el resto lo gestiona el sistema.

El componente de animación implícita puede completar el efecto, y el componente de animación de visualización se puede completar, entonces, ¿cuándo usar el componente de animación implícita? ¿Cuándo utilizar el componente de animación de visualización?

Determine si su componente de animación se ha repetido, como una animación de carga que sigue girando, si es una animación explícita.
Determine si su componente de animación necesita un enlace de varios componentes, si es para elegir una animación explícita.
Determine si sus componentes de animación deben combinarse con animación, si es para elegir una animación explícita.
Si las tres condiciones anteriores no lo son, seleccione el componente de animación implícito para determinar si tiene un componente de animación incorporado; de lo contrario, utilice TweenAnimationBuilder; si es así, utilice el componente de animación incorporado directamente.
Seleccione un componente de animación explícito y determine si tiene componentes de animación incorporados. De lo contrario, utilice AnimatedBuilder. Si los hay, utilice componentes de animación incorporados directamente.

El diagrama lógico es el siguiente:

También hay una manera simple de distinguir: si su animación es relativamente simple y la animación pasa de un estado a otro, no necesita controlar el AnimationController por separado. En este caso, generalmente se pueden lograr componentes de animación implícitos.

Sin embargo, no es necesario enredar particularmente el uso de componentes de animación implícitos o mostrar componentes de animación, no importa cuál se use, el efecto se puede lograr.

comunicarse con

Dirección del blog de Laomeng Flutter (uso de control 330): http://laomengit.com

Bienvenido a unirse al grupo de intercambio Flutter (WeChat: laomengit) y seguir la cuenta pública [Lao Meng Flutter]: