Flutter开发之——动画—Tween

在Flutter中，Tween是一个用来生成介于起始值和结束值之间的值的类。Flutter提供了一些内置的Tween类，如ColorTween、Matrix4Tween、RectTween等，你也可以通过继承Tween类来创建自定义的Tween。

下面是一个使用Tween类来创建自定义动画的例子：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
 
  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(); // 使动画无限重复
 
    // 创建自定义的Tween
    animation = Tween<double>(begin: 0, end: 300).animate(controller);
  }
 
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tween Animation')),
      body: Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, child) {
            return Container(
              width: animation.value,
              height: animation.value,
              color: Colors.blue,
            );
          },
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个AnimationController和一个自定义的Tween<double>，用来控制一个Container的大小从0到300像素的动画。AnimatedBuilder用于监听动画的变化，并重新构建Container以显示最新的宽高值。这个动画会无限循环播放。