Flutter 动画

1、数字增加动画、进度条增加动画

    import 'package:flutter/material.dart';
    class PageFour extends StatefulWidget{
        @override
        _PageFour createState() => _PageFour();
    }
    class _PageFour extends State<PageFour> with TickerProviderStateMixin{
        AnimationController controller;
        Animation animation;
        var number = 90;
        @override
        void initState(){
            super.initState();
            controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 3000));
            final Animation curve = CurvedAnimation(parent: controller,curve: Curves.linear);
            animation = IntTween(begin:0,end: 90).animate(curve)..addStatusListener((status){
                if(status==AnimationStatus.completed){
                    //  controller.reverse();
                }
            });
            controller.forward();
        }
        Widget build(BuildContext context) {
            return  MaterialApp(
                home: new Scaffold(
                    appBar: new AppBar(
                        title: new Text('page Four'),
                    ),
                    body: AnimatedBuilder(
                        animation: controller, 
                        builder: (context,child){
                            return Column(
                                children:[
                                    Padding(
                                        padding: EdgeInsets.all(50),
                                        child: LinearProgressIndicator(
                                            value: animation.value/100,
                                        ),
                                    ),
                                    Padding(
                                        padding: EdgeInsets.only(bottom: 50),
                                        child: SizedBox(
                                            width: 120,
                                            height: 120,
                                            //CircularProgressIndicator不具备设置高度的选项，可以使用SizedBox来设置高度与宽度
                                            child: CircularProgressIndicator(
                                                value: animation.value/100,
                                                strokeWidth: 8,
                                                backgroundColor: Colors.greenAccent,
                                                valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                                            )
                                        )
                                    ),
                                    Text(
                                        animation.value.toString(),
                                        style: TextStyle(
                                            fontSize: 30,
                                            fontWeight: FontWeight.w400
                                        ),
                                    )
                                ]
                            );
                        }
                    )
                ),
            );
        }
    }