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

Animación Wave en Flutter

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

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

 


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

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

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

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 2312 veces | Publicado hace 1 año

Más códigos de programación en FLUTTER.

Ver scripts de FLUTTER

Aprende a crear aplicaciones móviles en Android con el curso Android desde cero

VER EL CURSO ANDROID DESDE CERO

Lo último que estamos programando en el curso: Android desde Cero

Realizar pruebas debug y generar el APK de la App Hotel

Debug y generar apk

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020