使用 Flutter/Dart 翻转和摇动 Tile 动画..？答案

【问题标题】：Flipping and Shaking of Tile Animation Using Flutter/Dart..?使用 Flutter/Dart 翻转和摇动 Tile 动画..？
【发布时间】：2018-09-11 13:16:57
【问题描述】：

https://github.com/chimple/maui/blob/master/lib/games/memory.dart

我正在尝试使用 Flutter/Dart 实现 MemoryMatching Game。整个游戏逻辑已编码 Up..only Animation is pending 当用户点击任何随机瓷砖时，瓷砖应该会发生翻转，并且在尝试匹配不匹配的瓷砖时，应该会发生抖动动画并且它们应该再次翻转。These is how initial look of the game

【问题讨论】：

标签： dart flutter

【解决方案1】：

this 页面上有一个如何制作自定义摇动曲线的示例。
它还详细介绍了如何使用曲线创建动画。

编辑：实际上我尝试了这个，示例曲线导致颤动错误。你可以做的是使用这样的转换；

/// create and animation controller in your init state;
_controller = new AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 1000),
)..addListener(()=>setState((){}));

...

///wrap your layout in a transform;
return Transform(
    transform: Matrix4.translation(getTranslation()),
    child:
      /*your layout widget here*/,
  );

///Then you can get a shake type motion like so;
Vector3 getTranslation() {
  double progress = _controller.value;
  double offset = sin(progress * pi * 2);
  return Vector3(offset, 0.0, 0.0);
}

然后，一旦您在动画控制器上调用 forward，您将获得一个不错的摇晃效果。为了获得更明显的抖动乘以一个常数偏移。为了更快地摇动，请将 2.0 更改为更高的量。

接受的答案here 描述了一个翻转动画的简单解决方案

【讨论】：