Flutter – Animación de bisagra

Las animaciones son una gran parte de la aplicación Flutter. Hace que una aplicación sea agradable a la vista e igualmente fácil de usar. En este artículo, discutiremos en detalle las animaciones de Bisagra. En Flutter hay dos formas de trabajar con animaciones, a saber:

• Un paquete de pub
• Widget de generador animado

En este artículo, trabajaremos con el widget Animated Builder. Una animación Bisagra es un tipo de animación en la que un elemento puede voltearse con un movimiento repentino. Para implementar lo mismo, siga los siguientes pasos:

• Cree un archivo dart (por ejemplo, bisagra_animación ) dentro de la carpeta lib del proyecto.
• Agregue un FloatingActionButton para reproducir la animación y un texto para implementar la animación dentro del archivo hinge_animation.dart.
• Ahora cree una interpolación con CurvedAnimation usando la propiedad _rotationAnimation .
• Ahora use el controlador de animación para manejar y crear la instancia de la animación.

Exploremos estos pasos en detalle.

El archivo bisagra_animación.dart:

Después de agregar el texto, el FloatingActionButton , el AnimationController y la animación curva, el archivo se vería como a continuación:

import 'dart:math';
  
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
  
  
//create a stateful widget
class HingeAnimation extends StatefulWidget {
  @override
  _HingeAnimationState createState() => _HingeAnimationState();
  
}
  
class _HingeAnimationState extends State<HingeAnimation> with SingleTickerProviderStateMixin{
  // animation setup
  AnimationController _controller;
  Animation _rotationAnimation;
  Animation<double> _slideAnimation;
  Animation<double> _opacityAnimation;
  
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 2000),
    );
  
    _rotationAnimation = Tween(end: 0.15, begin: 0.0)
        .animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
            0.0,
            0.5,
            curve: Curves.bounceInOut
        ),
      ),
    );
     // setrtup the Tween for creating curve
    _slideAnimation = Tween(begin: 100.0, end: 600.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
            0.5,
            1.0,
            curve: Curves.fastOutSlowIn)
        ,
      ),
    );
      // setup opacticty as per need
    _opacityAnimation = Tween(begin: 1.0, end: 0.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
            0.5,
            1.0,
            curve: Curves.fastOutSlowIn),
      ),
    );
  
  }
  
  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
  
  // the animation widget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green[300],
          automaticallyImplyLeading: false,
          title: Text("GeeksForGeeks"),
          centerTitle: true,
        ),
  
        body: AnimatedBuilder(
          animation: _slideAnimation,
          builder: (BuildContext context, Widget child) => Container(
            width: 200,
            height: 150,
            padding: EdgeInsets.all(0),
            margin: EdgeInsets.only(
              left: 100,
              top: _slideAnimation.value,
            ),
            child: RotationTransition(
              turns: _rotationAnimation,
              child: Center(
                child:
                Text('GeeksForGeeks', style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                    color: Color.fromRGBO(
                        300,
                        150,
                        500,
                        _opacityAnimation.value)
                ),),
              ),
            ),
          ),
        ),
        // the button
        floatingActionButtonLocation:
        FloatingActionButtonLocation.miniCenterFloat,
  
        floatingActionButton:
        FloatingActionButton(
          child: Icon(Icons.play_arrow),
          backgroundColor: Colors.green[300],
          onPressed: (){
            _controller.forward();
          },
        ),
    );
  }
}

El archivo main.dart:

Esta es la estructura principal de todas las aplicaciones flutter. Después de completar el archivo bisagra_animación.dart anterior, solo necesitamos importarlo en el archivo main.dart como se muestra a continuación:

import 'package:flutter/material.dart';
import 'package:flutter_hinge_animation.dart';
  
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      //theme: ThemeData.dark(),
      home: Splash(),
    );
  }
}

Producción: