Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

22 | 如何构造炫酷的动画效果?

陈航 2019-08-17
你好,我是陈航。
在上一篇文章中,我带你一起学习了 Flutter 中实现页面路由的两种方式:基本路由与命名路由,即手动创建页面进行切换,和通过前置路由注册后提供标识符进行跳转。除此之外,Flutter 还在这两种路由方式的基础上,支持页面打开和页面关闭传递参数,可以更精确地控制路由切换。
通过前面第12131415篇文章的学习,我们已经掌握了开发一款样式精美的小型 App 的基本技能。但当下,用户对于终端页面的要求已经不再满足于只能实现产品功能,除了样式美观之外,还希望交互良好、有趣、自然。
动画就是提升用户体验的一个重要方式,一个恰当的组件动画或者页面切换动画,不仅能够缓解用户因为等待而带来的情绪问题,还会增加好感。Flutter 既然完全接管了渲染层,除了静态的页面布局之外,对组件动画的支持自然也不在话下。
因此在今天的这篇文章中,我会向你介绍 Flutter 中动画的实现方法,看看如何让我们的页面动起来。

Animation、AnimationController 与 Listener

动画就是动起来的画面,是静态的画面根据事先定义好的规律,在一定时间内不断微调,产生变化效果。而动画实现由静止到动态,主要是靠人眼的视觉残留效应。所以,对动画系统而言,为了实现动画,它需要做三件事儿:
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(8)

  • 许童童
    1.第一个child会被用于参数传入builder函数,可以将动画与组件渲染代码解耦。
    2.可以正常执行,问题就是初始状态就要跟随动画。

    作者回复: 赞

    2019-08-17
    2
    4
  • 和小胖
    关于作业题,找到了源代码注释,哈哈哈。

    /// If the pre-built subtree is passed as the [child] parameter, the
    /// [AnimatedBuilder] will pass it back to the [builder] function so that it
    /// can be incorporated into the build.
    ///
    /// Using this pre-built child is entirely optional, but can improve
    /// performance significantly in some cases and is therefore a good practice.
    /// can be incorporated into the build.
    ///
    /// Using this pre-built child is entirely optional, but can improve
    /// performance significantly in some cases and is therefore a good practice.

    作者回复: 赞

    2019-09-25
    2
  • 亡命之徒
    老师有没有遇到这个问题,Widget myFormWidget(BuildContext context){在这里吗创建一个form组件}
    ,class BodyWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            // textFieldWidget(context),
            myFormWidget(context),
          ],
        );
      }
    然后通过这种方式调用,键盘刚获取焦点立马就是去焦点了,无法输入,这是什么原因

    作者回复: 1.文本输入需要用StatefulWidget
    2.文本输入控制使用TextEditingController

    2019-08-19
    1
  • 黄明星~~
    用AnimatedWidget的方式,如果要传入多个Animation对象,listenable应该如何取呢?

    作者回复: 如果Animation是相同的,再包一层就可以了呀;如果Animation不同,那就分别做好了,跟普通widget没啥区别

    2019-10-14
  • 和小胖
    在写代码时候需要注意得地方,controller.repeat(reverse: true) 让动画重复执行的一定要写在动画开始 controller.forward() 之后,否则应该会不生效,这是我遇到的情况。

    作者回复: repeat和forward只需要一个就可以了,不用两个都写

    2019-09-25
  • 高超
    AnimatedBulder 其实就是封装了下 AnimatedWdiget,在 AnimatedBulder 内部调用了 builder 函数,构建 widget 样式

    这样的好处就是给真实要渲染的widget上加了一层 Container,所有的动画都是在那个 Container 上完成。

    回答问题:
    1. 为了渲染和动画分离
    2. 可以的就是渲染和动画又揉一起了

    作者回复: 赞

    2019-09-04
  • 宋世通
    看了下关于child的注释,感觉1,2是一个问题
    1 child是可选的,作为builder的参数给开发者使用,在某些情况下可以提高性能,因此最好要传入child
    2 通过child和builder的方式,动画时不必每次重新构建 child,这样限定了重建rebuild的范围,在builder中的widget才会重建,这可能是提高性能的一部分原因
    3 如果builder返回的子树不依赖动画,更好的方式是build构建一次,也就是将子树作为child传入

    作者回复: 赞

    2019-09-04
    1
  • ptlCoder
    删除了就跟AnimatedWidget没有什么区别了 达不到渲染和动画隔离

    作者回复: 赞

    2019-08-28
收起评论
8
返回
顶部