Flutter开发基础之动画专题

Flutter开发基础之动画专题

动画设计的作用是让UI界面更流畅、直观,能够有效的提升用户体验。
在Flutter开发中,动画分为多个方面:
基础动画、页面交互动画、绘图动画、矩阵变换等。
Flutter开发基础

基本动画

常用的基本动画有透明度动画、缩放动画、旋转动画、平移动画等。

  1. 透明度动画
    AnimatedOpacity可以实现基本的透明度变化动画,适用于简单的过渡场景。
    AnimatedOpacity(opacity: opacity,duration: duration,curve: curve,onEnd: onEnd,child: child,)

可以通过设置目标opacity,将child初始opacity修改为目标opacity
FadeTransition可以和AnimationController配合实现子Widget的透明度变换,绑定的AnimationController控制动画的开始与结束。

    FadeTransition(opacity: opacity,child: child,)

在这里对应的State需要绑定SingleTickerProviderStateMixin,如果有多个AnimationController需要绑定TickerProviderStateMixinSingleTickerProviderStateMixinTickerProviderStateMixin都实现于TickerProviderTickerProvider用来发送Ticker对象,Ticker对象的作用是获取每一帧刷新的通知;
Ticker受到SchedulerBinding的驱动,锁屏后会停止刷新,可以避免资源浪费。

  1. 缩放动画
    ScaleTransition可以和AnimationController配合构建缩放动画效果,此缩放是等比例的。
    ScaleTransition(scale: scale,alignment: alignment,child: child,filterQuality: filterQuality,)
  1. 旋转动画
    RotationTransition配合AnimationController实现旋转效果。
    RotationTransition(turns: turns,alignment: alignment,filterQuality: filterQuality,child: child,)
  1. 平移动画
    SlideTransition配合AnimationControllerAnimation<Offset>实现对子Widget的平移变换。
    SlideTransition(position: position,transformHitTests: transformHitTests,textDirection: textDirection,child: child,)

Widget还可以直接配合TweenAnimationController实现动画效果,这里的Tween就是AnimationTween有一下几种:

ColorTweenColor切换动画
DecorationTweenContainer的Decoration变化
BoxConstraintsTween针对ConstrainedBox使用
EdgeInsetsTween一般用于padding或margin变化
BorderTween边框变换动画
BorderRadiusTween边框圆角变换动画
Matrix4Tween矩阵变换动画
TextStyleTween文本样式过渡动画
TweenSequence串行动画,是动画序列的组合动画
ConstantTween常量值动画,一般与TweenSequence配合组合动画
SizeTweensize变换动画
RectTweenrect变换动画
StepTween与TweenAnimationBuilder配合使用,可显著提高动画效率

Widget动画还可以通过AnimatedWidget实现,AnimatedWidget会封装好setState状态更新,通过Listenable监听Widget动画;
AnimatedBuilder继承自AnimatedWidget,对AnimatedWidget做了优化。
AnimatedModalBarrier继承自AnimatedWidget,可以防止用户与身后的子Widget交互。
SpringSimulation可以和SpringDescription配合AnimationController实现阻尼效果。

页面交互动画

Flutter中可以通过Hero组件来组合不同路由页面的过渡元素,通过使用相同的tag绑定不同的Widget,确保不同的Widget完成过渡。

    Hero(tag: tag,createRectTween: createRectTween,flightShuttleBuilder: flightShuttleBuilder,placeholderBuilder: placeholderBuilder,transitionOnUserGestures: transitionOnUserGestures,child: child,)

若过渡效果不满意,可以配合PageRouteBuilder实现自定义Hero动画效果。
当需要对相邻或有关联的Widget进行切换过渡时可以使用AnimatedSwitcher实现。

    AnimatedSwitcher(duration: duration,reverseDuration: reverseDuration,switchInCurve: switchInCurve,switchOutCurve: switchOutCurve,transitionBuilder: transitionBuilder,layoutBuilder: layoutBuilder,child: child,)

绘图动画

绘图动画是Canvas结合Path绘制自定义图形,对于完整的Path可以通过PathMetric分解获得任一截数据,形成新的Path
在一定时间内逐步绘制一部分Path实现画线效果,我们可以同过自定义一个CustomPainter配合AnimationController实现动画效果。

    CustomPaint(painter: painter,foregroundPainter: foregroundPainter,size: size,isComplex: isComplex,willChange: willChange,child: child,)

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

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

相关文章

leetcode73 矩阵置零

题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用原地算法。 输入&#xff1a;matrix [[1,1,1],[1,0,1],[1,1,1]] 输出&#xff1a;[[1,0,1],[0,0,0],[1,0,1]] 输入&#xff1a;matrix [[0,1,2,0],[3,4…

基于机器学习预测岗位薪资

本文根据某招聘网站抓取的岗位信息&#xff0c;来预测该岗位平均薪资。 数据预处理 数据示例如下&#xff1a; 因为本文重点介绍如何实现预测&#xff0c;因此对于数据的预处理部分讲解一下处理逻辑&#xff1a; 1、统一薪资的单位&#xff0c;要么统一为年薪&#xff08;万/…

【员工培训体系的建立】使用培训积分制:量化培训效果

该公园希望通过定期培训来帮助员工获取有效信息和先进技术成果&#xff0c;不断提高员工的综合素质&#xff0c;适应新形势的需要&#xff0c;并且管理者逐步认识到&#xff0c;不应把现代公园的人员培训所产生人力资本的再生产视为一种消费&#xff0c;而应视为一种投资&#…

Android 四大组件启动

service: startService启动过程分析 - Gityuan博客 | 袁辉辉的技术博客 在整个startService过程&#xff0c;从进程角度看服务启动过程 Process A进程&#xff1a;是指调用startService命令所在的进程&#xff0c;也就是启动服务的发起端进程&#xff0c;比如点击桌面App图标…

3.Godot节点编辑操作及类的继承关系

1. 节点的父子关系 在层级树中&#xff0c;对象 (节点) 呈树形显示&#xff0c;一个节点下面&#xff0c;也可以下挂子节点 1 添加两个对象 2 拖拽一个对象到另一个对象&#xff0c;成为子对象 (子节点) 3 移动父对象、旋转父对象&#xff0c;观察可以发现&#xff0c;当父对…

【操作系统专题】计算机系统概述

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1.基本构成2.微处理器…

MYSQL原理学习篇简记(二)

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是小周同志&#xff0c;25届双非校招生Java选手&#xff0c;很高兴认识大家 &#x1f4d5;学习出处&#xff1a;本文是学自小林coding (xiaolincoding.com) 网站的MYSQL图解篇 &#x1f525;如果感觉博主的文章还不错的…

使用idea运行程序,发现控制台的中文出现乱码

修改UTF-8发现没有效果&#xff0c;寻找.idea文件夹的encodings.xml文件&#xff0c;将里面的UTF-8全部变成GBK.

数据结构——单链表(C语言版)

文章目录 一、链表的概念及结构二、单链表的实现SList.h链表的打印申请新的结点链表的尾插链表的头插链表的尾删链表的头删链表的查找在指定位置之前插入数据在指定位置之后插入数据删除pos结点删除pos之后的结点销毁链表 三、完整源代码SList.hSList.ctest.c 一、链表的概念及…

Ubuntu 22上安装Anaconda3。下载、安装、验证详细教程

在Ubuntu 22上安装Anaconda3&#xff0c;你可以遵循以下步骤&#xff1a; 更新系统存储库&#xff1a; 打开终端并运行以下命令来更新系统存储库&#xff1a; sudo apt update安装curl包&#xff1a; 下载Anaconda安装脚本通常需要使用curl工具。如果系统中没有安装curl&#x…

基于单链表实现通讯管理系统!(有完整源码!)

​ 个人主页&#xff1a;秋风起&#xff0c;再归来~ 文章专栏&#xff1a;C语言实战项目 个人格言&#xff1a;悟已往之不谏&#xff0c;知来者犹可追 克心守己&#xff0c;律己则安&#xff01; 1、前言 友友们&#xff0c;这篇文章是基于单链…

ARM单片机的GPIO口在控制不同LED、按键时的设置

个人备忘&#xff0c;不喜勿喷。 GPIO口在驱动共阴极、共阳极LED灯时需要不同的初始化设置 对于这一类的led灯&#xff1a; 最好选择推挽、上拉、高速输出&#xff0c;同时IO口初始化时需要拉高。 上面这种需要下拉输入&#xff1b; 上图这种需要上拉输入&#xff0c;这样才…