Flutter基础(四)

动画

• 简单动画：淡入淡出

import 'package:flutter/material.dart';

class AnimatePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _AnimatePage();
  }
}

class _AnimatePage extends State<AnimatePage> {
  @override
  Widget build(BuildContext context) {
    bool _visible = true;
    return Scaffold(
      appBar: AppBar(title: Text("Animate Page")),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text("显示隐藏"),
              onPressed: () {
                setState(() {
                  _visible = !_visible;
                });
              },
            ),
            AnimatedOpacity(
              duration: Duration(milliseconds: 5000),
              opacity: _visible ? 1.0 : 0.0,
              child: Image.network(
                  "https://ossweb-img.qq.com/upload/adw/image/20191022/627bdf586e0de8a29d5a48b86700a790.jpeg"),
            ),
          ],
        ),
      ),
    );
  }
}

• 复杂一些的动画：放大缩小
  Animation: 保存动画的值和状态
  AnimationController: 控制动画，包含：启动forward()、停止stop()、反向播放reverse()等方法
  Tween: 提供begin，end作为动画变化的取值范围
  Curve：设置动画使用曲线变化，如非匀速动画，先加速，后减速等的设定。

import 'package:flutter/material.dart';

class AnimatePage2 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _AnimatePage();
  }
}

class _AnimatePage extends State<AnimatePage2>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: Duration(seconds: 5), vsync: this);
    // 使用弹性曲线，数据变化从0到300
    animation = CurvedAnimation(parent: controller, curve: Curves.bounceIn);
    animation = Tween(begin: 0.0, end: 300.0).animate(animation)
      ..addListener(() {
        setState(() {});
      });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Animate page two"),
      ),
      body: Center(
          child: Image.network(
        "https://ossweb-img.qq.com/upload/adw/image/20191022/627bdf586e0de8a29d5a48b86700a790.jpeg",
        width: animation.value,
        height: animation.value,
      )),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}