Flutter Ticker 动画驱动器

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

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 关联起来。

秒客网

Flutter Ticker 动画驱动器

Ticker

相关文章