Flutter学习笔记(二)

Flutter动画(Animation)

Flutter中的动画有点类似于Android中的属性动画,通过产生一系列的值来不断改变控件的某个属性来产生动画的效果.

CurvedAnimation

CurvedAnimation 将动画过程定义为一个非线性曲线.

final CurvedAnimation curve =
    new CurvedAnimation(parent: controller, curve: Curves.easeIn);

也可以自定义自己的曲线:

class ShakeCurve extends Curve {
  @override
  double transform(double t) {
    return math.sin(t * math.PI * 2);
  }
}

AnimationController

AnimationController是一个特殊的Animation对象,随着屏幕刷新产生新的数值(0.0到1.0).
如下可以创建一个AnimationController

final AnimationController controller = new AnimationController(
    duration: const Duration(milliseconds: 2000), vsync: this);//vsync用来将动画与当前可见的控件绑定,以防止发生屏幕外动画浪费资源

AnimationController是动画的控制器.比如.forward()方法可以启动动画。动画刷新后会调用给动画设置的监听器.

Tween

AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型，则可以使用Tween来配置动画以生成不同的范围或数据类型的值。例如，以下示例，Tween生成从-200.0到0.0的值：

final Tween doubleTween = new Tween<double>(begin: -200.0, end: 0.0);

Tween的唯一职责就是定义从输入范围到输出范围的映射
Tween对象的使用方法,是调用它的animate()方法,传入一个控制器对象。

final AnimationController controller = new AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
Animation<int> alpha = new IntTween(begin: 0, end: 255).animate(controller);//begin和end用来指定产生数据的变化范围

动画通知

可以用addListener()和addStatusListener()来为动画添加监听器.当控件属性发生变化时,添加的监听器就会收到通知.

动画示例代码

请查看代码中的注释

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

class LogoApp extends StatefulWidget {
  _LogoAppState createState() => new _LogoAppState();
}

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = new AnimationController(//创建一个动画控制器,设置动画时长为两秒
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = new Tween(begin: 0.0, end: 300.0).animate(controller)//Tween对象产生[0.0,300.0]的数值
      ..addListener(() {//..是dart中的级联符号,用来调用前面方法的返回值(animation)的addListener()方法
        setState(() {//当动画刷新时重绘,即调用build方法
          // the state that has changed here is the animation object’s value
        });
      });
    controller.forward();
  }

  Widget build(BuildContext context) {
    return new Center(
      child: new Container(
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        height: animation.value,//根据animation的数值设置高度
        width: animation.value,//根据animation的数值设置宽度
        child: new FlutterLogo(),
      ),
    );
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

void main() {
  runApp(new LogoApp());
}

使用AnimatedWidget简化动画代码

从上面的代码可以看出来,动画是通过监听器监听到动画新数据产生时使用setState来手动将animation的新值设置到Container中的.使用AnimatedWidget不在需要手动设置了,只需要将animation对象传入AnimatedWidget,Container就能自动设置animation的新值了.具体参考如下代码:

// Demonstrate a simple animation with AnimatedWidget

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

class AnimatedLogo extends AnimatedWidget {
  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return new Center(
      child: new Container(
        margin: new EdgeInsets.symmetric(vertical: 10.0),
        height: animation.value,//当animation的值变化时此处会自动设置
        width: animation.value,
        child: new FlutterLogo(),
      ),
    );
  }
}

class LogoApp extends StatefulWidget {
  _LogoAppState createState() => new _LogoAppState();
}

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = new Tween(begin: 0.0, end: 300.0).animate(controller);//此处不再需要设置监听器也不必再调用setState()方法
    controller.forward();
  }

  Widget build(BuildContext context) {
    return new AnimatedLogo(animation: animation);//在创建的AnimatedWidget 对象中传入animation
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

void main() {
  runApp(new LogoApp());
}

监视动画的过程

可以只用addStatusListener()方法来对flutter动画的状态进行监听,比如前进倒退完成等.

class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = new Tween(begin: 0.0, end: 300.0).animate(controller)
      ..addStatusListener((state) => print("$state"));//调用Animation对象的addStatusListener方法,就可以获取到当前动画状态了
    controller.forward();
  }
  //...
}

用AnimatedBuilder重构

与AnimatedWidget类似，AnimatedBuilder自动监听来自Animation对象的通知，并根据需要将该控件树标记为脏(dirty)，因此不需要手动调用addListener()。
使用AnimatedBuilder的好处是将职责分离：

• 显示logo
• 定义Animation对象
• 渲染过渡效果

class LogoApp extends StatefulWidget {
  _LogoAppState createState() => new _LogoAppState();
}

class _LogoAppState extends State<LogoApp> with TickerProviderStateMixin {
  Animation animation;
  AnimationController controller;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);//创建一个动画控制器
    final CurvedAnimation curve =
        new CurvedAnimation(parent: controller, curve: Curves.easeIn);
    animation = new Tween(begin: 0.0, end: 300.0).animate(curve);//创建一个Tween动画
    controller.forward();//开始动画
  }

  Widget build(BuildContext context) {
    return new GrowTransition(child: new LogoWidget(), animation: animation);
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

void main() {
  runApp(new LogoApp());
}

并行动画

类似于android的AnimationSet,Flutter动画也可以使多个动画同时执行.

final AnimationController controller =
    new AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);//动画控制器
final Animation<double> sizeAnimation =
    new Tween(begin: 0.0, end: 300.0).animate(controller);//缩放动画
final Animation<double> opacityAnimation =
    new Tween(begin: 0.1, end: 1.0).animate(controller);//透明度动画

AnimatedWidget的构造函数只接受一个动画对象。 为了解决这个问题,可以在build方法.evaluate()在父级动画对象上调用Tween函数以计算所需的size和opacity值。

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

class AnimatedLogo extends AnimatedWidget {
  // The Tweens are static because they don't change.
  static final _opacityTween = new Tween<double>(begin: 0.1, end: 1.0);//透明度动画
  static final _sizeTween = new Tween<double>(begin: 0.0, end: 300.0);//缩放动画

  AnimatedLogo({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return new Center(
      child: new Opacity(
        opacity: _opacityTween.evaluate(animation),//指定不透明度为动画的值
        child: new Container(
          margin: new EdgeInsets.symmetric(vertical: 10.0),
          height: _sizeTween.evaluate(animation),//指定高度为缩放动画的值
          width: _sizeTween.evaluate(animation),//指定宽度为缩放动画的值
          child: new FlutterLogo(),
        ),
      ),
    );
  }
}

class LogoApp extends StatefulWidget {
  _LogoAppState createState() => new _LogoAppState();
}

class _LogoAppState extends State<LogoApp> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  initState() {
    super.initState();
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = new CurvedAnimation(parent: controller, curve: Curves.easeIn);

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
      }
    });

    controller.forward();
  }

  Widget build(BuildContext context) {
    return new AnimatedLogo(animation: animation);
  }

  dispose() {
    controller.dispose();
    super.dispose();
  }
}

void main() {
  runApp(new LogoApp());
}