Animación Wave en Flutter

Animación Wave en una aplicación móvil con el SDK Flutter

VIDEO Animación Wave en una aplicación móvil con el SDK Flutter

Código de un efecto de beziers curved animado en Flutter tanto para IOS y Android, prueba y debug con Clipper


Animación Wave en Flutter

Animación Wave en una aplicación móvil con el SDK Flutter

Para llegar a obtener dichos resultados, queremos decirles usamos un recurso de una página web medium la cual tiene muchos artículos referentes a tecnologías e inclusive código.

Código extraido del Sitio Web Medium y ligeramente modificado

ANIMACION WAVE en el lenguaje de programación Dart - SDK Flutter animacion.dart

import 'dart:math';
import 'dart:ui' as ui;
import 'package:vector_math/vector_math.dart' as Vector;
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;

class AnimacionWave extends StatefulWidget {
  @override
  _AnimacionWaveState createState() => new _AnimacionWaveState();

  AnimacionWave() {
    timeDilation = 1.0;
  }
}

class _AnimacionWaveState extends State<AnimacionWave> {
  @override
  Widget build(BuildContext context) {
    Size size = new Size(MediaQuery
        .of(context)
        .size
        .width, 300.0);
    return new Scaffold(
      backgroundColor: Colors.indigo,
      body: new Stack(
        children: <Widget>[
          new ColorCurveBody(   size: size, xOffset: 10, yOffset: 50, color: Colors.white),
        ],
      ),
    );
  }
}

class ColorCurveBody extends StatefulWidget {
  final Size size;
  final int xOffset;
  final int yOffset;
  final Color color;

  ColorCurveBody(
      {Key key, @required this.size, this.xOffset, this.yOffset, this.color})
      : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return new _ColorCurveBodyState();
  }
}

class _ColorCurveBodyState extends State<ColorCurveBody>
    with TickerProviderStateMixin {
  AnimationController animationController;
  List<Offset> animList1 = [];

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
        vsync: this, duration: new Duration(seconds: 2));
    animationController.addListener(() {
      animList1.clear();
      for (int i = -2 - widget.xOffset;
          i <= widget.size.width.toInt() + 2;
          i++) {
        animList1.add(new Offset(
            i.toDouble() + widget.xOffset,
            sin((animationController.value * 360 - i) %
                        360 *
                        Vector.degrees2Radians) *
                    20 +
                50 +
                widget.yOffset));
      }
    });
    animationController.repeat();
  }
  
  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      alignment: Alignment.center,
      child: new AnimatedBuilder(
        animation: new CurvedAnimation(
          parent: animationController,
          curve: Curves.easeInOut,
        ),
        builder: (context, child) => new ClipPath(
              child: widget.color == null
                  ? Image.network(
                      '',
                      width: widget.size.width,
                      height: widget.size.height,
                      fit: BoxFit.cover,
                    )
                  : new Container(
                      width: widget.size.width,
                      height: widget.size.height,
                      color: widget.color,
                    ),
              clipper: new WaveClipper(animationController.value, animList1),
            ),
      ),
    );
  }
}

class WaveClipper extends CustomClipper<Path> {
  final double animation;

  List<Offset> waveList1 = [];

  WaveClipper(this.animation, this.waveList1);

  @override
  Path getClip(Size size) {
    Path path = new Path();

    path.addPolygon(waveList1, false);

    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(WaveClipper oldClipper) =>
      animation != oldClipper.animation;
}

Como vemos en este código es posible modificar sus valores y agregar más funcionalidades para obtener un diseño de acuerdo a nuestros requerimientos, ejemplo para la portada o presentación inicial de nuestra Aplicación, esto depende de la creatividad que tengamos.

Capture Screen 

Flutter

 

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Animación Wave en Flutter?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 1311 veces | Publicado hace 8 meses

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019