flutter - 如何在颤动中为一个小部件应用两个补间？

Question

所以我有一个容器，我想把它从0to缩放1.1到1.0so 1.1to 1.0。

我尝试附加两个补间，但它产生了奇怪的结果。容器已经缩放到1.0，然后它开始从1.1到动画1.0。

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _scale;
  late Animation<double> _scaleAnimation;
  
  @override
  void initState() {
    _scale = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1000));
    _scaleAnimation = _scale
        .drive(CurveTween(curve: Curves.ease))
        .drive(Tween<double>(begin: 0.0, end: 1.0))
        .drive(Tween<double>(begin: 1.0, end: 1.1));

    _scale.forward();
    super.initState();
  }
  
  @override
  void dispose() {
    _scale.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ScaleTransition(
          scale: _scaleAnimation,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red
          ),
        ),
      ),
    );
  }
}

标签： flutterdart

Answer 1

您可以使用TweenSequence

 _scaleAnimation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween:
              Tween(begin: 0.0, end: 1.1).chain(CurveTween(curve: Curves.ease)),
          weight: 50.0,
        ),
        TweenSequenceItem<double>(
          tween:
              Tween(begin: 1.1, end: 1.0).chain(CurveTween(curve: Curves.ease)),
          weight: 50.0,
        ),
      ],
    ).animate(_scale);