Flutter动画Ticker、Animate 原理

在Flutter中，动画是通过AnimationController和Ticker来实现的。AnimationController负责管理动画的进度，而Ticker是一个回调函数，由TickerProviderStateMixin或SingleTickerProviderStateMixin提供，用于在每个动画帧进行更新。

Ticker

Ticker是一个函数，它在每个动画帧被调用，以便我们可以更新动画状态。Ticker是由SchedulerBinding的scheduleFrameCallback方法提供的。

AnimationController

AnimationController是一个特殊的Animation<double>对象，它在0.0和1.0之间变化，代表时间的流逝，可以通过forward, reverse或animateTo来控制动画的播放、停止和跳转到特定的时间点。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.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(
      vsync: this, // 提供ticker
      duration: Duration(seconds: 2),
    );
    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.easeInOut,
    );
    controller.forward(); // 播放动画
  }
 
  @override
  void dispose() {
    controller.dispose(); // 释放资源
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, child) {
            return Container(
              width: 100 + 100 * animation.value,
              height: 100 + 100 * animation.value,
              child: child,
            );
          },
          child: FlutterLogo(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (controller.isAnimating) {
            controller.stop(); // 停止动画
          } else {
            controller.forward(); // 重新播放动画
          }
        },
      ),
    );
  }
}

这个例子中，我们创建了一个AnimationController和CurvedAnimation，然后在initState方法中启动动画。AnimatedBuilder会在每个动画帧自动重新构建UI，以便我们可以看到动画的变化。当点击浮动按钮时，如果动画正在播放，则停止它；如果动画已停止，则重新播放动画。在dispose方法中，我们确保释放了AnimationController占用的资源。