Flutter开发之——动画-Curve

在Flutter中，动画可以通过动画控制器（AnimationController）和曲线（Curve）来实现。Curve定义了动画的运行速度，比如匀速、先快后慢等。

Flutter提供了多种预定义的Curve，例如linear, decelerate, ease, easeIn, easeOut, easeInOut, fastOutSlowIn, bounceIn, bounceOut 和 bounceInOut。

以下是一个使用Curve的简单示例：

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 SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
 
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(min: 0, max: 1, period: Duration(seconds: 2));
 
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
  }
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (BuildContext context, Widget child) {
            return Container(
              width: 100 + _animation.value * 200,
              height: 100 + _animation.value * 200,
              color: Colors.blue,
            );
          },
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个AnimationController和一个CurvedAnimation。CurvedAnimation使用Curves.easeInOut曲线，这意味着动画在开始和结束时会慢下来，中间的速度将加快。动画的构建器AnimatedBuilder根据动画值变化来调整容器的大小。