3.9动画

3.9动画

React 进阶：3.9 动画详解

1. CSS 过渡 (CSS Transitions)

CSS 过渡是最简单的动画实现方式，适用于简单的状态变化。它通过 CSS 属性的平滑过渡来实现动画效果。

代码示例：

import React, { useState } from 'react';
import './Transition.css';
function TransitionExample() {
  const [isVisible, setIsVisible] = useState(false);
  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Visibility
      </button>
      <div className={`box ${isVisible ? 'visible' : ''}`}>
        This is a box with CSS transition.
      </div>
    </div>
  );
}
export default TransitionExample;
​

Transition.css:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}
.box.visible {
  opacity: 1;
}
​

代码详解：

• isVisible 状态控制 box 元素的可见性。

• Transition.css 定义了 box 元素的初始样式和过渡效果。

• transition: opacity 0.5s ease-in-out; 定义了 opacity 属性在 0.5 秒内以 ease-in-out 缓动函数进行过渡。

• 当 isVisible 为 true 时，box 元素添加 visible 类，使其 opacity 变为 1，从而触发过渡动画。

优点：

• 简单易用，易于理解。

• 性能良好，由浏览器原生支持。

缺点：

• 只能控制简单的属性过渡。

• 无法实现复杂的动画序列和控制。

2. CSS 动画 (CSS Animations)

CSS 动画通过 @keyframes 规则定义动画序列，可以实现更复杂的动画效果。

代码示例：

import React from 'react';
import './Animation.css';
function AnimationExample() {
  return (
    <div className="container">
      <div className="box animation-box">
        This is a box with CSS animation.
      </div>
    </div>
  );
}
export default AnimationExample;
​

Animation.css:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.animation-box {
  animation: pulse 2s infinite alternate;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
​

代码详解：

• animation: pulse 2s infinite alternate; 将 pulse 动画应用到 box 元素，持续 2 秒，无限循环，并使用 alternate 模式（正向播放后反向播放）。

• @keyframes pulse 定义了动画序列，使 box 元素在 0% 时缩放为 1，在 100% 时缩放为 1.2。

优点：

• 可以实现更复杂的动画序列。

• 性能良好，由浏览器原生支持。

缺点：

• 代码量相对较多。

• 与 JavaScript 的交互有限。

3. React Transition Group

react-transition-group 是一个官方推荐的 React 动画库，提供了一组组件，用于管理组件的进入和退出过渡。

安装：

npm install react-transition-group
​

代码示例：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './ReactTransitionGroup.css';
function ReactTransitionGroupExample() {
  const [isVisible, setIsVisible] = useState(false);
  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Visibility
      </button>
      <CSSTransition
        in={isVisible}
        timeout={300}
        classNames="fade"
        unmountOnExit
        mountOnEnter
      >
        <div>
          This is a box with React Transition Group.
        </div>
      </CSSTransition>
    </div>
  );
}
export default ReactTransitionGroupExample;
​

ReactTransitionGroup.css:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-in;
}
​

代码详解：

• CSSTransition 组件监听 isVisible 状态的变化。

• timeout={300} 定义了过渡的持续时间为 300 毫秒。

• classNames="fade" 指定了 CSS 类名的前缀，CSSTransition 会自动添加后缀（enter, enter-active, exit, exit-active）来控制过渡效果。

• unmountOnExit 和 mountOnEnter 分别在退出动画结束后卸载组件，在进入动画开始前挂载组件。

优点：

• 易于管理组件的进入和退出过渡。

• 与 React 组件生命周期紧密结合。

• 可以自定义过渡效果。

缺点：

• 需要引入额外的库。

• 配置相对复杂。

状态转换图：

4. React Spring

react-spring 是一个基于物理的动画库，可以创建流畅自然的动画效果。

安装：

npm install react-spring
​

代码示例：

import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';
function ReactSpringExample() {
  const [isToggled, setIsToggled] = useState(false);
  const props = useSpring({
    opacity: isToggled ? 1 : 0,
    transform: isToggled ? 'translateX(0)' : 'translateX(-100px)',
  });
  return (
    <div>
      <button onClick={() => setIsToggled(!isToggled)}>
        Toggle Visibility
      </button>
      <animated.div style={props}>
        This is a box with React Spring.
      </animated.div>
    </div>
  );
}
export default ReactSpringExample;
​

代码详解：

• useSpring Hook 定义了动画属性，opacity 和 transform。

• 当 isToggled 为 true 时，opacity 变为 1，transform 变为 translateX(0)，从而使元素显示并移动到初始位置。

• animated.div 是 react-spring 提供的组件，用于应用动画属性。

优点：

• 基于物理的动画，效果流畅自然。

• API 简洁易用。

• 可以创建复杂的动画效果。

缺点：

• 需要引入额外的库。

• 学习曲线相对较陡峭。

5. Framer Motion

framer-motion 是一个流行的动画库，提供了丰富的动画功能和手势支持。

安装：

npm install framer-motion
​

代码示例：

import React, { useState } from 'react';
import { motion } from 'framer-motion';
function FramerMotionExample() {
  const [isToggled, setIsToggled] = useState(false);
  return (
    <div>
      <button onClick={() => setIsToggled(!isToggled)}>
        Toggle Visibility
      </button>
      <motion.div
        animate={{
          opacity: isToggled ? 1 : 0,
          x: isToggled ? 0 : -100,
        }}
        transition={{ duration: 0.5 }}
      >
        This is a box with Framer Motion.
      </motion.div>
    </div>
  );
}
export default FramerMotionExample;
​

代码详解：

• motion.div 是 framer-motion 提供的组件，用于应用动画。

• animate 属性定义了动画的目标状态，opacity 和 x。

• transition 属性定义了过渡的配置，duration 为 0.5 秒。

优点：

• 功能强大，支持各种动画效果和手势。

• API 简洁易用。

• 与 React 组件紧密结合。

缺点：

• 需要引入额外的库。

• 包体积相对较大。

6. GSAP (GreenSock Animation Platform)

GSAP 是一个功能强大的 JavaScript 动画库，提供了高度的灵活性和控制力。虽然它不是专门为 React 设计的，但可以与 React 集成使用。

安装：

npm install gsap
​

代码示例：

import React, { useRef, useEffect, useState } from 'react';
import gsap from 'gsap';
function GSAPExample() {
  const boxRef = useRef(null);
  const [isToggled, setIsToggled] = useState(false);
  useEffect(() => {
    gsap.to(boxRef.current, {
      duration: 0.5,
      x: isToggled ? 0 : -100,
      opacity: isToggled ? 1 : 0,
    });
  }, [isToggled]);
  return (
    <div>
      <button onClick={() => setIsToggled(!isToggled)}>
        Toggle Visibility
      </button>
      <div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'purple' }}>
        This is a box with GSAP.
      </div>
    </div>
  );
}
export default GSAPExample;
​

代码详解：

• useRef Hook 用于获取 box 元素的引用。

• useEffect Hook 监听 isToggled 状态的变化，并在状态变化时执行 GSAP 动画。

• gsap.to 方法定义了动画的目标状态，x 和 opacity。

优点：

• 功能极其强大，可以实现各种复杂的动画效果。

• 高度的灵活性和控制力。

• 性能良好。

缺点：

• 学习曲线较陡峭。

• 需要手动管理动画的生命周期。

• 与 React 的集成相对复杂。

总结

React 中实现动画的方式有很多种，选择哪种方式取决于项目的具体需求和复杂度。

• CSS 过渡和动画 适用于简单的状态变化和动画效果。

• React Transition Group 适用于管理组件的进入和退出过渡。

• React Spring 和 Framer Motion 适用于创建流畅自然的动画效果。

• GSAP 适用于需要高度灵活性和控制力的复杂动画。

希望这篇文章能够帮助你更好地理解 React 动画的进阶技巧和实践案例。记住，选择合适的动画库或技术，并根据具体需求进行调整，才能打造出令人惊艳的用户体验。