随着 Web 技术的快速发展，前端开发对于用户交互和动画体验的要求越来越高。在这个背景下，React 作为目前最受欢迎的前端框架之一，拥有丰富的动画库来帮助我们实现各式各样的交互效果。本文分享了一种结合 Tweenmax 和 BezierEasing 的 React 动画实现方式，该方法可以帮助我们更加高效地实现页面间的转场动画。
1. Tweenmax 和 BezierEasing 简介
Tweenmax
Tweenmax 是 GreenSock 一家公司推出的一个用于 JavaScript 动画的库，它可以对 DOM 元素的样式、位置、大小等属性进行动画操作，同时支持链式调用、时间轴控制等功能，使用方便，功能强大。除了 Tweenmax 外，GreenSock 还推出了很多其他动画库，如 TimelineMax、SplitText 等。
BezierEasing
BezierEasing 是一款用于计算贝塞尔曲线的缓动函数的库，它接受 4 个 0-1 之间的参数，分别代表曲线上的 2 个控制点。通过调整这些参数，我们可以自定义各种曲线形状，达到不同的动画效果。
2. 安装 Tweenmax 和 BezierEasing
我们首先需要在项目中安装 Tweenmax 和 BezierEasing。可以使用 npm 或者 yarn 安装，命令如下：
npm install gsap npm install bezier-easing
3. 实现过渡动画
接下来，我们将结合 Tweenmax 和 BezierEasing 实现一个简单的转场动画。假设有两个页面 A 和 B，我们需要从 A 页面跳转到 B 页面时实现一个水平滑动的过渡动画。具体实现步骤如下：
3.1 准备页面和路由
我们先准备两个页面和一个路由，其中 A 页面和 B 页面分别是红色和绿色的背景，它们的 z-index 不同，路由使用 react-router-dom 实现。代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------- - ---- -------------------
------ ------------
------ - ---- ------------
------ - ---- ------------
-------- ----- -
------ -
--------
---- ----------------
-----
----
----
-------- ------------------
-----
----
-------- -------------------
-----
-----
------
------ -------- ----- ------------- --
------ --------- ------------- --
------
---------
--
-
------ ------- ----其中 A 页面和 B 页面的代码如下：
// A 页面
import React from 'react';
function A() {
return <div className="page a">A 页面</div>;
}
export default A;// B 页面
import React from 'react';
function B() {
return <div className="page b">B 页面</div>;
}
export default B;为了方便展示过渡效果，我们为 A 页面和 B 页面设置了不同的背景颜色，并使用了相同的 class 名称 page。
3.2 实现动画效果
现在我们已经准备好了页面和路由，可以开始实现转场动画了。
我们先在 App.js 中定义一个状态 transition，用来控制动画的开始和结束。当页面跳转时，我们将 transition 状态设置为 true，开始执行动画。代码如下：
-- -------------------- ---- -------
------ ------ - --------- ------ - ---- --------
-- ---
-------- ----- -
----- ------------ -------------- - ----------------
-- ---
------ -
--------
--- --- ---
---------
--
-接下来，在 A 页面和 B 页面中，我们使用 css 进行一些样式的设置，使得页面可以横向滑动，代码如下：
-- -------------------- ---- ------- -- - --- - ----- -- ----- - --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------- --------- ---- --------- -- ------- -- - -- - -------- -- ----------------- ---- - -- - -------- -- ----------------- ------ -
在 A 页面和 B 页面的样式中，我们主要设置了 position、width、height 和 transition 的一些样式，其中 transition 指定了 transform 属性在 0.5 秒内缓慢变化的动画效果。这里我们使用了 ease-out 的缓动函数，表示动画开始时速度较快，结束时速度慢，形成一个自然的减速过程。
接下来，我们使用 Tweenmax 和 BezierEasing 实现页面间的滑动动画。我们在 App.js 中创建两个 ref，分别对应 A 页面和 B 页面的 DOM 元素，代码如下：
-- -------------------- ---- ------- ------ ------ - --------- ------ - ---- -------- ------ ---- ---- ------- ------ ------------ ---- ---------------- -------- ----- - ----- ------------ -------------- - ---------------- ----- -------- - ----------- ---------------- - ---------- ---------- -- --- -
然后，我们在路由中监听路由变化事件，并实现页面滑动效果。当用户从 A 页面跳转到 B 页面时，我们先将 B 页面的 opacity 设置为 0，然后更改 A、B 页面的 transform 属性，使用 Tweenmax 实现两个页面的同时滑动。在动画过程中，我们使用 BezierEasing 自定义一条贝塞尔曲线作为缓动函数，使得动画更加平滑自然。代码如下：
-- -------------------- ---- -------
-------- ----- -
-- ---
-------- --------------- -
--------------------
----- ---------- ------- - -----------------
-- --------------------
---------------- - -------- - ---
----- ---- - --- ------------------ ---- ----- --- -- -------
-------------------------- ---------------- -
--------- ----- -- --------
--------- ----
-----
----------- -- -- -
-- -----------------------
--------------------------- ---------------- - --------- - ---
---------------------
---------------- - -------- - ---
--
---
-
------ -
--------
---- ----------------
-----
--- --- ---
------
--- - -- ---
---- ------------------------- ---------------- - ------------ - ------------ - ------
-- --
------
--- - -- ---
---- ------------------------- ---------------- - ------------ - ------------ - ------
-- --
------
------
---------
--
-在上面的代码中，我们定义了一个 onRouteChange 函数来监听路由变化事件。当页面跳转时，我们先将目标页面的 opacity 属性设为 0，表示该页面不可见。然后我们使用 Tweenmax 和 BezierEasing 实现两个页面同时向左滑动。在动画结束后，我们将目标页面的 opacity 属性再次设为 1，使其可见。
上面的代码中，我们使用了 xPercent 代表移动距离，形如 from { xPercent: 0 }，to { xPercent: -100 }。因为我们要向左滑动，所以设置 xPercent 为 -100。如果我们想要向右滑动，则应该将 xPercent 设为 100。
最后，在 A 页面和 B 页面的 className 中设置 transition 样式，用来控制页面滑动时的过渡动画。代码如下：
/* A 页面和 B 页面的样式 */
.page {
/* ... */
&.transition {
transition-property: transform, opacity;
}
}上面的代码中，我们在 .page.transition 样式中设置了 transition-property 为 transform 和 opacity，表示在页面滑动时同时进行这两种类型的动画：
4. 总结
通过本文的实践，我们看到了如何使用 React、Tweenmax 和 BezierEasing 实现简单的页面转场动画。这些库都非常强大，可以轻松帮助我们实现各种交互效果。然而，实现复杂的动画效果也需要一定的专业知识和技能，需要不断学习和练习才能逐渐提高动画设计和实现的能力。希望本文对大家有所帮助，也欢迎大家分享更多关于 React 动画的实践经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f05bcaf6b2d6eab3a5e1a5