[Flutter动画笔记]-显式动画

2.显式动画（手动控制）

RotationTransition

//旋转显式动画
RotationTransition(
    //设置一个controller
    turns: _controller,
    child: Container(
        width: 50,
        height: 50,
    ),
),

//设置controller
_controller = AnimationController(
      upperBound: 5.0,  //默认0.0 - 1.0，转一圈
      lowerBound: 3.0,
      duration: Duration(seconds: 1),
      vsync: this,
);

//controller属性
 _controller.repeat();
 _controller.stop();
 _controller.reset();
 _controller.forward();

//例子
class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  bool _loading = false;
  AnimationController _controller;
  int _count = 0;
  _increment() {
    setState(() {
      this._count++;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RotationTransition(
          turns: _controller,
          child: Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
                gradient: LinearGradient(colors: [Colors.red, Colors.blue]),
                borderRadius: BorderRadius.circular(50),
                boxShadow: [BoxShadow(blurRadius: 10)]),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_loading) {
            _controller.repeat();
          } else {
            _controller.stop();
          }
          _loading = !_loading;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

FadeTransition

//透明度，在Rotation基础上把turns改成opacity
FadeTransition(
    opacity: _controller,
    child: Container(
        height: 300,
        width: 300,
        color: Colors.blue,
    ),
),

ScaleTransition

//缩放
ScaleTransition(
    scale: _controller,
    child: Container(
        height: 300,
        width: 300,
        color: Colors.blue,
    ),
),
//放大缩小放大的效果
_controller.repeat(reverse:true);

SlideTransition

SlideTransition(
    position: _controller
    child: Container(
        height: 300,
        width: 300,
        color: Colors.blue,
    ),
),

Tween控制器串联补间

SlideTransition(
    position: Tween(begin: Offset(0, -1), end: Offset(0, 1))
    .chain(CurveTween(curve: Curves.elasticInOut))
    .animate(_controller),
    //  position: _controller.drive(Tween(begin: Offset(0, 0), end: Offset(1, 1))),
    //scale:_controller.drive(Tween(begin: 0.5, end: 2.0)),
    child: Container(
        height: 300,
        width: 300,
        color: Colors.blue,
    ),
),

//交叉动画  通过Interval函数
SlideTransition(
    position: Tween(begin: Offset(0.0, 0.0), end: Offset(0.1, 0.0))
    .chain(CurveTween(curve: _interval)) //前面0-0.8不动，0.8-1.0动起来
    .animate(_controller),
    child: Container(height: 100, width: 300, color: this._color));
}

SlidingBox(this._controller, Colors.blue[100], Interval(0.0, 0.2)),
SlidingBox(this._controller, Colors.blue[300], Interval(0.2, 0.4)),
SlidingBox(this._controller, Colors.blue[500], Interval(0.4, 0.6)),
SlidingBox(this._controller, Colors.blue[700], Interval(0.6, 0.8)),
SlidingBox(this._controller, Colors.blue[900], Interval(0.8, 1.0)),

AnimatedBuilder自定义动画

AnimatedBuilder(
    animation: _controller,
    builder: (context, child) {
        return Opacity(
            //因为Opacity不是动画控件，不知道Tween，所以后面接一个evaluate
            opacity: Tween(begin: 0.5, end: 0.8).evaluate(_controller),
            child: Container(
                height: Tween(begin: 100.0, end: 200.0).evaluate(_controller),
                width: 300,
                color: Colors.blue,
                child: child,
            ),
        );
    },
    //把Text放在Container里面的话，每次刷新都要Build它，但他却啥都不会改变，把它提出来节约性能
    child: Center(
        child: Text(
            'Hi',
            style: TextStyle(fontSize: 35),
        ),
    ),
),


//第二种解决方法
//定义透明度和高度的补间动画
final Animation opacityAnimation =
    Tween(begin: 0.5, end: 0.8).animate(_controller);
final Animation heightAnimation =
    Tween(begin: 100.0, end: 200.0).animate(_controller);
return Scaffold(
    appBar: AppBar(
        title: Text(widget.title),
    ),
    body: Center(
        child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
                return Opacity(
                    //引用上面的定义的值，记得后面接value
                    opacity: opacityAnimation.value,
                    child: Container(
                        height: heightAnimation.value,
                        width: 300,
                        color: Colors.blue,
                        child: child,
                    ),
                );
            },

实例478呼吸法

// ++++ 0000000 -------- 0
    Animation stopsAnimation1 = Tween(begin: 0.0, end: 1.0)
        .chain(CurveTween(
          curve: Interval(0.0, 0.2),
        )) //4/20秒=0.2
        .animate(_controller);
    Animation stopsAnimation3 = Tween(begin: 1.0, end: 0.0)
        .chain(CurveTween(
          curve: Interval(0.4, 0.95),
        )) //4/20秒=0.2
        .animate(_controller);


AnimatedBuilder(
    animation: _controller,
    builder: (context, child) {
        return Container(
            height: 200,
            width: 200,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                color: Colors.blue,
                gradient: RadialGradient(
                    colors: [Colors.blue[600], Colors.blue[100]],
                    stops: _controller.value <= 0.2
                    ? [stopsAnimation1.value, _controller.value + 0.1]
                    : [stopsAnimation3.value, _controller.value + 0.1]),
            ));
    },
)