动画运行的原理

任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称“后像”,视觉的这一现象则被称为“视觉暂留”。

电影就是依靠视觉暂留,在感官上电影是连续的。使动画有流畅的感觉,帧率至少要达到24帧,即:每秒播放24个图像,因此动画有一个非常关键的性能参数FPS(Frame Per Second),即帧率,达到24fps,画面就比较流畅了,Flutter的FPS理论上可以达到60fps,超过48fps,将会感到丝滑般的顺畅。

Flutter动画系统

为了方便开发者进行动画的开发,Flutter将动画系统进行封装,抽象出4个概念:Animation、Curve、AnimationController、Tween。

  • Animation:Flutter动画中的核心类,此类是抽象类,通常情况下使用其子类:AnimationController,可以获取当前动画的状态和值,也可以添加其状态变化监听和值变化监听。
  • Curve:决定动画执行的曲线,和Android中的Interpolator(差值器)是一样的,负责控制动画变化的速率,系统已经封装了10多种动画曲线,详见Curves类。
  • AnimationController:动画控制器,控制动画的开始、停止。继承自Animation。
  • Tween:映射生成不同范围的值,AnimationController的动画值是double类型的,如果需要颜色的变化,Tween可以完成此工作。

将Container控件的大小由100变为300,代码如下:

class AnimationDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _AnimationDemo();
} class _AnimationDemo extends State<AnimationDemo>
with SingleTickerProviderStateMixin {
AnimationController _animationController; @override
void initState() {
_animationController = AnimationController(
duration: Duration(seconds: 2),
lowerBound: 100.0,
upperBound: 300.0,
vsync: this); _animationController.addListener(() {
setState(() {});
}); super.initState();
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
RaisedButton(
child: Text('开始动画'),
onPressed: () {
_animationController.forward();
},
),
Expanded(
child: Center(
child: Container(
width: _animationController.value,
height: _animationController.value,
color: Colors.red,
),
),
),
],
),
);
} @override
void dispose() {
_animationController.dispose();
super.dispose();
}
}

AnimationController的初始化中vsync,这个参数要说明白能说一天,我们只需先记住其写法,this表示SingleTickerProviderStateMixin,屏幕每一帧都会引起AnimationController值的变化。

dispose方法中要记住释放AnimationController

UI的更新是通过setState更新的,

_animationController.addListener(() {
setState(() {});
});

效果如下:

默认情况下,动画曲线为线性,修改动画曲线如下:

class _AnimationDemo extends State<AnimationDemo>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _animation;
@override
void initState() {
_animationController = AnimationController(
duration: Duration(seconds: 2),
vsync: this); _animationController.addListener(() {
setState(() {});
}); _animation = CurvedAnimation(parent: _animationController,curve: Curves.easeIn);
_animation = Tween(begin: 100.0,end: 300.0).animate(_animation);
super.initState();
} @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
RaisedButton(
child: Text('开始动画'),
onPressed: () {
_animationController.forward();
},
),
Expanded(
child: Center(
child: Container(
width: _animation.value,
height: _animation.value,
color: Colors.red,
),
),
),
],
),
);
} @override
void dispose() {
_animationController.dispose();
super.dispose();
}
}

修改的地方说明如下:

  • AnimationController中lowerBoundupperBound不能在直接设置为100和300,因为AnimationController需要被CurvedAnimation使用,值的范围必须是0-1。
  • 由于AnimationController值的范围是0-1,而动画需要在100-300变化,所以引入Tween。

如果动画是颜色的变化,修改如下:

_animation = ColorTween(begin: Colors.red,end: Colors.blue).animate(_animation);

对动画状态监听:

_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
_animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
_animationController.forward();
}
});

动画状态:

  • dismissed:动画结束,停在开始处。
  • forward:动画正向进行。
  • reverse:动画反向进行。
  • completed:动画结束,停在末尾处。

上面就是动画的基本用法,有没有发现一些通用的地方:

  • 每次刷新UI都需要调用setState

“懒”是原罪,也是社会进步的最大动力。

Flutter封装了AnimatedWidget,此控件就封装了setState。虽然Flutter为封装了大量的动画控件,但万变不离其宗。

Flutter 25种动画组件介绍

Flutter中提供了大量的动画组件及详细用法:

其实动画不仅仅是这些控件属性变化,还有使用Paint自绘制的动画。

看到这么多组件是不是晕了,我也没想到会有这么多组件,那我们改如何选择适合的组件?这真是一个灵魂拷问啊。

这是《Flutter 动画系列》的第一篇,接下来还有:

  • 组合动画
  • 自定义动画
  • 到底如何选择动画控件

交流

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。

同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。

Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

《Flutter 动画系列一》25种动画组件超全总结的更多相关文章

  1. 《Flutter 动画系列》组合动画

    老孟导读:在前面的文章中介绍了 <Flutter 动画系列>25种动画组件超全总结 http://laomengit.com/flutter/module/animated_1/ < ...

  2. 【Flutter 实战】17篇动画系列文章带你走进自定义动画

    老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...

  3. 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  4. javascript动画系列第一篇——模拟拖拽

    × 目录 [1]原理介绍 [2]代码实现 [3]代码优化[4]拖拽冲突[5]IE兼容 前面的话 从本文开始,介绍javascript动画系列.javascript本身是具有原生拖放功能的,但是由于兼容 ...

  5. 【原】iOSCoreAnimation动画系列教程(二):CAKeyFrameAnimation【包会】

    在上一篇专题文章[原]iOSCoreAnimation动画系列教程(一):CABasicAnimation[包会]中我们学习了iOS核心动画CoreAnimation中CABasicAnimation ...

  6. Android 三种动画详解

    [工匠若水 http://blog.csdn.net/yanbober 转载请注明出处.点我开始Android技术交流] 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让 ...

  7. Android开发之三种动画

    转载:http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html http://www.lightskystreet.com/2 ...

  8. Vue.js 系列教程 5:动画

    原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没有详细的校对,其中仍然有很多不易理解的地 ...

  9. Flutter路由的跳转、动画与传参(最简单)

    跳转 命名路由 在文件构建时先设置路由参数: new MaterialApp( // 代码 routes: { "secondPage":(BuildContext context ...

随机推荐

  1. java反序列化-ysoserial-调试分析总结篇(3)

    前言: 这篇文章主要分析commoncollections3,这条利用链如yso描述,这个与cc1类似,只是反射调用方法是用的不是invokeTransformer而用的是InstantiateTra ...

  2. optparse(命令行参数解析工具)

    在用Python做自动化的时候,命令行的解析一定是少不了的,有很多命令行解析工具库,其中Python内建的一个库optparse,还是比较好用的 1.贴代码并注释 # coding=UTF-8 fro ...

  3. idea通过maven打jar包不成功或无法加载主类或打成功也找不到jar包

    这个问题纠结了我一天,在网上也搜了一些方法,现在把我自己的处理过程记录一下,以方便遇到此类问题的小伙伴参考: 第一步:查看idea的jdk版本与Windows安装的jdk是不是同一个版本,如下图 第二 ...

  4. Java enum枚举在实际项目中的常用方法

    在项目实际开发过程中,经常会遇到对某些固定的值.字典项的定义的需求,很多项目经常使用常量来定义,其实在jdk1.5就已经引入了枚举,使用枚举可以更好的解决这类需求,本文主要记录枚举的优势以及经常在项目 ...

  5. Python入门的三大问题和三大谎言

    Python广告,铺天盖地,小白们雾里看花,Python无限美好.作为会20几种语言(BASIC Foxbase/pro VB VC C C++ c# js typescript HTML Ardui ...

  6. .Net Core 依赖注入手记

    .Net Core自身提供了一套简单的DI框架,能满足我们DI基本的需求.它依赖以下组件,需要从Nuget包下拉取. Microsoft.Extensions.DependencyInjection. ...

  7. 2653 区间xor

    前言 这个题目在我之前那篇c++位运算的的随笔中提到过. 有兴趣的话去看看吧! 飞机场:https://www.cnblogs.com/laoguantongxiegogofs/p/12444517. ...

  8. vue的watch

    watch它可以用来监测Vue实例上的数据变动  尽量一张图解释清楚(尝试用圈圈区分关系): 写的很简单,watch本来就没啥东西我理解为响应式侦听全局变量 watch里绑定全局变量,被绑定全局变量发 ...

  9. Netty源码分析之ChannelPipeline—出站事件的传播

    上篇文章中我们梳理了ChannelPipeline中入站事件的传播,这篇文章中我们看下出站事件的传播,也就是ChannelOutboundHandler接口的实现. 1.出站事件的传播示例 我们对上篇 ...

  10. php7连接mysql8

    最近因为剁手买了mac所以在mac上搭建lnmp环境. 刚好看到mysql从5.7跳到8,性能据说快上一倍,果断尝鲜! lnmp基本都弄好了,但是到用php连接Mysql这一步出了岔子. 出错原因: ...