Flutter动画库:animations(路由过渡动画或者页面切换动画)

animations

animations 是一个 Flutter 库,它提供了一组用于创建动画效果的工具和组件。这个库的核心重点是路由过渡动画或者页面切换动画

地址
https://pub-web.flutter-io.cn/packages/animations

安装

flutter pub add animations

看了下官方文档和官方例子,然后就有点懵。差点以为找错库了。还好flutter中的库可以直接点开(ctrl+鼠标右键)查看源码

点开:import 'package:animations/animations.dart';,可以看到有以下几个文件
在这里插入图片描述
modal.dart用不到,另外几个就是官方提供给我们的动画。下面一块看一下,以下都是使用的默认配置,记得引入下面这个包

`import 'package:animations/animations.dart';`

fade_scale_transition

Center(
  child: ElevatedButton(
onPressed: () {
  showModal(
      context: context,
      // 配置
      configuration: const FadeScaleTransitionConfiguration(),
      builder: (context) {
        return const Center(
          child: SizedBox(
            width: 250,
            height: 250,
            child: Material(
              child: Center(
                child: FlutterLogo(size: 250),
              ),
            ),
          ),
        );
      });
},
child: const Text("打开弹窗"),
));

在这里插入图片描述

fade_through_transition

这个是一个路由切换动画

MaterialApp(
      theme: ThemeData(
          // 设置页面过渡主题
          pageTransitionsTheme: const PageTransitionsTheme(builders: {
        TargetPlatform.android: FadeThroughPageTransitionsBuilder(),
        TargetPlatform.iOS: FadeThroughPageTransitionsBuilder(),
      })),
      // 路由
      routes: {
        '/': (BuildContext context) {
          return Container(
            color: Colors.red,
            child: Center(
              child: TextButton(
                child: const Text('Push route'),
                onPressed: () {
                  Navigator.of(context).pushNamed('/a');
                },
              ),
            ),
          );
        },
        '/a': (BuildContext context) {
          return Container(
            color: Colors.blue,
            child: Center(
              child: TextButton(
                child: const Text('Pop route'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ),
          );
        },
      },
      // home: YcHomePage(),
    );

在这里插入图片描述

open_container

这个还是很不错的

Center(
        child: OpenContainer(
      transitionDuration: const Duration(milliseconds: 500),
      // 打开状态
      openBuilder: (BuildContext context, VoidCallback _) {
        return const SecondPage();
      },
      // 闭合状态
      closedBuilder: (BuildContext context, VoidCallback openContainer) {
        return GestureDetector(
          onTap: openContainer,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: const Center(
              child: Text(
                'Tap to Open',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          ),
        );
      },
    ));
class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: const Center(
        child: Text(
          'Second Page',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

page_transition_switcher

可以用于在不同页面之间实现平滑的过渡动画。它可以让我们在切换页面时应用自定义的过渡效果,比如淡入淡出、滑动、缩放等。


// 创建一个PageTransitionSwitcher组件,并将需要切换的页面作为其子组件。
class SwitcherContainer extends StatefulWidget {
  const SwitcherContainer({Key? key}) : super(key: key);

  
  _SwitcherContainerState createState() => _SwitcherContainerState();
}

class _SwitcherContainerState extends State<SwitcherContainer> {
  int _pageIndex = -1;

  
  Widget build(BuildContext context) {
    return PageTransitionSwitcher(
      // 过渡时间
      duration: const Duration(milliseconds: 500),
      // 过渡构建函数,还有其他的构建函数具体见源码
      transitionBuilder: (child, animation, secondaryAnimation) {
        return FadeThroughTransition(
          animation: animation,
          secondaryAnimation: secondaryAnimation,
          child: child,
        );
      },
      child: _getPage(_pageIndex),
    );
  }

  Widget _getPage(int index) {
    switch (index) {
      case 0:
        return const FirstPage();
      default:
        return Center(
          child: ElevatedButton(
              onPressed: () {
                setState(() {
                  _pageIndex = 0;
                });
              },
              child: const Text("跳转")),
        );
    }
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Second Page',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

这里写的例子不太合适,正常应该是跑马灯那样进行切换。
在这里插入图片描述

shared_axis_transition

SharedAxisPageTransitionsBuilderanimations库中的一个过渡构建器,它可以在页面之间应用共享坐标轴的过渡动画效果。它提供了三个不同的过渡类型:SharedAxisTransitionType.scaledSharedAxisTransitionType.horizontalSharedAxisTransitionType.vertical,分别表示缩放、水平和垂直方向的过渡效果。

这个也是一个路由过渡动画

class MyApp extends StatelessWidget {
  //创建widget的唯一标识
  const MyApp({Key? key}) : super(key: key);
  //重写build方法
  
  Widget build(BuildContext context) {
    // ChangeNotifierProvider 会返回一个 ChangeNotifier 对象,它允许消费者在 CounterState 对象发生变化时收到通知。
    return MaterialApp(
      home: const YcHomePage(),
      theme: ThemeData(
          pageTransitionsTheme: const PageTransitionsTheme(builders: {
        TargetPlatform.android: SharedAxisPageTransitionsBuilder(
          transitionType: SharedAxisTransitionType.scaled,
        ),
        TargetPlatform.iOS: SharedAxisPageTransitionsBuilder(
          transitionType: SharedAxisTransitionType.scaled,
        ),
      })),
    );
  }
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/44625.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【深度学习】【Image Inpainting】Free-Form Image Inpainting with Gated Convolution

模型&#xff1a;DeepFillv2 (CVPR’2019) 论文&#xff1a;https://arxiv.org/abs/1806.03589 代码&#xff1a;https://github.com/JiahuiYu/generative_inpainting 文章目录 效果AbstractIntroductionRelated WorkAutomatic Image InpaintingGuided Image Inpainting and Sy…

第1章 获取数据库中的数据

CoreShop源程序是以数据库优先进行定义的&#xff0c;所以其本身不包含代码优先的定义&#xff0c;但本从更习惯于代码优先&#xff0c;所以为其定义了代码优先的定义。 1 CoreCms.Net.Model.Entities.SysRole using SqlSugar; using System.ComponentModel.DataAnnotations…

三十章:Segmenter:Transformer for Semantic Segmentation ——分割器:用于语义分割的Transformer

0.摘要 图像分割在单个图像块的级别上经常存在歧义&#xff0c;并需要上下文信息来达到标签一致性。在本文中&#xff0c;我们介绍了一种用于语义分割的Transformer模型- Segmenter。与基于卷积的方法相比&#xff0c;我们的方法允许在第一层和整个网络中对全局上下文进行建模。…

《PyTorch深度学习实践》

文章目录 1.线性模型2.梯度下降算法3.反向传播3.1原理3.2Tensor in PyTorch 4.用PyTorch实现线性模型 1.线性模型 2.梯度下降算法 # 梯度下降x_data [1.0,2.0,3.0] y_data [2.0,4.0,6.0]w 3.0def forward(x):return x*w# 损失函数 def cost(xs,ys):cost 0for x,y in zip(x…

基于 Flink SQL CDC 数据处理的终极武器

文章目录 一、传统的数据同步方案与 Flink SQL CDC 解决方案1.1 Flink SQL CDC 数据同步与原理解析1.2 基于日志的 CDC 方案介绍1.3 选择 Flink 作为 ETL 工具 二、 基于 Flink SQL CDC 的数据同步方案实践2.1 CDC Streaming ETL2.2 Flink-CDC实践之mysql案例 来源互联网多篇文…

华为OD机试真题 Java 实现【文件目录大小】【2023 B卷 100分】,附详细解题思路

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明4、再输入5、再输出6、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题…

spring-cloud-alibaba——nacos-server搭建

前言&#xff1a;组件版本关系&#xff0c;官方:组件版本关系 1,nacos-server搭建&#xff08;windows环境&#xff09;&#xff0c;下载地址nacos 选择对应的版本&#xff0c;这里以目前最新版2.2.3为例子,下载后解压 单机模式 修改\nacos-server-2.2.3\nacos\bin\startup.c…

分布式调用与高并发处理 Nginx

一、初识Nginx 1.1 Nginx概述 Nginx是一款轻量级的Web服务器、反向代理服务器&#xff0c;由于它的内存占用少&#xff0c;启动极快&#xff0c;高并发能力强&#xff0c;在互联网项目中广泛应用。Nginx 专为性能优化而开发&#xff0c;使用异步非阻塞事件驱动模型。 常见服务…

(2)前端控制器的扩展配置, 视图解析器类型以及MVC执行流程的概述

SpringMVC入门程序的扩展说明 注册前端控制器的细节 在web.xml文件注册SpringMVC的前端控制器DispatcherServlet时使用url-pattern标签中使用/和/*的区别 /可以匹配.html或.js或.css等方式的请求路径,但不匹配*.jsp的请求路径/*可以匹配所有请求(包括.jsp请求), 例如在过滤器…

【Linux Shell】基础知识

Linux Shell基础知识 一、Linux Shell基础概念1.1 Shell定义1.2 命令行提示符 二、初识Shell2.1 Shell定义2.2 登录Shell相关文件2.3 Shell中的变量变量类型变量的引用单引号\ 与双引号\" \"变量的删除与检查 2.4 Shell中的扩展大括号扩展{ }其他扩展 一、Linux Shel…

使用springboot进行后端开发100问

properties和yaml文件怎么互转 安装插件 properties文件和yaml文件区别 properties 文件通过“.”和“”赋值&#xff0c;值前不加空格&#xff0c;yaml通过“:”赋值&#xff0c;值前面加一个空格&#xff1b;yaml文件缩进用空格&#xff1b; properties只支持键值对&#x…

flash attention 2论文学习

flash attention作者Tri Dao发布了flash attention 2&#xff0c;性能为flash attention的2倍。 优化点主要如下&#xff1a; 一、减少 non-matmul FLOPs A00中由于tensor core的存在&#xff0c;使得gpu对于浮点矩阵运算吞吐很高&#xff0c;如FP16/BF16可以达到312 TFLOPs/…

LINUX中的myaql(一)安装

目录 前言 一、概述 二、数据库类型 三、数据库模型 四、MYSQL的安装 &#xff08;一&#xff09;yum安装MYSQL &#xff08;二&#xff09;rpm安装MYSQL 五、MYSQL本地登录 rpm安装MYSQL本地登录 六、重置密码 总结 前言 MySQL是一种常用的开源关系型数据库管理系统&#xff…

蛋白质分子结构设计

paper read 1 Created by: 银晗 张 Created time: May 27, 2023 3:47 PM Tags: Product 补充了解蛋白质的生物学知识学习一下Diffusion的原理 &#x1f4a1; Method & Innovations Framework Summary: first deep learning models to perform antibody sequence-stru…

banner轮播图实现、激活状态显示和分类列表渲染、解决路由缓存问题、使用逻辑函数拆分业务(一级分类)【Vue3】

一级分类 - banner轮播图实现 分类轮播图实现 分类轮播图和首页轮播图的区别只有一个&#xff0c;接口参数不同&#xff0c;其余逻辑完成一致 适配接口 export function getBannerAPI (params {}) {// 默认为1 商品为2const { distributionSite 1 } paramsreturn httpIn…

pearcmd.php文件包含妙用

文章目录 pearcmd.php文件包含妙用利用条件原理利用config-createinstalldownload pearcmd关键词被ban参考 pearcmd.php文件包含妙用 利用条件 php.ini中register_argc_argvOn开启安装pecl/pear pecl是PHP中用于管理扩展而使用的命令行工具&#xff0c;而pear是pecl依赖的类…

从新手到专业人士:探索 C++ STL 以获得终极性能

探索 C STL 以获得终极性能 博主简介一、引言二、C STL 简介2.1、STL 是什么&#xff1f;2.2、STL 中的常用组件2.3、STL 的优点 三、入门指南&#xff1a;了解基本概念和用法3.1、容器&#xff1a;vector、list、deque、set、map 等3.2、算法&#xff1a;查找、排序、遍历等3.…

Javascript程序异常处理

什么是异常&#xff0c;异常就是我们在编写Javascript程序时出现的一些错误&#xff0c;并会在控制台中抛出这个错误&#xff0c;出现异常其实并不是一件坏事&#xff0c;相对的呢它可以提醒我们开发人员哪里出现了错误&#xff0c;方便我们后续的修改&#xff0c;能让我们的代…

OSI 和 TCP/IP 网络分层模型详解(基础)

OSI模型: 即开放式通信系统互联参考模型&#xff08;Open System Interconnection Reference Model&#xff09;&#xff0c;是国际标准化组织&#xff08;ISO&#xff09;提出的一个试图使各种计算机在世界范围内互连为网络的标准框架&#xff0c;简称OSI。 OSI 七层模型 OS…

centos逻辑分区磁盘扩展

最近碰到服务器磁盘空间不足&#xff0c;需要扩展逻辑分区的需求&#xff0c;特地做下小笔记&#xff0c;方便后续自己回忆。下图是磁盘的相关概念示意图&#xff1a; 1、查看磁盘空间 [rootlocalhost ~]# df -h #查看磁盘空间&#xff0c;根分区的大小是18G&#xff0c;已经用…