Animación Wave en 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 

Leido 7580 veces | 1 usuarios