用 Flutter 实现动画 Motion Design

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cNPfF22j-1623890890454)(https://ducafecat.tech/2021/06/17/translation/implementing-motion-design-with-flutter/2021-06-17-08-24-47.png)]

猫哥说

这篇文章讲的是如何在你的动画中加入运动特性、运动球、重力、贝塞尔曲线、多边形、不规则曲线，如果你正在找这方面资料，这个源码你可要好好消化了。这都是动画中的基础，前端就是要酷炫，开始吧。

最佳体验还是阅读原文（链接在下面）。

老铁记得 转发 ，猫哥会呈现更多 Flutter 好文~~~~

微信群 ducafecat

b站 https://space.bilibili.com/404904528

原文

https://preyea-regmi.medium.com/implementing-motion-design-with-flutter-126d06b080ab

代码

https://github.com/PreyeaRegmi/FlutterMotionDesignSamples

参考

• https://pub.flutter-io.cn/packages/get#reactive-state-manager
• https://dart.dev/guides/language/extension-methods

正文

大部分时间实现运动设计是一个有点累赘的移动应用程序。本文从更加实用的角度阐述了如何通过 Flutter 实现运动设计。我们将采取一个简单的运动设计从运球作为一个参考，并开始建设它一步一步。所有版权保留给各自的作者，实现的完整源代码可以在 github 上找到。

https://github.com/PreyeaRegmi/FlutterMotionDesignSamples

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fPTnsptm-1623890890455)(https://ducafecat.tech/2021/06/17/translation/implementing-motion-design-with-flutter/login-interaction.gif)]

现在我们将重点放在登录/注册交互上。所以，就像其他的交互设计一样，我们将尝试把它分解成多个场景，这样我们就可以有一个清晰的整体概念，并将这些场景链接在一起。

场景 1: 初始状态屏幕

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mqYeIGx6-1623890890456)(https://ducafecat.tech/2021/06/17/translation/implementing-motion-design-with-flutter/2021-06-17-08-03-58.png)]

在这个场景中，我们在底部有一个弹跳的图像和文字，一个弯曲的白色背景，一个品牌标题包围着图像的中心和变形虫形状的背景。拖动底部的内容，直到一定的距离被覆盖，揭示动画播放和场景转换到下一个场景。

展示动画(中间场景)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PHSwb5sI-1623890890456)(https://ducafecat.tech/2021/06/17/translation/implementing-motion-design-with-flutter/2021-06-17-08-04-33.png)]

在这个中间场景中，曲线背景高度是动画的。此外，在这个动画，控制点的三次贝塞尔曲线也被平移和还原，以提供加速效果。侧面的图标和变形虫背景也在垂直方向上 translated 以响应动画的显示。

场景 2: 后期显示动画状态屏幕

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSx8IarI-1623890890457)(https://ducafecat.tech/2021/06/17/translation/implementing-motion-design-with-flutter/2021-06-17-08-05-27.png)]

当显示动画完成后，品牌标题被一个圆形图标取代，一个标签指示器从屏幕左侧飞过来，相应的标签被加载。

现在我们有了设计中涉及的相关场景的概述。下一步，我们尝试将这些想法映射到实现细节中。那么让我们开始吧。

我们将使用 stack 作为顶级容器来托管我们所有的场景，并根据当前场景状态，我们将向 stack 添加各自的小部件，并动画他们的几何图形。

@override
  Widget build(BuildContext context) {
    List<Widget> stackChildren = [];

    switch (currentScreenState) {
      case CURRENT_SCREEN_STATE.INIT_STATE:
        stackChildren.addAll(_getBgWidgets());
        stackChildren.addAll(_getDefaultWidgets());
        stackChildren.addAll(_getInitScreenWidgets());
        stackChildren.add(_getBrandTitle());

        break;
      case CURRENT_SCREEN_STATE.REVEALING_ANIMATING_STATE:
        stackChildren.addAll(_getBgWidgets());
        stackChildren.addAll(_getDefaultWidgets());
        stackChildren.add(_getBrandTitle());
        break;
      case CURRENT_SCREEN_STATE.POST_REVEAL_STATE:
        stackChildren.addAll(_getBgWidgets());
        stackChildren.addAll(_getDefaultWidgets());
        stackChildren.insert(stackChildren.length - 1, _getCurvedPageSwitcher());
        stackChildren.addAll(_getPostRevealAnimationStateWidgets());
        stackChildren.add(buildPages());
        break;
    }

    return Stack(children: stackChildren);
  }

对于场景 1，所有相应的小部件都被定位并添加到 stack 中。底部“向上滑动开始”小部件的弹跳效果也立即开始。

//Animation Controller for setting bounce anima