【React】620- 为React应用制作动画的5种方法

ReactJS应用程序中的动画是一个流行的话题，有很多方法可以创建不同类型的动画。许多开发人员只使用CSS和向HTML标记添加类来创建动画。这是一个好方法，您应该使用它，如果要创建复杂的动画，可以关注GreenSock，GreenSock是最强大的动画平台。还有很多库用于在React中创建动画的组件。

让我们来看看他们 ?

1. CSS方法
2. React-transition-group ——它是用于简单实现基本CSS动画和过渡的附加组件。
3. react-animations — react-animations实现了animate.css中的所有动画。简单易用！
4. React Reveal — 这是React的动画框架。
5. TweenOne — 用于ant.design的动画库（重点）。

查看仓库，点击此处[1]

当然，开源社区有更多的动画库和组件。

?‍? 让我们开始吧。

1. CSS 方法

对于简单的动画，此方法是最好的方法之一。当您使用它而不是导入javascript库时，您的包很小，并且浏览器花费更少的资源，这两点也在很大程度上影响了应用程序的性能。如果你的动画很简单并且担心你的包的大小，请注意这个方法。

我想向您展示如何使用CSS制作动画。

让我们看一下汉堡菜单示例：?

该菜单易于使用，具有css属性，并为html标签触发 className=“is-nav-open”，有很多方法可以实现这个示例。其中一种方法是在导航上方创建一个包装器(wrapper)，并触发页边距margin的更改，导航的宽度为 250px。并且包装器的margin-left 或 translateX 属性具有相同的宽度。当需要显示导航时，我们必须为包装器添加 className=“is-nav-open” 并将包装器移至 margin-left/translateX:0 上。

CSS样式：

相信我，在大多数情况下使用这个方法是必要的，我们最好编写几行css并触发className，而不是导入大型库在项目中实现他。

但有时，您必须使用其他方法。还有其他方法吗？让我们来看看下一种方法。

2.ReactTransitionGroup

这个附加组件是由ReactJs社区的人员开发的，ReactTransitionGroup易于实现基本的CSS动画和过渡。

开发人员将此库描述为：

一组用于管理组件状态(包括随时间的挂载和卸载)的组件，设计时特别考虑了动画。

无论如何，您需要了解有关该附加组件的三件事：

• 当组件生命周期更改时，ReactTransitionGroup会更改类。反过来，动画样式应该在CSS类中描述。
• ReactTransitionGroup的大小很小。它应该安装在React应用程序的软件包中，并且不会大大增加您的捆绑包。但是您可以使用CDN。
• ReactTransitionGroup具有3个组件（Transition，CSSTransition和TransitionGroup）。为了获得动画，您需要将组件包装在其中。

让我们来看看如何制作类似的动画 ??

首先，您需要从 react-transition-group 导入 CSSTransitionGroup。之后，您必须将列表包装其中并设置 transitionName 属性。每当添加或删除 CSSTransitionGroup 中的子级时，它将获得动画样式。

如果设置 transitionName = “example” props，则样式表中的类应以示例名称开头。

当然，您需要添加一些逻辑。我们应该为示例联系人列表的实现描述两种方法：

• handleAdd —添加新的联系人，它将获得一个随机名称并将其推送到数组state.items（它使用随机名称包作为名称）。
• handleRemove —通过state.items数组中的索引删除联系人。

3. React-animations

React-animations[2]——该库基于animate.css 所构建。它易于使用，并且有很多动画集合。React-animation可与支持使用对象定义关键帧动画（例如Radium，Aphrodite或样式化组件）的任何内联样式库一起使用。我更喜欢使用样式组件。

下面是一些动画：??

一旦你看到这些动画，你就会意识到你可以在哪里使用它们。

让我们看看它是如何工作的。例如：反弹动画。

当组件被创建时，您需要为动画包装任何HTML或组件。

例子

动画有效，这个动画很简单。

4️. React-reveal

React Reveal[3]是React的动画框架。它具有基本的动画，例如淡入淡出，翻转，缩放，旋转以及许多更高级的动画。它允许您使用props控制所有动画，例如：位置，延迟，距离，级联等。您可以在这里[4]看到它们，您也可以使用自定义CSS效果。它还具有服务器端渲染和高阶组件。如果您更喜欢滚动使用动画，则可以使用此框架。看看它是如何工作的。

让我们看一下该动画的滚动效果。

我们有5个区块，每个区块都有一个全屏页面和一个标题。

我们创建 animateList 常量。该数组包含5个元素。使用数组方法map后，您可以渲染 Fade 组件中的每个元素，并将我们的项目插入标题。Const样式为我们的块和标题提供了简短的css样式，我们有5个方块从顶部淡出动画。

5.TweenOne和Ant Design中的动画

Ant Design[5]是一个React UI库，其中包含大量易于使用的组件，它是用于构建优雅的用户界面的有用组件。由中国企业集团阿里巴巴（Alibaba）创建的Ant Design，已在许多知名企业中应用：阿里巴巴（当然），腾讯，百度等。

你可以看到有很多的动画元素。我想给你看一个简短的版本，因为所有的元素都有一个相似的动画。

我选择了带有绿色球和一个元素（例如红色正方形）作为背景的地球仪。我们的动画看起来像这样。

我在此动画中使用了 TweenOne 组件，但它需要 PathPlugin 才能在动画中使用路径。当您将 PathPlugin 添加到 TweenOne.plugins 时，它将起作用。

基本动画参数：

• duration -时间动画（以毫秒为单位）
• ease — animation ease
• yoyo —每次重复向前和向后交替。
• repeat — 重复动画
• p— 动画的路径坐标
• easePath — 动画的缓动路径坐标

参考资料

[1]

此处: https://github.com/NozhenkoD/react-animation-2019

[2]

React-animations: https://github.com/FormidableLabs/react-animations

[3]

React Reveal: https://www.react-reveal.com/

[4]

这里: https://www.react-reveal.com/docs/props/

[5]

Ant Design: http://ant.design/