Flutter动画widget合集3

761 阅读1分钟

AnimatedBuilder

你可以在我的博客看到这篇文章

如果之前的那些动画Widget都不能满足你,那么你可以试试这个。

使用AnimatedBuilder可以实现动画的过程监听,数值控制,过程控制,多动画同时进行等。

  @override
  void initState() {
    super.initState();
   //AnimationController对象,
    _controller = AnimationController(
	//使State with TickerProviderStateMixin
        vsync: this,
        duration: Duration(milliseconds: 5000),
	//value的下界
        lowerBound: 1,
	//value的上界
        upperBound: 10);
  }
  void _animating() {
    setState(() {
      if (status) {
	//正向动画
        _controller.forward();
      } else {
	//反向动画
        _controller.reverse();
      }
      status = !status;
    });
  }
GestureDetector(
          onTap: _animating,
          child: AnimatedBuilder(
            animation: _controller,
	   //每次_controller.value的数值更新,都会通知到这里,通过数值的变化来进行动画。
            builder: (context, child) {
	      //旋转widget
              return Transform.rotate(
                child: Container(
                    width: 200.0,
		    //height通过_controller.value来控制
                    height: 50 + _controller.value * 20,
		    //color通过_controller.value来控制
                    color: Color(0xff661111 + _controller.value.toInt() * 1000),
                    child: child),
		//旋转的角度通过_controller.value来控制
                angle: _controller.value * pi,
              );
            },
	   //此处的child会被传入builder中的child。但是此处的widget不会被动画更新
            child: Text(
              "AnimatedBuilder演示",
              style: TextStyle(fontSize: 40),
            ),
          ),
        ),

旋转角度,背景色,和高度同时进行动画。

AnimatedBuilder

AnimatedBuilder的思路和代码都很简单,使用AnimationController更新value,AnimatedBuilder中监听这个value的更新,通过setState({})来进行动画。

只要掌握这个的使用,所有的widget动画都不在话下了。

AnimatedTheme

准确来说这个不是widget,但是也能实现动画效果,主要是在全局的动画发生改变时使用的。

这个是应用在MaterialApp下的theme属性,当ThemeData发生改变时,应用这个动画。

AnimateTheme

void _animating() {
    setState(() {
      status = !status;
    });
  }

MaterialApp(
      //这里改变了app的日间模式和夜间模式
      theme: status ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: GestureDetector(
            onTap: _animating,
            child: FlatButton(
                onPressed: () {
                  _animating();
                },
                child: Text("AnimatedTheme演示")),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _animating,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );

``