flutter:animate_do(flutter中的Animate.css)

这篇具有很好参考价值的文章主要介绍了flutter:animate_do(flutter中的Animate.css)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

做过web开发的应该大部分人都知道Animate.css,它为开发者提供了一系列预定义的动画效果,可以通过简单的CSS类来实现各种动画效果。而animate_do 相当于flutter中的Animate.css,它提供了很多定义好的动画效果

基本使用

官方地址
https://pub-web.flutter-io.cn/packages/animate_do

安装

flutter pub add animate_do

示例一

class SwitcherContainerState extends State<SwitcherContainer> {
  
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          FadeInLeft(child: const Square(label: '1')),
          FadeInUp(child: const Square(label: '2') ),
          FadeInDown(child: const Square(label: '3') ),
          FadeInRight(child: const Square(label: '4') ),
        ],
      ),
    );
  }
}

class Square extends StatelessWidget {
  final String label;
  const Square({Key? key,required this.label}) : super(key: key);
  
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.blueAccent,
      child: Text(label,style: const TextStyle(color: Colors.white),),
    );
  }
}

flutter:animate_do(flutter中的Animate.css),dart 和 Flutter,flutter,css,前端
示例2

class SwitcherContainerState extends State<SwitcherContainer> {
  bool isVisible = true;
  
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Visibility(
          visible: isVisible,
          replacement: FadeOut(
            duration: const Duration(seconds: 1),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
          child: FadeIn(
            duration: const Duration(seconds: 1),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ),
        const SizedBox(
          height: 100,
        ),
        ElevatedButton(
            onPressed: () {
              setState(() {
                isVisible = true;
              });
            },
            child: const Text("淡入")),
        ElevatedButton(
            onPressed: () {
              setState(() {
                isVisible = false;
              });
            },
            child: const Text("淡出"))
      ],
    ));
  }
}

flutter:animate_do(flutter中的Animate.css),dart 和 Flutter,flutter,css,前端
示例3

class SwitcherContainerState extends State<SwitcherContainer> {
  List<String> items = [
    'item 1',
    'item 2',
    'item 3',
    'item 4',
    'item 5',
    'item 6',
    'item 7',
    'item 8',
    'item 9',
    'item 10'
  ];
  
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return FadeInRight(
              delay: Duration(milliseconds: 200 * index),
              child: SlideInUp(
                delay: Duration(milliseconds: 200 * index),
                child: ListTile(
                  title: Text(items[index]),
                ),
              ));
        });
  }
}

flutter:animate_do(flutter中的Animate.css),dart 和 Flutter,flutter,css,前端
示例4

class SwitcherContainerState extends State<SwitcherContainer> {

  
  Widget build(BuildContext context) {
    return GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        itemCount: 4,
        itemBuilder: (BuildContext context, int index) {
          return FadeInRight(
              delay: const Duration(seconds: 1),
              child: ZoomIn(
                delay: const Duration(seconds: 1),
                child: Container(
                  width: 120,
                  height: 100,
                  margin: const EdgeInsets.all(8),
                  color: Colors.blue,
                  child: Center(
                    child: Text("item $index",style: const TextStyle(color: Colors.white),),
                  ),
                ),
              ));
        });
  }
}

flutter:animate_do(flutter中的Animate.css),dart 和 Flutter,flutter,css,前端
示例5

上面的几个例子动画都是自动触发,如果需要手动触发可以如下

Column(
  children: [
    ElevatedButton(
        onPressed: () {
          animationController.forward();
        },
        child: const Text("开始")),
    Expanded(
        child: ZoomIn(
      manualTrigger: true,
      controller: (controller) => animationController = controller,
      delay: const Duration(seconds: 1),
      child: Container(
        width: 120,
        height: 100,
        margin: const EdgeInsets.all(8),
        color: Colors.blue,
        child: const Center(
          child: Text(
            "item",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ))
  ],
)

flutter:animate_do(flutter中的Animate.css),dart 和 Flutter,flutter,css,前端文章来源地址https://www.toymoban.com/news/detail-604226.html

到了这里,关于flutter:animate_do(flutter中的Animate.css)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系?

    【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系? 👏🏻 正在学 Flutter 的同学,你好! 😊 本专栏是解决 Flutter 面试过程中可能出现的问题,而进行汇总整理的。一个问题一篇文章,尽可能详细解答,满足面试需求。 🔍 想解决开发中的零散问题?碎片化教程 👉 Flutte

    2024年02月22日
    浏览(47)
  • 如何将 Animate 动画与 After Effects 中的 Cinema 4D 渲染合并?

    如何将手动动画 2D 元素添加到 3D 渲染中,有多种方法可以做到这一点,但您需要确保在动画的两侧都进行设置,以确保在合成时能够充分利用资源。上面的视频确实贯穿了一个非常实用且高效的工作流程,以实现正确的这些效果。  创建参考动画   任何设计师都会告诉您,

    2024年02月11日
    浏览(52)
  • 【Flutter】Flutter Dart 获取当前时间戳

    在日常的软件开发中,我们经常需要获取当前的时间戳。无论是用于日志记录,还是用于生成唯一标识符,或者是用于时间同步,时间戳都发挥着重要的作用。 本文将详细介绍如何在 Flutter 和 Dart 中获取当前时间戳。 通过阅读本文,你将掌握以下知识: 了解时间戳的重要性

    2024年02月12日
    浏览(41)
  • Flutter系列文章-Flutter环境搭建和Dart基础

    Flutter是Google推出的一个开源的、高性能的移动应用开发框架,可以用一套代码库开发Android和iOS应用。Dart则是Flutter所使用的编程语言。让我们来看看如何搭建Flutter开发环境,并了解Dart语言的基础知识。 1. 安装Flutter SDK 首先,访问Flutter官网下载Flutter SDK。选择适合你操作系统

    2024年02月15日
    浏览(49)
  • 【Flutter】下载安装Flutter并使用学习dart语言

    安装flutter, 并使用flutter内置的dartSDK学习使用dart语言。 编辑器: Android Studio fluuter 版本 : flutter_windows_3.13.1 内置dartSDK : 3.1.0 dart路径路径: flutter安装路径bincachedart-sdk flutter下载地址 官网的下载描述蛮详细的,直接用就行。 Android Studio 需要到官网下载安装包。 如果你c盘容

    2024年02月09日
    浏览(47)
  • Flutter学习2 - Dart

    Dart语言特点: Dart 2.0 开始便是强类型语言,而且是静态类型的(可以类比Java,C#等) 强类型语言的优点:所有类型的检查必须在编译的时候完成 前端开发的 js 语言是弱类型的语言 强类型的语言需要在定义的时候指定类型,如果不指定,编译器也可以在赋值的时候推断出变

    2024年02月21日
    浏览(49)
  • 【Flutter】Dio 强大的Dart/Flutter HTTP客户端

    Dio是一个强大的Dart/Flutter HTTP客户端,支持全局配置、拦截器、FormData、请求取消、文件上传/下载、超时等功能。 首先,

    2024年02月11日
    浏览(47)
  • 无涯教程-Flutter - Dart简介

    Dart是一种开源通用编程语言,它最初是由Google开发的, Dart是一种具有C样式语法的面向对象的语言,它支持诸如接口,类之类的编程概念,与其他编程语言不同,Dart不支持数组, Dart集合可用于复制数据结构,例如数组,泛型和可选类型。 以下代码显示了一个简单的Dart程序

    2024年02月10日
    浏览(56)
  • Flutter Dart语言(05)异步

    该系列教程主要是为有一定语言基础 C/C++的程序员,快速学习一门新语言所采用的方法,属于在C/C++基础上扩展新语言的模式。 在Dart语言中,虽然没有像其他语言(如Java、C++、Python)中的传统多线程概念,但它采用了异步(asynchronous)编程模型来处理并发任务。Dart使用asy

    2024年02月14日
    浏览(41)
  • 【Flutter】Dart/Flutter SDK如何降低版本、回退到指定版本

    因为dart3.0以后不再支持 no-sound-null-safety;但是有些项目不得以切换到dart3.0以前继续使用运行项目 方法1: 通过 命令,将flutter降级为当前通道的上一个活动版本; 如果没有存在老版本则会提示 flutter downgrade There is no previously recorded version for channel “stable”. 这样的话则可以通

    2024年02月16日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包