flutter - 如何在动画开始之前和动画中间延迟动画？

Question

我试图在开始时和动画之间插入延迟时间，以便在延迟时间结束后，动画继续正常运行。

这是我所做的部分，这是一个带有旋转和缩放的动画。所以具体来说，我想要的是在动画开始旋转和缩放之前，它会延迟/暂停 0.3 秒。之后，当动画旋转 180 度并按比例放大时，它将再次延迟/暂停 0.3 秒。然后，它将完成最后的 180 度并按比例缩小。然后重复该过程。

动画.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _rotateAnimation;
  Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 3000));
    _rotateAnimation = TweenSequence([
      TweenSequenceItem(tween: Tween(begin: 2*pi, end: pi), weight: 1),
      TweenSequenceItem(tween: Tween(begin: pi, end: 0.0), weight: 1)
    ]).animate(CurvedAnimation(parent: _animationController, curve: Curves.linear));
    _scaleAnimation = TweenSequence([
      TweenSequenceItem(tween: Tween(begin: 0.5, end: 1.0), weight: 1),
      TweenSequenceItem(tween: Tween(begin: 1.0, end: 0.5), weight: 1),
    ]).animate(CurvedAnimation(parent: _animationController, curve: Curves.linear));
    _animationController.repeat();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 100,
          width: 100,
          child: AnimatedBuilder(
            animation: _animationController,
            builder: (_, child) {
              return Transform(
                alignment: Alignment.center,
                transform: Matrix4.identity()
                ..scale(_scaleAnimation.value)
                ..rotateZ(_rotateAnimation.value),
                child: Container(
                  color: Colors.red
                )
              );
            }
          )
        ),
      ),
    );
  }
}

非常感谢任何帮助或建议。谢谢。

标签： flutteranimation

Answer 1

要实现所需的动画，您需要：

• TweenSequenceItem 的 Chain() 和 ConstantTween
• 动画时 CurvedAnimation 中的间隔

像这样的东西：

@override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 3000));
    _rotateAnimation = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 2 * pi, end: pi)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 1),
      TweenSequenceItem<double>(tween: ConstantTween<double>(pi), weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: pi, end: 0.0)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 1)
    ]).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Interval(
          0.3,
          1,
          curve: Curves.linear,
        ),
      ),
    );
    _scaleAnimation = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 0.5, end: 1.0)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 1),
      TweenSequenceItem<double>(
        tween: ConstantTween<double>(1.0),
        weight: 1,
      ),
      TweenSequenceItem(
          tween: Tween(begin: 1.0, end: 0.5)
              .chain(CurveTween(curve: Curves.linear)),
          weight: 1),
    ]).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Interval(
          0.3,
          1,
          curve: Curves.linear,
        ),
      ),
    );
    _animationController.repeat();
  }

动画将是：