如何在 React 应用程序中添加 GASP 动画作为背景？

Question

例如：这是一个简单的动画效果。我如何在我的 React 应用程序中使用它。

https://codepen.io/celli/pen/xZgpvN

<div id="container" />

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<!-- TweenMax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>

是否有任何其他示例或演示可以将动画作为背景嵌入到我的 React webapp 中。

P.S。查看最新的 class 基于 React 的应用程序。

Answer 1

我认为至少有两种可能性可以实现：

在开发React应用的时候，周围还是有规律的网页。 React 被加载到网页内的一个元素中。例如，您可以在另一个 div 而不是 React 应用程序中使用背景效果。
如果你想在 React 应用程序中使用它（例如作为单个组件的背景），你可以使用 <div ref={backgroundAnimationRef} /> 并在 useEffect钩子还是在class基础上componentDidMount。您可能需要根据 componentWillUnmount 中的效果或 useEffect 的 return 值添加清理函数。

如果您需要在页面上的任何地方使用这种效果，我会选择选项 1。如果您需要更大的灵活性（在页面上/应用程序的不同部分或其 width/height依赖于某些 React 组件），我会选择选项 2。

如何在 React 应用程序中添加 GASP 动画作为背景？

How can I add animation of GASP as background in React app?

javascript

reactjs

react-native

gsap