前言
React 是现在最流行的前端框架之一，它为开发者提供了良好的组件化开发体验，构建高可维护的单页面应用非常方便。而且，React 生态圈中有许多优秀的 NPM 包，这些包可以极大地增强我们的开发体验，加快我们的开发效率。本文将介绍一个优秀的 React NPM 包 - react-aerial，它有着优秀的对于 React 动画的支持，可以让我们更加方便地实现各种动画效果。
安装
使用 react-aerial 插件首先需要在你的项目中安装它，你可以使用 NPM 或者 Yarn 来进行安装:
// NPM $ npm install react-aerial // Yarn $ yarn add react-aerial
使用
react-aerial 为我们提供了许多实用的组件，使得实现动画效果更加方便。下面，我们将会详细介绍如何使用 react-aerial 的一些核心组件。
<animate>
<Animate> 组件可以用来在 React 元素之间进行动画切换，使得切换效果更加平滑自然。下面是一个简单的例子：
-- -------------------- ---- -------
------ - ------- - ---- ---------------
-------- -
------ -
---------
------------------- -- ---- ---------------------------
----------
-
-上面代码中，当 this.state.isShown 为 true 时，<div> 元素将会从隐藏到显示，同时有一个过渡动画。可以通过 duration 和 easing props 控制动画的持续时间和缓动效果。例如：
<Animate duration={500} easing='ease-in-out'>
{this.state.isShown && <div className='box'>显示内容</div>}
</Animate><transition>
<Transition> 组件可以用来定义一个动画的过程，包括动画开始前的状态，动画进行中的状态，动画结束时的状态。下面是一个例子：
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
-------- -
------ -
-----------
---------------------------------
-------------------------------
---------------
---- ----------------
----- -----
------
-------------
-
-上面的代码中，<div> 元素将会有一个Fade动画，从透明度为 0 到 1。
<tween>
<Tween> 组件可以用来制定单一的过渡效果。下面是一个例子：
-- -------------------- ---- -------
------ - ----- - ---- ---------------
-------- -
------ -
------ --------- -------- --------------- ---------------------
---- -- ---- --------------------------------------
--------
-
-上面代码通过传入 from 和 to props，控制了 Tween 的开始状态和结束状态。 pos 是组件内部计算出的当前状态值，我们可以使用 pos 来根据当前状态值实现一些动态的效果。
<sprite>
<Sprite> 组件可以用来制作角色扮演游戏中的动画效果。可以接受一组图片，并将其播放成动画效果。下面是一个例子：
-- -------------------- ---- -------
------ - ------ - ---- ---------------
-------- -
------ -
-------
-------------------------------------
--------------
----------------
-----------------
--------------
----
-----------------------------
------------------- -- -----------------
---------
-
-上面代码中，<Sprite> 组件的播放器状态将会通过 this.state.playing 控制是否播放，播放时 playing props 就设置为 true。
结语
react-aerial 是一个非常优秀的 NPM 包，它通过提供几个核心组件，让 React 开发者能够更加方便地实现动画效果。这篇文章简单介绍了 react-aerial 的核心组件，希望能够帮助大家更好地使用这个工具包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e29ad