老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念、系统动画组件、8篇自定义动画案例,共17篇。

动画核心概念

在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义动画,首先要理解 Flutter 动画实现的基本原理及相关概念。

第1-4篇介绍了 Flutter 动画中最重要的三个概念以及三者之间的关系:

  • AnimationController:动画控制器,控制动画的播放、停止等。继承自Animation< double >,是一个特殊的Animation对象,默认情况下它会线性的生成一个0.0到1.0的值,类型只能是 double 类型,不设置动画曲线的情况下,可以设置输出的最小值和最大值。
  • Curve:动画曲线,作用和Android中的Interpolator(差值器)类似,负责控制动画变化的速率,通俗地讲就是使动画的效果能够以匀速、加速、减速、抛物线等各种速率变化。
  • Tween:将 AnimationController 生成的 [0,1]值映射成其他属性的值,比如颜色、样式等。

第5篇讲解了动画序列 TweenSequence,其将多个 Tween 或者 Curve 关联到一个 AnimationController 中。

文章链接:

  • 动画核心-AnimationController:http://laomengit.com/guide/animation/AnimationController.html
  • 动画核心-Tween:http://laomengit.com/guide/animation/Tween.html
  • 动画核心-Curve:http://laomengit.com/guide/animation/Curve.html
  • 动画核心-总结:http://laomengit.com/guide/animation/AnimationSummary.html
  • 动画序列 TweenSequence: http://laomengit.com/guide/animation/TweenSequence.html

系统动画组件

第6篇介绍了20多种系统动画组件的用法以及如何选取使用哪一种组件,乍一看20多种系统动画组件非常多,但其仅分为隐式动画组件显式动画组件 两种,用法基本一样。文章地址:http://laomengit.com/guide/animation/AnimatedWidget.html

第7篇讲解 AnimatedList 列表增/删动画组件:http://laomengit.com/guide/animation/AnimatedList.html

第8篇讲解 Hero 共享动画组件:http://laomengit.com/guide/animation/Hero.html

第9篇讲解 Material motion 动画,Material motion 是 Flutter 1.17 大会上 Flutter 团队发布的新的 Animations 软件包,该软件包提供了实现新的 Material motion 规范的预构建动画:http://laomengit.com/guide/animation/TranslationAnimations.html

自定义动画

第10篇案例-自定义路由动画:http://laomengit.com/guide/animation/NavigatorAnimation.html

第11篇案例-“孔雀开屏”的动画效果:http://laomengit.com/guide/animation/Peacock.html

第12篇案例-自定义渐变进度条:http://laomengit.com/guide/animation/CircleProgress.html

第13篇案例-自绘玫瑰:http://laomengit.com/guide/animation/Rose.html

第14篇案例-仿掘金点赞:http://laomengit.com/guide/animation/JuejinLike.html

第15篇案例-酷炫的3D效果:http://laomengit.com/guide/animation/3DPerspective.html

第16篇案例-涟漪效果:http://laomengit.com/guide/animation/WaterRipple.html

第17篇案例-雷达扫描效果:http://laomengit.com/guide/animation/Radar.html

结尾

很多人都觉得 Flutter 动画比较难,不好入门,很多读者也反馈如何才能自定义动画?下面是我对学习 Flutter 动画的一些方法:

  • 第一步:详细的阅读第1-5篇,也就是基础概念部分,当然对于初学者来说,阅读完后依然会迷茫,不理解,没关系,记住即可。
  • 第二步:使用系统动画组件完成一些简单的动画效果,照猫画虎,不要觉得使用系统组件没有用处,当你写完20多个系统动画组件的用法的时候,你一定对动画的认知有极大的提升。
  • 第三步:在回过头来,认认真真的阅读第1-5篇,相信我,你一定会有不一样的感觉。
  • 第四步:动画系列文章中有8篇为自定义动画案例,建议先根据动画效果独自完成,如果没有思路再参考文章。

个人觉得只有通过多写才能理解的更加深刻,纸上得来终觉浅,绝知此事要躬行

Flutter 动画系列已经全部完成,如果对你有所帮助,请不要吝惜你的转发

交流

老孟Flutter博客地址(330个控件用法):http://laomengit.com

欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

【Flutter 实战】17篇动画系列文章带你走进自定义动画相关推荐

  1. JavaScript:你是否对DOM还不够了解呢?一篇2w字文章带你走进DOM的世界

    文章目录 :sunny: 一.DOM 简介 :airplane: 1.1 什么是DOM: :airplane: 1.2 DOM树: :umbrella: 二.如何获取元素 :airplane: 2.1 ...

  2. K8S实战基础篇:一文带你深入了解K8S实战部署SpringBoot项目

    K8S实战基础篇:一文带你深入了解K8S实战部署SpringBoot项目 1.前言 2.简介 2.1.为什么写这篇文章 2.2.需求描述 2.3.需求分析 3. 部署实战 3.1 环境准备 3.2 i ...

  3. CSS3动画(2D,3D,自定义动画)

    文章目录 css3过渡动画 1 css3动画之2D 1.1 transition过渡动画基础 1.1.1 实现缓入缓出或快入快出效果 1.1.2 实现一秒内变换宽度 1.1.3 实现一秒后变换宽度 1 ...

  4. jQuery动画实现、each迭代器、自定义动画、json简介

    1. 案例_通过jQuery操作页面上的表格信息 1.1 实现表格 2. jQuery实现显示/隐藏动画效果 2.1 直接显示 2.2 直接隐藏 2.3 渐显 2.4 渐隐 2.5 向下渐显 2.6 ...

  5. 数据中台应用实战50篇(一)-带你概览BI、数据仓库、数据湖与数据中台之间有什么关联关系?(建议收藏)

    前言 数据中台最核心的是OneData体系.这个体系实质上是一个数据管理体系,包括全局数据仓库规划.数据规范定义.数据建模研发.数据连接萃取.数据运维监控.数据资产管理工具等.数据仓库是为企业所有级别 ...

  6. Excel PowerQuery系列文章之API 数据获取-自定义函数使用

    我们在上一篇文章中给大家展现了通过Excel 进行API数据的获取的方法,我们同时建立了自定义函数来实现我们的数据获取,如果单一从一个代码进行我们的基金净值获取,我们直接输入相应的代码就可以了,现在我 ...

  7. 【Flutter 实战】自定义动画-涟漪和雷达扫描

    老孟导读:此篇文章是 Flutter 动画系列文章第五篇,本文介绍2个自定义动画:涟漪和雷达扫描效果. 涟漪 实现涟漪动画效果如下: 此动画通过 CustomPainter 绘制配合 Animatio ...

  8. 设计模式一网打尽,40余篇文章带你领略设计模式之美

    文章末尾附带GitHub开源下载地址. 该文章的最新版本已迁移至个人博客[比特飞],单击链接 设计模式一网打尽,40余篇文章带你领略设计模式之美 | .Net中文网 访问. 设计模式概述 20世纪80 ...

  9. react-native系列(13)动画篇:Animated动画库和LayoutAnimation布局动画详解

    动画概念了解 流畅.有意义的动画对于APP户体验来说是非常重要的,用RN开发实现动画有三种方法: requestAnimationFrame:称为帧动画,原理是通过同步浏览器的刷新频率不断重新渲染界面 ...

最新文章

  1. 校园音乐点歌平台的设计与开发 微信小程序 点歌系统 java 开发
  2. Python使用matplotlib可视化发散型点图、发散型点图可以同时处理负值和正值、并按照大小排序区分数据、为发散型点图添加数值标签(Diverging Dot Plot )
  3. 刘宇凡:群生?群死?群P?
  4. 怎样解决样本不平衡问题
  5. python发明者叫什么-python是谁的
  6. MvcScaffold快速开发实例
  7. 开发中关于Fragment异常的两个问题
  8. python import
  9. mysql sum_MySQL中的SUM函数使用教程
  10. 教你如何将二进制文件导入到数据库
  11. Nginx 常见面试题
  12. Django-(分页器,中间介)
  13. sql怎么select中位数_怎么能避免写出慢SQL?
  14. 【开发工具】【Bus Hound】USB抓包工具(Bus Hound)的使用
  15. mysql repeat 游标_mysql循环结构 Repeat ... until循环中使用游标
  16. 【分享】Gitee如何下载单个文件
  17. SQL SERVER2000企业版安装过程-如何选择授权模式?
  18. CS231n Module2: CNN part1:Architecture
  19. 【NLP】(task8)Transformers完成抽取式问答+多选问答任务(更新ing)
  20. 就业双方合同、三方合同、用人单位类别、编制

热门文章

  1. 微信小程序 java社区疫情防控系统ssm小区来访人员登记系统php
  2. 主成分分析用于ERP研究的实用教程-机遇和挑战(附代码)
  3. 银行虚拟人技术应用领域及作用介绍
  4. 中国移动研究院测试开发面经(一面挂)
  5. HBase 列数据库 or 列簇数据库
  6. Qt中的消息通知和事件发送
  7. 计算机上如需设置共享文件时,Win10和Win7系统如何设置共享文件夹?
  8. 将无限循环小数转换成分数形式
  9. laya.html.dom,Laya Note
  10. 【常见问题】RangeError: Maximum call stack size exceeded