React动画实战：五种常见实现策略

75 浏览量更新于2024-08-30 收藏 260KB PDF 举报

在React中实现动画是前端开发中的一个重要任务，特别是在追求用户体验和品牌形象的今天。由于React框架强调虚拟DOM的概念，动画效果通常不会由框架直接提供，而是需要开发者自行设计并实现。以下是React中常见的几种动画实现方式： 1. **基于定时器或requestAnimationFrame (RAF)**: 这是最基础的动画实现方法，通过定时器或者RAF改变DOM元素的属性。但直接操作真实DOM并不推荐，应将与动画相关的样式属性存储在组件的状态(state)中。例如，创建一个进度条动画，可以在组件的生命周期函数中设置定时器，更新状态值，进而触发组件重新渲染，实现动画效果。 2. **CSS3动画**: 利用CSS3提供的动画功能，开发者可以编写关键帧动画，定义元素的动画属性，如transform, opacity等，并与React组件的state关联，通过改变这些状态值来控制动画的播放。 3. **React动画插件CssTransitionGroup**: 这是一个React官方推荐的组件，它可以帮助管理和协调一组元素的CSS过渡，使得在状态改变时自动应用过渡效果，简化了动画管理。 4. **Hook实现复杂动画**: React Hooks（如useState, useEffect）为开发者提供了新的方式来处理动画。例如，可以使用useEffect来监听状态变化，然后在适当的时候执行动画操作，保持动画的同步和控制。 5. **第三方动画库**: 社区有许多成熟的第三方动画库，如Animate.css、react-spring等，它们提供了丰富的动画预设和可配置选项，便于快速实现复杂的动画效果，同时也能与React无缝集成。 React中的动画实现需要开发者灵活运用状态管理和DOM操作，确保动画与虚拟DOM模型相适应，以提升性能并遵循最佳实践。通过合理选择和组合上述方法，开发者可以轻松在React项目中创建出吸引人的动态界面。

React中常见的动画实现的几种方式中常见的动画实现的几种方式

现在，用户对于前端页面的要求已经不能满足于实现功能，更要有颜值，有趣味。除了整体 UI 的美观，在合适的地方添加合

适的动画效果往往比静态页面更具有表现力，达到更自然的效果。比如，一个简单的 loading 动画或者页面切换效果不仅能缓

解用户的等待情绪，甚至通过使用品牌 logo 等形式，默默达到品牌宣传的效果。

React 作为最近几年比较流行的前端开发框架，提出了虚拟 DOM 概念，所有 DOM 的变化都先发生在虚拟 DOM 上，通过

DOM diff 来分析网页的实际变化，然后反映在真实 DOM 上，从而极大地提升网页性能。然而，在动画实现方面，React 作为

框架并不会直接给组件提供动画效果，需要开发者自行实现，而传统 web 动画大多数都通过直接操作实际 DOM 元素来实

现，这在 React 中显然是不被提倡的。那么，在 React 中动画都是如何实现的呢？

所有动画的本质都是连续修改 DOM 元素的一个或者多个属性，使其产生连贯的变化效果，从而形成动画。在 React 中实现动

画本质上与传统 web 动画一样，仍然是两种方式：通过 css3 动画实现和通过 js 修改元素属性。只不过在具体实现时，要更

为符合 React 的框架特性，可以概括为几类：

基于定时器或 requestAnimationFrame(RAF) 的间隔动画；

基于 css3 的简单动画；

React 动画插件 CssTransitionGroup；

结合 hook 实现复杂动画；

其他第三方动画库。

一、基于定时器或一、基于定时器或 RAF 的间隔动画的间隔动画

最早，动画的实现都是依靠定时器 setInterval ， setTimeout 或者 requestAnimationFrame (RAF) 直接修改 DOM 元素的属性。不熟悉

React 特性的开发者可能会习惯性地通过 ref 或者 findDOMNode() 获取真实的 DOM 节点，直接修改其样式。然而，通过 ref 直接

获取真实 DOM 并对其操作是是不被提倡使用，应当尽量避免这种操作。

因此，我们需要将定时器或者 RAF 等方法与 DOM 节点属性通过 state 联系起来。首先，需要提取出与变化样式相关的属性，

替换为 state ，然后在合适的生命周期函数中添加定时器或者 requestAnimationFrame 不断修改 state ，触发组件更新，从而实现动

画效果。

示例

以一个进度条为例，代码如下所示：

// 使用requestAnimationFrame改变state

import React, { Component } from 'react';

export default class Progress extends Component {

constructor(props) {

super(props);

this.state = {

percent: 10

};

}

increase = () => {

const percent = this.state.percent;

const targetPercent = percent >= 90 ? 100 : percent + 10;

const speed = (targetPercent - percent) / 400;

let start = null;

const animate = timestamp => {

if (!start) start = timestamp;

const progress = timestamp - start;

const currentProgress = Math.min(parseInt(speed * progress + percent, 10), targetPercent);

this.setState({

percent: currentProgress

});

if (currentProgress < targetPercent) {

window.requestAnimationFrame(animate);

}

};

window.requestAnimationFrame(animate);

}

decrease = () => {

const percent = this.state.percent;

const targetPercent = percent < 10 ? 0 : percent - 10;

const speed = (percent - targetPercent) / 400;

下载后可阅读完整内容，剩余8页未读，立即下载

weixin_38609732

粉丝: 8
资源: 963

React动画实战：五种常见实现策略

在React中写一个Animation组件为组件进入和离开加上动画/过度效果

react-ReactMoveReact的精美数据驱动动画库

为React开发的一个超级简单的动画引擎库

React中的动画效果实现与优化

PromotionDemo:使用React实现的翻页动画原型

React动画实现：从基础到高级

React页面流动画实现技巧：CSS动画应用

React Native中的动画实现与优化

React 18中的动画效果实现

React Native中的动画效果实现

最新资源