Inicio » Blog » Flutter

3 enero, 2019

Animación Wave en Flutter

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

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

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

 


Leido 7202 veces

Compartir link del tutorial con tus amigos


Aprende más sobre Flutter

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023