在开始另一个动画之前先完成动画-Flutter

时间:2020-09-30 10:39:09

标签: flutter dart flutter-layout flutter-dependencies flutter-animation

我尝试为倒数计时添加预启动,两者的持续时间不同。所以我制作了两个动画A和B, 当我按下开始按钮时,动画A开始播放,当结束时,动画B开始播放。

现在我发生了什么事,因为它们是同时开始的,我尝试了Interval类和Tween类,但没有用。

此刻我的代码如下:

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Timer2 extends StatefulWidget {
@override
 _Timer2State createState() => _Timer2State();
   }
   class _Timer2State extends State<Timer2> with TickerProviderStateMixin {
  AnimationController animationController;
  @override
   void initState() {
    super.initState();
    animationController = AnimationController(vsync: this,duration: Duration(seconds: 10)); 

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(backgroundColor: Colors.black,
  body: Padding(
    padding: EdgeInsets.all(8.0),
    child: AnimatedBuilder(
          animation: animationController,
          builder: (context, child){
            return Stack(
              children: [
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    color: Colors.red,
                    height:
                    animationController.value * MediaQuery.of(context).size.height,
                  ),
                ),
                Column(
                  children: <Widget>[
                    Expanded(
                      child: Align(
                        alignment: FractionalOffset.center,
                        child: AspectRatio(
                          aspectRatio: 1.0,
                          child: Stack(
                            children: <Widget>[
                              Positioned.fill(
                                child: AnimatedBuilder(
                                  animation: animationController,
                                  builder: (BuildContext context, Widget child) {
                                    return CustomPaint(
                                      painter: TimerPainter(
                                          animation: animationController,
                                          backgroundColor: Colors.white,
                                          color: Colors.pink),
                                    );
                                  },
                                ),
                              ),                                  
                            ],
                          ),
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.all(8.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          FloatingActionButton(

                            child: AnimatedBuilder(
                                animation: animationController,
                                builder: (_, Widget child) {
                                  return Icon(
                                      animationController.isAnimating
                                          ? Icons.pause
                                          : Icons.play_arrow
                                  );
                                }),
                            backgroundColor: Colors.pinkAccent,
                            onPressed: () {
                              if (animationController.isAnimating ) {
                                animationController.stop();
                              } else {
                                animationController.reverse(
                                    from: animationController.value == 0.0
                                        ? 1.0
                                        : animationController.value);
                              };
                              setState(() {
                                Icon(animationController.isAnimating
                                    ? Icons.play_arrow
                                    : Icons.pause
                                );
                              });
                            },
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ],
            );
          },
        ),
    ),
 );
   }

 }

class TimerPainter extends CustomPainter {
final Animation<double> animation;
final Color backgroundColor;
final Color color;
TimerPainter({this.animation, this.backgroundColor, this.color})
  : super(repaint: animation);   
 @override  
void paint(Canvas canvas, Size size) {
 paint = Paint()
    ..color = backgroundColor
    ..strokeWidth = 5.0
    ..strokeCap = StrokeCap.round
    ..style = PaintingStyle.stroke;
  canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
  paint.color = color;
  double progress = (1.0 - animation.value) * 2 * 3.14;
  canvas.drawArc(Offset.zero & size, 3.14 * 1.5, - progress, false, paint);
}
@override
bool shouldRepaint(TimerPainter old) {
  return animation.value != old.animation.value ||
      color != old.color ||
      backgroundColor != old.backgroundColor;
}
  }   

谢谢

0 个答案:

没有答案