使用 next.js 包含动态动画的正确方法

Posted 2023-03-04

【中文标题】使用 next.js 包含动态动画的正确方法

【英文标题】：Right way to include dynamic animation with next.js

【发布时间】：2022-01-15 08:45:04

【问题描述】：

我想用 next js 构建一个角色创建应用程序。 这个工具应该允许用户使用给定的滑块和性别按钮来改变角色。

我想要一个随输入动态变化的角色的 2d 动画版本。例如，年龄滑块应该改变角色的年龄，而高度应该随着滑块的移动而改变高度。

但是，我完全不知道处理此类事情的正确方法是什么。当然，我需要事先创建所有 ne 动画，但是我不确定我需要以哪种方式创建它们。每次动作都改变画面似乎不对。此外，我可能只需要更改角色的某些部分。

如果你有任何类似的例子，如果你能分享它们，将不胜感激。

【参考方案1】：

您可以通过安装在 Next JS 中使用 Farmer 动作

   yarn add framer-motion
# or
npm install framer-motion

或寻求帮助：https://www.freecodecamp.org/news/how-to-add-interactive-animations-and-page-transitions-to-a-next-js-web-app-with-framer-motion/