Flutter动画进阶：解锁能量函数的艺术，打造流畅视觉体验

在Flutter中，我们可以使用AnimationController来控制动画的进度，并使用CurvedAnimation来实现非线性的动画曲线。以下是一个简单的示例，展示如何使用这些工具来创建一个带有缓动效果的动画：

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;
  CurvedAnimation _curvedAnimation;
 
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..addListener(() => setState(() {}));
 
    _curvedAnimation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeOut, // 使用非线性的缓动曲线
    );
  }
 
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('动画示例')),
      body: Center(
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 10),
          height: 200 * _curvedAnimation.value, // 使用动画值来改变容器的高度
          width: 200 * _curvedAnimation.value,
          child: FlutterLogo(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_controller.isCompleted) {
            _controller.reverse(); // 动画结束时反向播放
          } else {
            _controller.forward(); // 动画未结束时正向播放
          }
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

这段代码展示了如何创建一个简单的动画，其中AnimationController控制动画的进度，CurvedAnimation用于实现非线性的动画曲线，而_curvedAnimation.value被用于实时更新UI组件的状态，从而实现动画的流畅视觉效果。