阅读 2049

2019年,实现 React 动画的 5 种最常用方式

2

动画是 ReactJs 应用程序中一个热门话题,我们有很多方法可以创建不同类型的动画。例如,很多开发人员就喜欢使用 css 动画。但如果你想创建更复杂的动画,你可以关注 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 里用于动画的库

........................ ...👇 要查看回购,请单击此处。👈 ...........................👆

当然,还有很多开源的动画库和组件,但是这篇文章不会涉及这些库。

👨💻让我们开始吧。

一、CSS 方法

这种方法是实现动画的最简单、最基础的方式。你不需要导入 JavaScript 库,并且浏览器花费的资源也是最少的。如果你需要实现一个简单的动画,并担心包的大小,可以使用此方法。

那么,如何使用 css 做动画喃? 我们来看看左侧菜单栏示例:👇

2

这里使用 css 属性和 className="is-nav-open" 标签实现侧边栏动画。

CSS 有很多方法实现该效果,其中之一是在导航组件上创建一个容器组件,并在点击时触发 margin 的更改。导航栏有固定的宽度 250px ,容器组件的 margin-lefttranslateX 也拥有相同宽度。当我们需要显示导航栏时,我们需要给容器组件设置 className="is-nav-open" 并且移动容器组件 margin-left/translateX: 0;

3

和 CSS 样式:

4

在大多数情况下,我们都会使用 CSS 来创建动画,因为它不需要在项目中导入大型库来实现动画,通常几行 css 以及 className 标签就能实现。

二、 ReactTransitionGroup

它是由 ReactJs 社区的人员开发的。ReactTransitionGroup 很容易实现基本的 CSS 动画和过渡动画。

开发人员将此库描述为:

“用于管理组件状态(包括安装和卸载)的一组组件,特别为动画而设计的。”

无论如何,关于它需要了解三件事:

  • 当组件生命周期发生更改时,React Transition Group 会更改类。所以,应该在 CSS 上设置动画样式。
  • ReactTransitionGroup 的包很小。在 React 应用程序中安装它,并不会显著增加项目包的体积。但你可以使用 CDN 。
  • ReactTransitionGroup有 3 个组件(Transition,CSSTransition 和 TransitionGroup )。为了获得动画,你需要将组件包裹在这 3 个类中。

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

5

首先,你需要导入 CSSTransitionGroupreact-transition-group

然后你需要将列表包装在其中并设置 transitionName props。每当 CSSTransitionGroup 添加或删除子项时,它将获得动画样式。

6

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

7

这就是 ReactTransitionGroup 的基本用法。👀

这就是你需要的一切。当然,你可以添加一些逻辑。

我们用两种方法来实现我们的示例联系人列表:

handleAdd - 添加新的联系人,它获得一个随机名称并将其 push 到数组 state.items

handleRemove - 通过 state.items 数组中的索引删除联系人。

8

三、 React-animations

React-animations - 该库是使用 animate.css 构建的所有动画。它易于使用,并有很多动画集合。React-animation 适用于任何支持使用对象定义关键帧动画的内联样式库,例如 Radium,Aphrodite 或样式组件。我更喜欢使用样式组件。

你可以在gif上看到一些动画:👀👇

9

我知道你的想法😄

10

一旦你看到这些动画,你就会意识到你可以在哪里使用它们。 我们来看看它是如何工作的。例如 - Bounce动画

11

第一件事就是导入动画所需的 react-animations

正如我之前提到的,在使用动画样式和基本关键帧创建容器组件之后,我使用了样式组件。

12

创建组件时,你需要包装任何 HTML 或动画组件。

13

例:

14

这个动画就实现了,很容易,也很简单。

这里介绍一个处理滚动动画很好的库 - react-animate-on-scroll

四、 React-reveal

React RevealReact 的动画框架。它有如淡入淡出,翻转,缩放,旋转之类的基本动画,也有很多高级动画。它允许您使用 props 控制所有动画,例如:位置,延迟,距离,级联等等。你可以在这里看到它们。你还可以使用自定义 CSS 效果。

它还具有服务器端渲染和高阶组件。

如果你喜欢使用滚动动画,推荐你使用它,接下里了解一下它是如何工作的。

15

让我们看看这个动画的滚动效果。👀👇

16

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

17

我们创造 animateList ,该数组包含 5 个元素。使用数组方法 map 依次渲染 Fade 组件中的每个元素并为其插入标题。

五、TweenOne 和 Ant Design 中的 animation

Ant Design 是一个用于构建用户界面的简单易用的 React UI 组件库。Ant Design 由阿里巴巴创建,并且被很多知名品牌使用,例如:阿里巴巴,腾讯,百度等等。

你可能已经听说过 Ant Design,我们看一下其官网首页上的动画

18

如你所见,其中涉及很多动画元素。我们这里只介绍一个简单版本,因为所有元素都有类似的动画。这里我选择了地球上的绿球和背景上的一个元素,例如红色方块。就像这样。

19

在这个动画中我使用了 TweenOne 组件,因为它需要在动画中使用路径,所以我使用了 PathPlugin 。当你将 PathPlugin 推送到 TweenOne.plugins 里时,就会开启动画 。

20

下一步让我们看一下 Basic 动画参数:

  1. **duration -**以毫秒为单位的动画
  2. ease - 动画曲线函数,
  3. yoyo - 在每次重复动画中,向前和向后交替。
  4. repeat - 重复动画,你可以使用 -1进行无限期处理。
  5. p - 动画的路径坐标
  6. easePath - 动画的缓动路径坐标

看一下样例:

21

接下来我们将创建一个动画对象。该对象包含 3 种不同类型的动画:

  1. redSquare - 它包含循环参数,以及Y坐标 y,持续时间 duration 和延迟 delay
  2. greenBall - 它包含路径参数 path 、持续时间 durationrepeat 以及 ease 函数( TweenOne.easing.path ), 其中 TweenOne.easing.path 包含两个参数:
    • path - easePath 坐标。
    • lengthPixel - 将分割曲线分为 lengthPixel 个部分,此例中,将分割曲线分为 400 份。
  3. track - 一个带有轴的椭圆形,具有循环样式和旋转参数。

22

你无需担心此代码。你必须注意 TweenOne 组件。让我们简单地提醒一下,这些组件都是从 rc-tween-one 中导入的,这个库被用作基础 props 和动画 props 的基本组件。

每一个 TweenOne 都有它自己的动画规则 redSquaretrackgreenBall

23

24

😄看起来吓人。但事实上,你需要注意这些。

25

正如你所注意到的,使用此方法创建动画是一种简单的方法。你所需要做的只是描述动画规则,并将它们传输到 TweenOne 组件。

🏁结论

常见动画有很多种,不同的动画我们可以采用不同的方法。今天我们就介绍了几种你可以在项目中使用的方法。至于具体采用何种方法,需要参考具体场景👨💻

before 你在阅读本文之前:

26

after 阅读本文后:

😄请更优雅的使用动画吧!


👇你还应该阅读下一篇文章:👇

  1. 使用Sentry跟踪React App中的错误
  2. 在React JS中实现CSS的9种方法

❤️感谢阅读

玩得开心,不断学习,并始终保持编码。 关注MediumLinkedin

👏喜欢,分享,发表评论

如果你有任何问题或反馈,请点击阅读原文👇

下面你可以看到一组流行的动画库列表。

ReactJs库:

  1. react-motion - 解决动画问题的方案之一。
  2. react-spring - 基于 Spring 物理的 React 动画库。
  3. ant-motion - Ant 设计的 Animate 规范和组件。
  4. react-move - 优雅的,基于数据驱动的动画
  5. react-flight - React 构建动画的最佳方法。
  6. react-flip-move - 使用 FLIP 技术更改 DOM(例如列表重新排序),从而轻松实现 动画 效果。
  7. react-burger-menu - 位于屏幕之外的侧边栏组件,它使用 CSS 过渡共话和 SVG 路径动画实现。
  8. animated - 用于 ReactReact Native 的声明性动画库。
  9. react-tween-state - React 动画
  10. react-animations - 内联样式库的动画集合。

Javascript库:

  1. GSAP - 适用于现代网络的超高性能、专业级动画。
  2. Anime.js - Anime.js(/ˈæn.ə.meɪ/)是一个轻量级 JavaScript 动画库,具有简单但功能强大的API。 它适用于 CSS 、SVG、DOM 属性和 JavaScript 对象。
  3. Popmotion - 用于灵活简单的用户界面的动画库。
  4. vivus - 在 SVG 上制作绘图动画的 JavaScript 库。
  5. svg.js - 用于操作动画 SVG 的轻量级库。
  6. velocity - Velocity 是一个动画引擎,与 jQuery 的 $.animate() 具有相同的 API 。
  7. wow - 滚动时显示动画,Animate.css 的朋友。
  8. dynamic.js - 使用这个 Javascript 库创建基于物理的动画。
  9. granim.js - 使用这个小的 JavaScript 库创建流畅的、交互式的渐变动画。
  10. kute.js - KUTE.js 是一个原生的 JavaScript 动画引擎,具有出色的代码质量和性能。
  11. TweenJs - 一个简单但功能强大的 Javascript 动画库。CreateJS 库的一部分。
  12. moveTo - 一个不依赖任何其它库的轻量级的 javascript 库,用于创建滚动动画。

参考链接

本文翻译自 medium.com/@dmitrynozh… Dmitry Nozhenko 大大的总结。

系列文章

想看更过系列文章,点击前往 github 博客主页

走在最后

1. ❤️玩得开心,不断学习,并始终保持编码。👨💻

2. 如有任何问题或更独特的见解,欢迎评论或直接联系瓶子君(公众号回复 123 即可)!👀👇

3. 👇欢迎关注:前端瓶子君,每日更新!👇

前端瓶子君

关注下面的标签,发现更多相似文章
评论