【Flutter 专题】37 Animation 基本动画 (一)

阿策小和尚

发布于 2019-08-12 16:26:07

9240

发布于 2019-08-12 16:26:07

文章被收录于专栏：阿策小和尚阿策小和尚

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

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)));
  }
}

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-03-15，如有侵权请联系 cloudcommunity@tencent.com 删除

css