flutter进度条动画

dart 复制代码
import 'dart:async';
import 'package:jade/configs/PathConfig.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class JadeLinearProgressIndicator extends StatefulWidget {
  final double currentProgress;
  JadeLinearProgressIndicator(this.currentProgress);
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _JadeLinearProgressIndicatorState();
  }
}

class _JadeLinearProgressIndicatorState extends State<JadeLinearProgressIndicator> with TickerProviderStateMixin {


  // 动画相关控制器与补间。
  AnimationController animation;
  Tween<double> tween;

  GlobalKey _keyOffset = GlobalKey();

  Timer _timer;
  int _animationIndex = 0;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    animation = AnimationController(
        // 这个动画应该持续的时间长短。
        duration: const Duration(milliseconds: 900),
        vsync: this)
      ..addListener(() {
        setState(() {});
      });
    tween = Tween<double>(
      begin: 0.0,
      end: widget.currentProgress >1.0? 1.0 : widget.currentProgress,
    );
    // 开始向前运行这个动画（朝向最后）
    animation.forward();
    _processAnimation();
  }


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

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      alignment: Alignment.centerLeft,
      children: [
        Container(
          width: 250.w,
          height: 32.w,
          margin: EdgeInsets.only(left: 14.w),
          child: Stack(
            children: [
              Positioned.fill(
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    child: Container(
                      color: JadeColors.grey_13,
                      child: ListView.separated(
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index) => Icon(Icons.navigate_next,
                            color: index == _animationIndex?JadeColors.orange:Colors.white,size: 16,),
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          separatorBuilder: (context,index) =>Container(width: 16.w,),
                          itemCount: 6),
                    ),
                  )),
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                child: Align(
                  widthFactor: tween.animate(animation).value,
                  child: Container(
                    key: _keyOffset,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [JadeColors.blue,JadeColors.blue_8],
                            begin: Alignment.centerLeft,end: Alignment.centerRight
                        )
                    ),
                  ),
                ),
              ),
              Container(
                alignment: Alignment.center,
                child: Text('${((widget.currentProgress > 1.0 ? 1.0: widget.currentProgress) * 100).toStringAsFixed(2)}%',
                  style: TextStyle(color: Colors.white,fontSize: 24.sp,fontFamily: 'PingFang'),),
              )
            ],
          ),
        ),
        Image.asset(PathConfig.iconFireBlue,width: 32.w,)
      ],
    );
  }

  //进度条箭头动画
  _processAnimation(){
    _timer = Timer.periodic(Duration(milliseconds: 100), (timer){
      _animationIndex ++;
      if(_animationIndex == 6){
        _animationIndex = 0;
      }
      setState(() {});
    });
  }

  _cancelTimer(){
    if(_timer !=null && _timer.isActive){
      _timer.cancel();
      _timer = null;
    }
  }
}