By

AnimationController

1
AnimationController(vsync:this, duration: Duration(milliseconds: 5000));
  • vsync 防止屏幕外动画消耗不必要的资源 单个AnimationController使用SingleTickerProviderStateMixin，多个AnimationController使用TickerProviderStateMixin

  • duration 动画执行的时间

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    class _AnimationBaseDemoState extends State<AnimationBaseDemo> with SingleTickerProviderStateMixin {
     double _size = 100;
      AnimationController _controller;
      @override
      void initState() {
        super.initState();
        _controller = AnimationController(vsync: this,duration: Duration(milliseconds: 500),lowerBound: 100,upperBound: 200)
        ..addListener(() {
          setState(() {
            _size = _controller.value;
          });
        })
      }

      @override
      Widget build(BuildContext context) {
        return Center(
          child: GestureDetector(
            onTap: () {
              _controller.forward();
            },
            child: Container(
              height: _size,
              width: _size,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text('点我变大',style: TextStyle(color: Colors.white,fontSize: 18),),
            ),
          ),
        );
      }
      
      @override
      void dispose() {
        super.dispose();
        _controller.dispose();
      }
    }

  • dismissed 动画停止在开始处

  • forward 动画从开始处运行到结束处
  • reverse 动画充结束处运行到开始处
  • completed 动画结束在借书处
  • repeat 重复执行动画
  • reset 重置动画

    Tween

    动画映射
    1
    2
    3
    4
    5
    6
    7
    8
    9
    AnimationController _controller;
    Animation<Color> _animation;

    @override
    void initState() {
      super.initState();
        _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
        _animation = ColorTween(begin: Colors.blue, end: Colors.red).animate(_controller);
    }

Curve

动画曲线

1
2
3
4
5
6
7
8
9
10
11
super.initState();
   _controller =
       AnimationController(vsync: this, duration: Duration(milliseconds: 1000))
         ..addListener(() {
           setState(() {});
         });

   _animation = Tween(begin: 100.0, end: 200.0)
       .chain(CurveTween(curve: Curves.bounceIn))
       .animate(_controller);
 }

自定义曲线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class _StairsCurve extends Curve {
  final int num;
  double _perStairY;
  double _perStairX;

  _StairsCurve(this.num) {
    _perStairY = 1.0 / (num - 1);
    _perStairX = 1.0 / num;
  }

  @override
  double transformInternal(double t) {
    return _perStairY * (t / _perStairX).floor();
  }
}

By 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
int countValue = 10;
Timer _timer;

void startTimer() {
  final Duration duration = Duration(seconds: 1);
  cancelTimer();

  _timer = Timer.periodic(duration, (timer) {
    countValue = countValue - 1;
    if (this.mounted) {
      setState((){
        //..
      });
    }
    print(countValue);
    if (countValue <= 0) {
      cancelTimer();
    }
  });
}

常见问题

  1. Widget销毁时取消Timer

    1
    2
    3
    4
    5
    @override
    void dispose() {
      cancelTimer();
      super.dispose();
    }

  2. 生命周期变动

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    @override
    void didChangeAppLifecycleState(AppLifecycleState state) {
      switch(state) {
        case AppLifecycleState.resumed: {
          break;
        }
        case AppLifecycleState.paused: {
          cancelTimer();
          break;
        }
        case AppLifecycleState.inactive: {
          cancelTimer();
          break;
        }
        case AppLifecycleState.detached: {
          cancelTimer();
          break;
        }
      }
      super.didChangeAppLifecycleState(state);
    }

By

容器 Widget 通常只接受一个子 Widget，他们直接过着间接的继承 SingleChildRenderObjectWidget

容器 Widget 一般用于包装子 Widget，添加一些修饰、变换、限制等

Read More