flutter开发实战-Stagger Animation实现水波纹动画

这篇具有很好参考价值的文章主要介绍了flutter开发实战-Stagger Animation实现水波纹动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flutter开发实战-实现水波纹动画,使用到了交织动画,实现三个圆逐渐放大与渐变的过程。

一、效果图

flutter开发实战-Stagger Animation实现水波纹动画,flutter,flutter开发实战,移动开发,flutter,水波纹,动画

二、实现水波纹效果

实现水波纹动画,使用到了交织动画,实现三个圆逐渐放大与渐变的过程。
交织动画
有些时候我们可能会需要一些复杂的动画,这些动画可能由一个动画序列或重叠的动画组成。一个动画组合在不同阶段包含了多种动画,要实现这种效果,需要使用交织动画(Stagger Animation)实现会比较方法。

2.1、Stagger Animation

Stagger Animation

  • 1、使用多个动画对象(Animation)。
  • 2、多个Animation使用同一个AnimationController控制。
  • 3、需要设置每一个动画对象指定时间间隔(Interval)

这里实现逐渐放大与渐变动画。多个动画的时候需要在Widget中添加TickerProviderStateMixin。通过TickerProviderStateMixin实现TickerProvider获取对象的通知。TickerProvider来控制Ticker的通知,Ticker可以应用在Flutter中的每个对象上,一旦某个对象实现了Ticker的功能,每次动画帧改变,屏幕重绘时就会通知这个对象。

具体代码实现如下

import 'package:flutter/material.dart';

class WaterWaveContainer extends StatefulWidget {
  const WaterWaveContainer({super.key});

  
  State<WaterWaveContainer> createState() => _WaterWaveContainerState();
}

class _WaterWaveContainerState extends State<WaterWaveContainer> {

  
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    return Container(
      width: screenSize.width,
      height: screenSize.height,
      child: Stack(
        alignment: Alignment.center,
        children: buildAnimation(context),
      ),
    );
  }

  List<Widget> buildAnimation(BuildContext context) {
    List<Widget> list = [];
    for(int index = 0; index < 5; index++) {
      WaterWaveAnimation animation = WaterWaveAnimation(delay: Duration(milliseconds: 1500*index));
      list.add(animation);
    }

    return list;
  }
}

class WaterWaveAnimation extends StatefulWidget {
  const WaterWaveAnimation({super.key, required this.delay});

  final Duration delay;

  
  State<WaterWaveAnimation> createState() => _WaterWaveAnimationState();
}

class _WaterWaveAnimationState extends State<WaterWaveAnimation>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;
  late Animation<double> _opacityAnimation;

  
  void initState() {
    // TODO: implement initState
    super.initState();

    runAnimation();
  }

  void runAnimation() {
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 3000));

    // 缩放大小
    _scaleAnimation = Tween<double>(
      begin: 0.0,
      end: 200.0,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.0, 1.0, //间隔0~1.0,如果后20%的动画时间开始为0.2~1.0
          curve: Curves.ease,
        ),
      ),
    );

    // 调整透明的
    _opacityAnimation = Tween<double>(
      begin: 1.0,
      end: 0.0,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(
          0.0, 1.0, //间隔0~1.0,如果后20%的动画时间开始为0.2~1.0
          curve: Curves.ease,
        ),
      ),
    );

    _controller.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });

    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reset();
        _controller.forward();
      }
    });

    Future.delayed(widget.delay, (){
      if (mounted) {
        _controller.forward();
      }
    });
  }

  void animationDispose() {
    _controller.dispose();
  }

  
  void dispose() {
    // TODO: implement dispose
    animationDispose();
    super.dispose();
  }

  
  Widget build(BuildContext context) {
    return Opacity(
      opacity: _opacityAnimation.value,
      child: Transform.scale(
        scale: _scaleAnimation.value,
        child: Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
              color: Colors.greenAccent,
              borderRadius: BorderRadius.circular(25)),
        ),
      ),
    );
  }
}

四、小结

flutter开发实战-实现水波纹动画,实现水波纹动画,使用到了交织动画,实现三个圆逐渐放大与渐变的过程.

学习记录,每天不停进步。文章来源地址https://www.toymoban.com/news/detail-607320.html

到了这里,关于flutter开发实战-Stagger Animation实现水波纹动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Pygame 基础教程12: 使用 精灵(Sprite) 实现 帧动画(Animation)

    原文链接:https://xiets.blog.csdn.net/article/details/131395288 版权声明:原创文章禁止转载 专栏目录:Pygame 专栏(总目录) 精灵(Sprite) 表示游戏画面中基本的显示元素,前面所介绍的精灵虽然位置可以动态移动,但都是一张静态图片。游戏中还有许多动态的动画精灵,如一只飞翔的

    2024年01月17日
    浏览(56)
  • Flutter Flar动画实战

    在Flare动面出现之前,Flare动画大体可以分为使用AnimationController控制的基础动画以及使用Hero的转场动画,如果遇到一些复杂的场景,使用这些动画方案实现起来还是有难度的。不过,随着Flutter开始支持Flare矢量动面,Flutter的动画开发也变得越来越简单。事实上,Flare动画是一

    2024年02月14日
    浏览(34)
  • flutter开发实战-inappwebview实现flutter与Javascript方法调用

    flutter开发实战-inappwebview实现flutter与Javascript方法调用 在使用inappwebview时候,需要flutter端与JS进行交互,调用相应的方法,在inappwebview中的JavaScript Handlers。 要添加JavaScript Handlers,可以使用InAppWebViewController.addJavaScriptHandler方法,在该方法中定义handlerName和JavaScript端调用它时要

    2024年02月03日
    浏览(43)
  • flutter开发实战-MethodChannel实现flutter与iOS双向通信

    flutter开发实战-MethodChannel实现flutter与iOS双向通信 最近开发中需要iOS与flutter实现通信,这里使用的MethodChannel 如果需要flutter与Android实现双向通信,请看 https://blog.csdn.net/gloryFlow/article/details/132218837 这部分与https://blog.csdn.net/gloryFlow/article/details/132218837中的一致,这里实现一下

    2024年02月13日
    浏览(52)
  • flutter开发实战-事件总线EventBus实现

    flutter开发实战-事件总线EventBus实现 在开发中,经常会需要一个广播机制,用以跨Widget事件通知。 事件总线 实现了订阅者模式,订阅者模式包含发布者和订阅者两种角色,可以通过事件总线来触发事件和监听事件。 实现eventBus 在工程的pubspec.yaml引入库 1.使用event_bus库 创建一

    2024年02月15日
    浏览(41)
  • flutter开发实战-MethodChannel实现flutter与原生Android双向通信

    flutter开发实战-MethodChannel实现flutter与原生Android双向通信 最近开发中需要原生Android与flutter实现通信,这里使用的MethodChannel MethodChannel:用于传递方法调用(method invocation)。 通道的客户端和宿主端通过传递给通道构造函数的通道名称进行连接 一个应用中所使用的所有通道名称

    2024年02月13日
    浏览(39)
  • flutter开发实战-dio文件下载实现

    flutter开发实战-dio文件下载实现 在开发中,需要下载文件,这里使用的是dio dio 是一个强大的 Dart HTTP 请求库,支持全局配置、Restful API、FormData、拦截器、 请求取消、Cookie 管理、文件上传/下载、超时以及自定义适配器等。 在工程中pubspec.yaml引入dio 我们对dio进行封装 文件下

    2024年02月11日
    浏览(49)
  • flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge

    flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge 在使用webview中,需要实现flutter与Javascript交互,在使用webview_flutter插件的时候,整理了一下webview与Javascript的交互JSBridge,具体可以查看 https://blog.csdn.net/gloryFlow/article/details/131683122 这里使用inappwebview插件来实现flutter与

    2024年02月08日
    浏览(48)
  • flutter开发实战-Universal Links配置及flutter微信分享实现

    flutter开发实战-Universal Links配置及flutter微信分享实现 在最近开发中碰到了需要实现微信分享,在iOS端需要配置UniversalLink,在分享使用fluwx插件来实现微信分享功能。 1.1、什么是UniversalLink Universal link 是Apple在iOS9推出的一种能够方便的通过传统HTTPS链接来启动APP的功能,可以使

    2024年01月19日
    浏览(48)
  • flutter开发实战-实现首页分类目录入口切换功能

    。 在开发中经常遇到首页的分类入口,如美团的美食团购、打车等入口,左右切换还可以分页更多展示。 在pubspec.yaml引入 由于我这里按照一页8条展示,两行四列展示格式。 当列表list传入的控件时候,一共的页数为 通过列表,一页数量计算每一页应该展示多少个按钮。 一

    2024年02月14日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包