【Flutter 专题】36 图解 Flutter 基本动画 (一)

阿策小和尚

关注

发布于: 刚刚

小菜一直对动画不太熟悉，最近学习了一些关于动画的皮毛知识，网上资料很多，小菜按自己的理解整理一下。

Animation

Animation 可以生成动画过程中的值，生成的值并非单一的 double 也可以是 Size/Color 等；Animation 可以获取状态但无法获取屏幕显示内容。

AnimationController

AnimationController 小菜理解为 Animation 控制器，实际也是一个特殊的 Animation，在屏幕刷新时会生成一个新的值；使用时需要传递 vsync 值，用来防止屏幕外动画，vsync 值可以继承 TickerProviderStateMixin，若当前页面只有一个 controller 也可以用 SingleTickerProviderStateMixin；

AnimationController 有两个常用方法：

forward() 方法用来开始动画，即从无到有；
reverse() 方法用来反向开始动画，即从有到无；

动画分类

Flutter 提供了两种动画，分别是 Tween Animation 补间动画和 Physics-based Animation 基于物理动画；小菜理解为线性匀速动画和非线性动画；

TweenAnimation

Tween 动画是无状态的，只是在固定时间内均匀生成 begin 和 end 的值，通过 animation.value 来获取；

AnimationController controller = AnimationController(duration: const Duration(milliseconds: 300), vsync: this);Animation<double> animation = Tween(begin: 0.0, end: 1.0).animate(controller);animation.addListener(() {    setState(() {});});

复制代码

CurvedAnimation

CurvedAnimation 的动画过程是非线性的，curve 种类很多，比较符合日常生活的物理过程，例如先快后慢或先增长到一个峰值再降低等；curve 的动画过程也可以自定义函数等；

AnimationController controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);

复制代码

无论是线性动画还是非线性动画，均可获取动画过程中的值，根据这个值可以灵活的使用在需要的场景；使用动画场景较多的是透明度/旋转/缩放/平移等。

AnimatedWidget

Flutter 很贴心的提供了自带动画属性的 Widget 极大的方便我们使用简单的动画，涵盖透明度/旋转/缩放/平移等常用的动画属性，使用时非常方便；但是缺点也相对明显，这些 Widget 属性相对专一，若需要多种动画属性不太适合；

简单介绍几个小菜日常使用的动画组件；

XXXTransition

FadeTransition 显隐性

FadeTransition(opacity: animation, child: FlutterLogo(size: 100.0))

复制代码

ScaleTransition 缩放

ScaleTransition(scale: animation, child: FlutterLogo(size: 100.0))

复制代码

RotationTransition 旋转

RotationTransition(turns: animation, child: FlutterLogo(size: 100.0))

复制代码

Transform. XXX

Transform.scale 缩放

Transform.scale(scale: curve.value, child: FlutterLogo(size: 100.0))

复制代码

Transform.rotate 旋转

Transform.rotate(angle: curve.value * pi, child: FlutterLogo(size: 100.0))

复制代码

Transform.translate 平移

Transform.translate(offset: Offset(100.0 * curve.value, 0.0), child: FlutterLogo(size: 100.0))

复制代码

AnimatedXXX

AnimatedOpacity 透明度

AnimatedOpacity(opacity: animation.value, duration: Duration(milliseconds: 2000), child: FlutterLogo(size: 100.0))

复制代码

核心代码：

class _AnimationPageState extends State<AnimationPage03> with TickerProviderStateMixin {  AnimationController controller;  Animation<double> animation;  CurvedAnimation curve;  bool isForward = false;
  @override  void initState() {    super.initState();    controller = AnimationController(        duration: const Duration(milliseconds: 2000), vsync: this);    curve = CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn);    animation = Tween(begin: 0.0, end: 1.0).animate(controller);    animation.addListener(() {      setState(() {});    });  }
  @override  Widget build(BuildContext context) {    return new Scaffold(        appBar: AppBar(          title: Text('Animation Demo'),        ),        body: Stack(children: <Widget>[          ListView(children: <Widget>[            Padding(                padding: EdgeInsets.all(5.0),                child: Row(children: <Widget>[                  Expanded(                      flex: 1, child: Center(child: Text('FadeTransition'))),                  Expanded(                      flex: 1, child: Center(child: Text('ScaleTransition')))                ])),            Row(children: <Widget>[              Expanded(                  flex: 1,                  child: FadeTransition(                      opacity: animation, child: FlutterLogo(size: 100.0))),              Expanded(                  flex: 1,                  child: ScaleTransition(                      scale: animation, child: FlutterLogo(size: 100.0)))            ]),            Padding(                padding: EdgeInsets.all(5.0),                child: Row(children: <Widget>[                  Expanded(                      flex: 1,                      child: Center(child: Text('RotationTransition'))),                  Expanded(                      flex: 1, child: Center(child: Text('AnimatedOpacity')))                ])),            Row(children: <Widget>[              Expanded(                  flex: 1,                  child: RotationTransition(                      turns: animation, child: FlutterLogo(size: 100.0))),              Expanded(                  flex: 1,                  child: AnimatedOpacity(                      opacity: animation.value,                      duration: Duration(milliseconds: 2000),                      child: FlutterLogo(size: 100.0)))            ]),            Padding(                padding: EdgeInsets.all(5.0),                child: Row(children: <Widget>[                  Expanded(                      flex: 1,                      child: Center(child: Text('Transform.translate'))),                  Expanded(                      flex: 1, child: Center(child: Text('Transform.rotate')))                ])),            Row(children: <Widget>[              Expanded(                  flex: 1,                  child: Transform.translate(                      offset: Offset(100.0 * curve.value, 0.0),                      child: FlutterLogo(size: 100.0))),              Expanded(                  flex: 1,                  child: Transform.rotate(                      angle: curve.value * pi, child: FlutterLogo(size: 100.0)))            ]),            Padding(                padding: EdgeInsets.all(5.0),                child: Row(children: <Widget>[                  Expanded(                      flex: 1, child: Center(child: Text('Transform.scale'))),                  Expanded(flex: 1, child: Center(child: Text('Position')))                ])),            Row(children: <Widget>[              Expanded(                  flex: 1,                  child: Transform.scale(                      scale: curve.value, child: FlutterLogo(size: 100.0))),            ])          ]),          posWid()        ]),        floatingActionButton: new FloatingActionButton(            tooltip: 'Animation',            child: new Icon(Icons.lightbulb_outline),            onPressed: () {              isForward ? controller.reverse() : controller.forward();              isForward = !isForward;            }));  }
  Widget posWid() {    return Positioned(        bottom: 16 + 314 * animation.value,        right: 16 + 84 * animation.value,        child: Container(child: FlutterLogo(size: 100.0)));  }}

复制代码

小菜对动画的研究不深，仅整理一些基本的动画方法，如有不对的地方希望多多指导！

来源：阿策小和尚

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/0aeb5f9e3415360762971e790】。文章转载请联系作者。

阿策小和尚

关注

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟～

发布

暂无评论

创作场景

【Flutter 专题】36 图解 Flutter 基本动画 (一)

Animation

AnimationController

动画分类

TweenAnimation

CurvedAnimation

AnimatedWidget

XXXTransition

FadeTransition 显隐性

ScaleTransition 缩放

RotationTransition 旋转

Transform. XXX

Transform.scale 缩放

Transform.rotate 旋转

Transform.translate 平移

AnimatedXXX

AnimatedOpacity 透明度

阿策小和尚

评论