想动手就能学会的Flutter旋转小人儿视觉错觉

Android

2023-12-15 06:25:09

几年前的某一天，我偶然看到一个神奇的GIF：

[GIF of a rotating小人儿]

最奇妙的是，当我在盯着它时，它的旋转方向突然反转了！

而在旋转方向变化的同时，它的左右腿和左右手也发生了变化。

这让我不禁好奇：是 GIF 被篡改了吗？还是我的大脑出现了错觉？

于是，我决定自己动手来研究一下这个视觉错觉。

原理

这个错觉的原理很简单：

我们的视觉系统会将连续的图像解释为运动。
当我们盯着一个旋转的物体时，我们的眼睛会自动补偿物体的运动。
当补偿方向反转时，我们的大脑就会认为物体正在朝相反的方向旋转。

Flutter实现

在 Flutter 中实现这个错觉非常简单。我们可以使用以下代码：

import 'package:flutter/material.dart';

class Rotating小人儿 extends StatefulWidget {
  const Rotating小人儿({Key? key}) : super(key: key);

  @override
  _Rotating小人儿State createState() => _Rotating小人儿State();
}

class _Rotating小人儿State extends State<Rotating小人儿> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      child: Image.asset('assets/小人儿.png'),
      builder: (context, child) {
        return Transform.rotate(
          angle: _controller.value * 2 * math.pi,
          child: child,
        );
      },
    );
  }
}