示例1

• AnimatedOpacity

AnimatedOpacity(
    duration: const Duration(milliseconds: 500),
    opacity: 1.0,
    child: Container(
      width: 300,
      height: 300,
      color: Colors.blue,
    ),
  ),
),

• TweenAnimationBuilder

TweenAnimationBuilder(
  duration: const Duration(milliseconds: 1000),
  tween: Tween<double>(begin: 0.0, end: 1.0),
  builder: (BuildContext context, double value, Widget? child) {
    print('---------value:$value');
    // flutter: ---------value:0.0
    // flutter: ---------value:0.016666
    // ...
    // flutter: ---------value:0.990012
    // flutter: ---------value:1.0
    return Opacity(
      opacity: value,
      child: child,
    );
  },
  child: Container(
    width: 300,
    height: 300,
    color: Colors.blue,
  ),
)

TweenAnimationBuilder(
  duration: const Duration(milliseconds: 1000),
  tween: Tween<double>(begin: 1.0, end: 1.2),
  builder: (BuildContext context, double value, Widget? child) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.blue,
      child: Center(
        child: Transform.scale(
          scale: value,
          child: const Text(
            'HI',
            style: TextStyle(fontSize: 72),
          ),
        ),
      ),
    );
  },
)

TweenAnimationBuilder(
  duration: const Duration(milliseconds: 1000),
  tween: Tween<Offset>(begin: const Offset(0, 0), end: const Offset(100, 100)),
  builder: (BuildContext context, Offset value, Widget? child) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.blue,
      child: Transform.translate(
        offset: value,
        child: const Text(
          'HI',
          style: TextStyle(fontSize: 72),
        ),
      ),
    );
  },
)

TweenAnimationBuilder(
  duration: const Duration(milliseconds: 1000),
  tween: Tween<double>(begin: 0.0, end: 6.28),
  builder: (BuildContext context, double value, Widget? child) {
    return Container(
      width: 300,
      height: 300,
      color: Colors.blue,
      child: Center(
        child: Transform.rotate(
          // 旋轉(zhuǎn)一圈
          angle: value,
          child: const Text(
            'HI',
            style: TextStyle(fontSize: 72),
          ),
        ),
      ),
    );
  },
)

示例2

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 120,
          color: Colors.blue,
          child: AnimatedCounter(
            duration: const Duration(milliseconds: 500),
            counter: _counter,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _counter += 1;
          });
        },
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class AnimatedCounter extends StatelessWidget {
  const AnimatedCounter({
    super.key,
    required Duration duration,
    required int counter,
  })  : _counter = counter,
        _duration = duration;

  final int _counter;
  final Duration _duration;

  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
      duration: _duration,
      // tween就是在起始值和終止值之間插入若干個數(shù)據(jù)
      tween: Tween<double>(end: _counter.toDouble()),
      builder: (BuildContext context, double value, Widget? child) {
        print('--------value:$value');
        // 取整
        final whole = value ~/ 1;
        // 小數(shù)部分
        final decimal = value - whole;
        return Stack(
          children: [
            PositionedDirectional(
              top: -100 * decimal, // 0 -> -100
              child: Opacity(
                opacity: 1.0 - decimal, // 1.0 -> 0.0
                child: Text(
                  '$whole',
                  style: const TextStyle(fontSize: 100),
                ),
              ),
            ),
            PositionedDirectional(
              top: 100 - 100 * decimal, // 100 -> 0
              child: Opacity(
                opacity: decimal, // 0.0 -> 1.0
                child: Text(
                  '${whole + 1}',
                  style: const TextStyle(fontSize: 100),
                ),
              ),
            ),
          ],
        );
      },
    );
  }
}

參考資料

• TweenAnimationBuilder<T extends Object?> class
• Creating your own Custom Implicit Animations with TweenAnimationBuilder