在 React 中使用

在 React 中使用 Anime.js 很简单，只需要结合 React 的 useEffect() 和 Anime.js 的 createScope() 方法即可。

下面的示例展示了如何在 React 代码中直接使用 Anime.js 的方法。

React 示例代码

JavaScript + HTML：

import { animate, createScope, createSpring, createDraggable } from 'animejs';
import { useEffect, useRef, useState } from 'react';
import reactLogo from './assets/react.svg';
import './App.css';
function App() {
  const root = useRef(null);
  const scope = useRef(null);
  const [ rotations, setRotations ] = useState(0);
  useEffect(() => {
    scope.current = createScope({ root }).add(scope => {
      // 所有在这里创建的 anime.js 实例都会被绑定到 <div ref={root}> 上
      // 创建一个带有弹性效果的循环动画
      animate('.logo', {
        scale: [
          { to: 1.25, ease: 'inOut(3)', duration: 200 },
          { to: 1, ease: createSpring({ stiffness: 300 }) }
        ],
        loop: true,
        loopDelay: 250,
      });
      // 让 logo 能够以中心点拖拽
      createDraggable('.logo', {
        container: [0, 0, 0, 0],
        releaseEase: createSpring({ stiffness: 200 })
      });
      // 注册一个动画方法供外部调用
      scope.add('rotateLogo', (i) => {
        animate('.logo', {
          rotate: i * 360,
          ease: 'out(4)',
          duration: 1500,
        });
      });
    });
    // 在组件卸载时清理所有 scope 中的 anime.js 实例
    return () => scope.current.revert()
  }, []);
  const handleClick = () => {
    const i = rotations + 1;
    setRotations(i);
    // 点击按钮时调用 scope 中注册的旋转动画方法
    scope.current.methods.rotateLogo(i);
  };
  return (
    <div ref={root}>
      <div className="large centered row">
        <img src={reactLogo} className="logo react" alt="React logo" />
      </div>
      <div className="medium row">
        <fieldset className="controls">
          <button onClick={handleClick}>rotations: {rotations}</button>
        </fieldset>
      </div>
    </div>
  )
}
export default App;