Flutter Ticker 动画驱动器

题记：不到最终时刻，千万别轻言放弃，无论结局成功与否，只需你拼博过，尽力过，全部问心无愧。

Flutter文章目录

Flutter中的Ticker是一个动画驱动器，它会在每个屏幕刷新周期中调用回调函数，以便动画能够更新自己的状况并重绘。

Flutter Ticker 一般应用在需要在每一帧都履行一些操作的情况下，比如动画或许游戏开发中。

Ticker供给了一个每一帧都会回调的机制，能够用来更新UI或许履行其他操作。以下是一个运用Ticker的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 1),
    vsync: this,
  )..repeat();
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RotationTransition(
        turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
        child: const FlutterLogo(size: 200.0),
      ),
    );
  }
}

上面的代码中，咱们创建了一个MyWidget类，它继承自StatefulWidget。
在MyWidget的状况类_MyWidgetState中，咱们混入了TickerProviderStateMixin，这个mixin供给了一个TickerProvider对象，用于创建AnimationController。

在_MyWidgetState的构造函数中，咱们创建了一个AnimationController，它的duration为1秒，vsync为this，也便是_TickerProviderStateMixin的实例。然后咱们调用了AnimationController的repeat办法，让动画重复播映。

在MyWidget的build办法中，咱们创建了一个RotationTransition，它的turns属性是一个Tween，它的begin值为0，end值为1，表明从0度旋转到360度。

这个Tween的animate办法返回了一个Animation对象，它的值由AnimationController操控。最终咱们把FlutterLogo放在RotationTransition中，就能够看到一个旋转的Flutter Logo了。

Ticker

Ticker运用了Flutter引擎的scheduler来调度回调函数的履行，scheduler会在每个屏幕刷新周期中调用回调函数。

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
// Create a TickerProviderStateMixin
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
  // Declare a Ticker object
  late Ticker _ticker;
  @override
  void initState() {
    super.initState();
    // Initialize the Ticker object
    _ticker = this.createTicker((Duration duration) {
      // Do something every tick
    });
  }
  @override
  void dispose() {
    // Dispose the Ticker object
    _ticker.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

SingleTickerProviderStateMixin 是一个 mixin 类，它允许咱们运用单个 TickerProvider 来办理多个 AnimationController。

import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..repeat();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RotationTransition(
          turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
          child: Icon(Icons.cached),
        ),
      ),
    );
  }
}

在上面的示例中，咱们运用了 SingleTickerProviderStateMixin 来办理 _controller，这样咱们就能够在 initState 中将它与 TickerProvider 关联起来。