ReactJS应用程序中的动画是一个流行的话题,有很多方法可以创建不同类型的动画。许多开发人员只使用CSS和向HTML标记添加类来创建动画。这是一个好方法,您应该使用它,如果要创建复杂的动画,可以关注GreenSock,GreenSock是最强大的动画平台。还有很多库用于在React中创建动画的组件。
让我们来看看他们 :sunglasses:
-
CSS方法
-
React-transition-group——它是用于简单实现基本CSS动画和过渡的附加组件。
-
react-animations —react-animations实现了animate.css中的所有动画。简单易用!
-
React Reveal —这是React的动画框架。
-
TweenOne — 用于ant.design的动画库(重点)。
查看仓库,点击 此处 [1]
当然,开源社区有更多的动画库和组件。
:man::computer: 让我们开始吧。
1. CSS 方法
对于简单的动画,此方法是最好的方法之一。当您使用它而不是导入javascript库时,您的包很小,并且浏览器花费更少的资源,这两点也在很大程度上影响了应用程序的性能。如果你的动画很简单并且担心你的包的大小,请注意这个方法。
我想向您展示如何使用CSS制作动画。
让我们看一下汉堡菜单示例::point_down:
该菜单易于使用,具有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)。为了获得动画,您需要将组件包装在其中。
让我们来看看如何制作类似的动画 :eyes::point_down:
首先,您需要从 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或样式化组件)的任何内联样式库一起使用。我更喜欢使用样式组件。
下面是一些动画::eyes::point_down:
一旦你看到这些动画,你就会意识到你可以在哪里使用它们。
让我们看看它是如何工作的。例如:反弹动画。
当组件被创建时,您需要为动画包装任何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— 动画的缓动路径坐标
参考资料
此处: https://github.com/NozhenkoD/react-animation-2019
React-animations: https://github.com/FormidableLabs/react-animations
React Reveal: https://www.react-reveal.com/
这里: https://www.react-reveal.com/docs/props/
Ant Design: http://ant.design/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 知识图谱的建模方法及其应用
- 简述交叉编译常用的方法及应用
- 把「模板方法」应用到实际项目中
- [应用安全]之ActiveMQ漏洞利用方法总结
- 设计模式 | 模板方法模式及典型应用
- 美团大脑:知识图谱的建模方法及其应用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。