如何将动画乐透 JSON 文件从屏幕的一侧直线移动到另一侧答案

【问题标题】：How to move an animated lottie JSON file in flutter in a straight line from one side of the screen to another如何将动画乐透 JSON 文件从屏幕的一侧直线移动到另一侧
【发布时间】：2020-11-08 08:13:04
【问题描述】：

我想制作一个带有动画角色的颤动应用程序，可以像这个视频中那样移动。

https://www.youtube.com/watch?v=qW-KIjHjjHM&t=5s

对于动画角色，我使用了后期效果，并导出为 JSON 文件以用作 Lottie。

我想要一个空白屏幕并将动画角色移过屏幕并移出屏幕。然后再次进入并沿着笔直的路径前进。每条路径都是笔直的，笔直路径的起点和终点是随机的，就像视频一样。

我可以用什么来实现这样的目标？我不希望完整的代码只是将我指向接近此的内容、文档或任何可以帮助我实现它的内容。

【问题讨论】：

标签： android flutter animation after-effects lottie

【解决方案1】：

通过在 pubspec.yaml 中的依赖项下添加以下包来安装 Lottie for Flutter 包

      lottie: ^0.7.0+1

在 Flutter 中使用 Lottie 动画是通过 Lottie Widget 实现的，它从本地文件资产 (Lottie.asset)、远程 url (Lottie.network) 或 zip 文件 (Lottie.asset) 加载 json 动画。

      //loads from file assets
      Lottie.asset(
       'assets/programming.json',
        width: MediaQuery.of(context).size.width * 0.5,
        height: MediaQuery.of(context).size.width * 0.5,
        fit: BoxFit.fill,
        ),

它适用于我的代码。

【讨论】：

【解决方案2】：

据我了解，您可以在 Adobe aftereffects 中创建您正在谈论的完整动画，然后导出 BodyMovin json 文件。导出 json 文件后，您可以转到 http://rive.app/ 并在那里导入您的 json。导入后，您只需导出 .flr 文件并在您的 Flutter 应用中使用它。

更多信息请点击这里https://twitter.com/rive_app/status/1169294765625618432?s=20

最后你可以使用重复功能无限播放动画。

【讨论】：

您已经很好地理解了这个过程，先生。我的知识仅限于如何在颤动屏幕上移动 json 文件。我知道颤动的动画翻译功能，但我还必须旋转动画以面对它要移动的方向。我可以为动画使用哪个函数来自动确定匹配直线路径所需的旋转角度。由于路径在整个屏幕中是随机的，因此每个路径的旋转应该匹配。