Flutter基建 - 12种隐式动画小组件全解析

本篇基于Flutter 3.16.4,Dart 3.2.3版本

Flutter 3.16.4 • channel stable • Framework • revision 2e9cb0aa71 (3 days ago) • 2023-12-11 14:35:13 -0700

Engine • revision 54a7145303

Tools • Dart 3.2.3 • DevTools 2.28.4

本篇为Flutter基建的第九篇文章,文章会围绕着ImplicitylyAnimatedWidget隐式动画组件来分析,通过代码+Gif的形式将12种常用的动画呈现出来,隐式动画使用起来并不是很难,但它在日常开发中可以帮助我们解决一些小而美的视角效果,下面一起进入文章的了解下吧~

image.png

简述

隐式动画的基类为ImplicitlyAnmatedWidget,它是一个抽象方法,上面12种动画组件都是继承自它,它的构造方法也是比较简单,只有四个参数,下面先来看下各个参数的作用。

const ImplicitlyAnimatedWidget({super.key,this.curve = Curves.linear,required this.duration,this.onEnd,
});
  • curve参数表示的是动画执行的过程方式,默认为线性方式;
  • duration参数表示的是动画执行的时长,此参数为必传参数;
  • onEnd参数表示的是动画结束的回调。

ImplicitlyAnmatedWidget构造方法中参数含义都是比较简单,基本上都是写一次就懂的~

AnimatedAlign

AnimatedAlign提供的对齐方式的动画效果,下面我们来实现文本从左边移到右边的动画效果。

const duration = Duration(seconds: 1);Alignment _alignment = Alignment.centerLeft;Widget buildAnimatedAlign() {return AnimatedAlign(alignment: _alignment,duration: duration,child: const Text("AnimatedAlign"),);
}

先构建一个AnimatedAlign组件,它的alignment参数传入的初始值为居中左对齐方式,时长为1s,然后子组件就是一个简单的文本组件。


@override
Widget build(BuildContext context) {return buildScaffold(context,ListView(children: [buildAnimatedAlign(),],),actionButton: FloatingActionButton(onPressed: () {setState(() {_alignment = _alignment == Alignment.centerLeft? Alignment.centerRight: Alignment.centerLeft;});},child: const Icon(Icons.favorite,),),);
}

最后在FloatingActionButton的点击事件中将_alignment进行变化,从左边变化为右边,反之从右边变化为左边,下面我们看下实现的效果:

AnimatedContainer

AnimatedContainer提供的动画效果比较多,在其内部属性变化的时候都会按照动画的效果变化,比如颜色值、大小、padding等改变时都会执行动画,下面我们以颜色来感受下。

Color _color = Colors.red;Widget buildAnimatedContainer() {return AnimatedContainer(duration: duration,color: _color,height: 100,);
}setState(() {_color = _color == Colors.red ? Colors.blue : Colors.red;
});

这里将AnimatedContainer的背景色设置默认为红色,然后点击按钮时以红色和蓝色切换,这时候背景色就会以线性的方式改变。

AnimatedDefaultTextStyle

AnimatedDefaultTextStyle提供的是当文本样式改变时执行的动画效果,这里我们以文本颜色值改变来感受下此动画。

TextStyle _textStyle = const TextStyle(color: Colors.red, fontSize: 20);Widget buildAnimatedTextStyle() {return AnimatedDefaultTextStyle(style: _textStyle,duration: duration,child: const Text('AnimatedDefaultTextStyle'),);
}setState(() {_textStyle = _textStyle.color == Colors.red? const TextStyle(color: Colors.blue, fontSize: 20): const TextStyle(color: Colors.red, fontSize: 20);
});

点击时让文本的颜色值以红色和蓝色切换,然后看文本呈现的变化效果。

AnimatedScale

AnimatedScale提供的是一种缩放动画,通过此动画组件缩放就不在是一瞬间的效果,而是以线性的方式逐渐变化大小。

double _scale = 1.0;Widget buildAnimatedScale() {return AnimatedScale(scale: _scale,duration: duration,child: Container(height: 100,color: Colors.red,),);
}setState(() {_scale = _scale == 1.0 ? 0.5 : 1.0;
})

AnimatedRotation

AnimtedRotation提供的是一种旋转动画,旋转一圈分为8份,没份表示旋转45度,下面来看看Text旋转效果

double _rotation = 0;
Widget buildAnimatedRotation() {return AnimatedRotation(turns: _rotation,duration: duration,child: Container(alignment: Alignment.center,child: const Text('AnimatedRotation'),),);
}setState(() {_rotation += 1.0 / 8.0;
})

AnimatedSlide

AnimatedSlide提供的是Offset的对象上的动画,当AnimatedSlide的Offset发生变化时,它会以指定的动画形式进行偏移,下面我们来实现每次点击按钮Y轴向下偏移1个单位。

Offset _offset = Offset.zero;
Widget buildAnimatedSlide() {return AnimatedSlide(offset: _offset,duration: duration,child: const FlutterLogo(size: 50,),);
}
setState(() {_offset = Offset(0, _offset.dy + 1);
})

AnimatedOpacity

AnimatedOpacity提供的是组件的透明度变化动画,当AnimatedOpacity透明度值变化时,子组件会按照指定的动画形式就行改变,下面我们来实现组件显示和隐藏之间的切换,看看具体的动画效果。

double _opacity = 1.0;
Widget buildAnimatedOpacity() {return AnimatedOpacity(opacity: _opacity,duration: duration,child: const FlutterLogo(size: 50,),);
}setState(() {_opacity = _opacity == 1 ? 0 : 1;
})

AnimatedPadding

AnimatedPadding提供的是当padding参数发生改变时,子组件的边距会以动画的形式逐渐改变,下面我们以Container每次增加10边距的效果直观感受下。

double _padding = 0.0;Widget buildAnimatedPadding() {return AnimatedPadding(padding: EdgeInsets.all(_padding),duration: duration,child: Container(height: 50,color: Colors.red,),);
}setState(() {_padding += 10.0;
})

AnimatedTheme

AnimatedTheme比较有趣,它可以提供当主题发生改变时,其子组件的各种样式都会随之以动画的形式变化,这里我们选择切换黑白主题时,改变Icon的颜色,这种可以很好的感受其动画的效果。

bool _isDark = false;Widget buildAnimatedTheme() {return AnimatedTheme(duration: duration,data: _isDark ? ThemeData.dark() : ThemeData.light(),child: const Icon(Icons.favorite,size: 50,),);
}setState(() {_isDark = !_isDark;
})

这里逻辑比较简单,这是在AnimatedTheme的data参数中判断当前是是否为黑色主题,然后根据判断赋值对应的ThemeData,当_isDark发生变化时,Icon的颜色也会随之而黑白切换。

AnimatedSize

AnimatedSize算是12种隐式动画组件中较为简单的一种了,它自身并没有可改变的参数,而是根据子组件的大小变化而产生动画效果,下面我们来实现Logo大小变化的动画效果。

double _size = 50;Widget buildAnimatedSize() {return AnimatedSize(duration: duration,child: FlutterLogo(size: _size,),);
}setState(() {_size = _size == 50 ? 100 : 50;
})

这样就完成了FlutterLogo在50和100之间的大小变化并且带有动画效果。

AnimatedSwitcher

AnimatedSwitcher是这里面比较复杂的一种,它提供的是新旧组件切换时一种动画效果,但是看它的参数中只有一个child参数,并没有第二个子组件的定义,其实新旧组件的切换是在transitionBuilder参数中进行定义,transitionBuilder用于定义新组件是如何进行出现,默认的是FadeTransition效果,其效果为淡入淡出,下面我们来看看实现的具体效果。

int _count = 0;Widget buildAnimatedSwitcher() {return AnimatedSwitcher(duration: duration,child: Text(key: ValueKey(_count),"$_count",style: const TextStyle(fontSize: 40),),);
}setState(() {++count;
})

这里我们看下Text中给key赋值了,使用ValueKey将_count值和key进行绑定,这样的作用是用于判断新旧组件是否变化,在默认的FadeTransition实现中会取child的key,这里千万别忘记给Text赋值key哦,不然动画就不会生效。

TweenAnimationBuilder

TweenAnimationBuilder被称之为补间动画,它会根据目标值的变化而随之执行动画,补间动画的自由度比较多,可以实现大小、颜色等等动画,如果上面11种不满足需求使用,可以使用TweenAnimationBuilder来定义自己想要的动画效果,下面我们还是以简单的例子来感受下补间动画的使用和效果。

double _tweenSize = 50;Widget buildTweenAnimated() {return TweenAnimationBuilder(tween: Tween<double>(begin: 100, end: _tweenSize),duration: duration,builder: (context, size, child) {return FlutterLogo(size: size,);},);
}setState(() {_tweenSize = _tweenSize == 50 ? 100 : 50;
})

这里tween参数需要提供一个Tween类型的对象,Tween构造方法中有begin和end两个参数,也就是说在进入界面的时候FlutterLogo就会从begin:100的大小动画至end:50,后续每次点击按钮FlutterLog的大小都会在100和50之间切换,下面来看下效果图是否如我们期望的一致。

写在最后

本篇文章主要介绍了Flutter中12种常用的隐式动画小组件,这12中动画都不是很复杂但是在日常使用中可能会给我们带来小而美的效果,在一些简单的效果中可以使用其帮助我们简化动画的实现,希望通过文章给阅读的小伙伴们带来一点帮助,后续会循序渐进逐步接触Flutter更多的知识。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

互联网上门洗衣洗鞋小程序优势有哪些?

互联网洗鞋店小程序相较于传统洗鞋方式&#xff0c;具有以下优势&#xff1b; 1. 便捷性&#xff1a;用户只需通过手机即可随时随地下单并查询&#xff0c;省去了许多不必要的时间和精力。学生们无需走出宿舍或校园&#xff0c;就能轻松预约洗鞋并取件。 2. 精准定位&#xff1…

TLC5615实现示波器波形显示——方波、三角波、锯齿波

代码&#xff1a; #include <reg52.h>sbit SCLK P2^0; // sbit&#xff1a;为寄存器的某位取名 sbit CS P2^1; sbit DIN P2^2;sbit key1 P1^0; sbit key2 P1^1; sbit key3 P1^2; sbit key4 P1^3;unsigned char rect; void delay(unsigned char i) {while(i--); }…

03|模型I/O:输入提示、调用模型、解析输出

03&#xff5c;模型I/O&#xff1a;输入提示、调用模型、解析输出 从这节课开始&#xff0c;我们将对 LangChain 中的六大核心组件一一进行详细的剖析。 模型&#xff0c;位于 LangChain 框架的最底层&#xff0c;它是基于语言模型构建的应用的核心元素&#xff0c;因为所谓 …

2016年第五届数学建模国际赛小美赛A题臭氧消耗预测解题全过程文档及程序

2016年第五届数学建模国际赛小美赛 A题 臭氧消耗预测 原题再现&#xff1a; 臭氧消耗包括自1970年代后期以来观察到的若干现象&#xff1a;地球平流层&#xff08;臭氧层&#xff09;臭氧总量稳步下降&#xff0c;以及地球极地附近平流层臭氧&#xff08;称为臭氧空洞&#x…

vscode中vue项目报错

当在vscode中写代码时&#xff0c;报错报错报错......... 已经头大&#xff0c;还没写就报错&#xff0c; 这是因为eslint对语法的要求太过严格导致的编译时&#xff0c;出现各种语法格式错误 我们打开vue.config.js&#xff0c;加上这句代码&#xff0c;就OK啦 lintOnSave:…

c++11--类型自动推导

1.自动类型推断 1.1.auto a.auto声明变量的类型必须由编译器在编译时期推导而得。 int main(){double foo();auto x 1;//x类型为intauto y foo();// y类型为doubleauto z;// errreturn 0; }b.auto声明得变量必须被初始化。 c.针对指针和引用 推导类型是指针类型时&#xff0…

C++内存管理和模板初阶

C/C内存分布 请看代码&#xff1a; int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)mallo…

Unity中Shader缩放矩阵

文章目录 前言一、直接相乘缩放1、在属性面板定义一个四维变量&#xff0c;用xyz分别控制在xyz轴上的缩放2、在常量缓存区申明该变量3、在顶点着色器对其进行相乘&#xff0c;来缩放变换4、我们来看看效果 二、使用矩阵乘法代替直接相乘缩放的原理1、我们按如下格式得到缩放矩阵…

Nessus详细安装-windows (保姆级教程)

Nessus描述 Nessus 是一款广泛使用的网络漏洞扫描工具。它由 Tenable Network Security 公司开发&#xff0c;旨在帮助组织评估其计算机系统和网络的安全性。 Nessus 可以执行自动化的漏洞扫描&#xff0c;通过扫描目标系统、识别和评估可能存在的安全漏洞和弱点。它可以检测…

5. 创建型模式 - 单例模式

亦称&#xff1a; 单件模式、Singleton 意图 单例模式是一种创建型设计模式&#xff0c; 让你能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。 问题 单例模式同时解决了两个问题&#xff0c; 所以违反了单一职责原则&#xff1a; 保证一个类只有一…

鸿蒙开发者工具安装及入门程序

下载工具DevEco Studio IDE 官网下载&#xff1a;HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 开发工具的安装 解压下载好的压缩包&#xff0c;一路无脑安装即可&#xff0c;安装完的使用方法类似于IDEA、WebStorm的使用&#xff0c;快捷键一致&#xff0c;默认黑…

day09

文章目录 一、jQuery简介1. 介绍2. 使用1&#xff09;引入2&#xff09;工厂函数 - $()3&#xff09;原生JS对象与jQuery对象4&#xff09;jQuery获取元素5&#xff09;操作元素内容6&#xff09;操作标签属性7&#xff09;操作标签样式8&#xff09;根据层级结构获取元素9&…

当下流行的直播技术demo演示

nginx-http-flv-module&#xff08;更新不是很频繁&#xff09; SRS: https://ossrs.net/lts/zh-cn/&#xff08;独立官网&#xff0c;目前最新稳定版version5&#xff09; 基于SRS搭建直播demo演示&#xff1a; 一、搭建流媒体服务器 参见官网&#xff1a;https://ossrs.ne…

2023.12.22 关于 Redis 数据类型 String 常用命令

目录 引言 String 类型基本概念 SET & GET SET 命令 GET 命令 MSET & MGET MSET 命令 MGET 命令 SETNX & SETEX & PSETEX SETNX 命令 SETEX 命令 PSETEX 命令 计数命令 INCR 命令 INCRBY 命令 DECR 命令 DECRBY 命令 INCRBYFLOAT 命令 总结…

docker笔记2-docker 容器

docker 容器的运行 docker run 镜像名&#xff1a;版本标签&#xff1a; 创建 启动容器 docker run 镜像名 &#xff0c;如果镜像不存在&#xff0c;则会在线下载镜像。 注意事项&#xff1a; 容器内的进程必须处于前台运行状态&#xff0c;不能后台&#xff08;守护进程运行…

iOS - 真机调试的新经验

文章目录 获取真机 UDIDPlease reconnect the device.iOS 开发者模式Fetching debug symbols 很久没有在真机运行 iOS 测试了&#xff0c;今天帮忙调试&#xff0c;发现很多东西都变了&#xff0c;有些东西也生疏了&#xff0c;在这里记录下。 获取真机 UDID 创建Profile 需要…

Spark编程实验三:Spark SQL编程

目录 一、目的与要求 二、实验内容 三、实验步骤 1、Spark SQL基本操作 2、编程实现将RDD转换为DataFrame 3、编程实现利用DataFrame读写MySQL的数据 四、结果分析与实验体会 一、目的与要求 1、通过实验掌握Spark SQL的基本编程方法&#xff1b; 2、熟悉RDD到DataFram…

【qt信号槽-5】信号槽相关注意事项记录

背景&#xff1a; 信号槽是qt很重要的概念&#xff0c;遇到问题帮助没少看。其中就有signals and slots这一章节&#xff0c;说得很到位。 概念琐碎&#xff0c;记录备忘。不对之处望指正。 【qt信号槽-1】槽函数重写问题&#xff0c;qt_metacall和qt_static_metacall-CSDN博…

百模大战中的AI行业:新趋势与未来发展

文章目录 每日一句正能量前言技术进步应用拓展行业变革人才竞争后记 每日一句正能量 人生最重要的价值是心灵的幸福&#xff0c;而不是任何身外之物。 前言 随着科技的迅猛发展&#xff0c;人工智能&#xff08;AI&#xff09;已经成为引领技术革命的重要驱动力之一。在当前的…

Jmeter、postman、python 三大主流技术如何操作数据库?

1、前言 只要是做测试工作的&#xff0c;必然会接触到数据库&#xff0c;数据库在工作中的主要应用场景包括但不限于以下&#xff1a; 功能测试中&#xff0c;涉及数据展示功能&#xff0c;需查库校验数据正确及完整性&#xff1b;例如商品搜索功能 自动化测试或性能测试中&a…