神奇代码岛 React UI 动画库

适用于 神岛 Arena 客户端 UI 的轻量 motion 动画库。

使用前提：

• 需在 React 项目中使用。
• 需配合 @dao3fun/react-ui 的组件一起使用：https://www.npmjs.com/package/@dao3fun/react-ui

详细教程：https://docs.box3lab.com/arenapro/zh/react-motion

该包提供：

• useMotion：基于关键帧的样式动画（支持缓动、循环、yoyo、外部进度驱动）。
• useTimeline：轻量时间轴（setInterval 驱动），用于手动/自动推进进度。
• useMotionOrchestrator：编排多个 motion（parallel/sequence/stagger），并返回可取消的播放句柄。

安装

npm install @dao3fun/react-motion

快速上手

import React from 'react';
import { Box } from '@dao3fun/react-ui';
import { useMotion } from '@dao3fun/react-motion';

export function App() {
  const [style] = useMotion({
    to: [
      { value: { backgroundOpacity: 0 }, duration: 200, ease: 'quadOut' },
      { value: { backgroundOpacity: 1 }, duration: 300, ease: 'easeOut' },
    ],
    autoPlay: true,
  });

  return <Box style={style} />;
}

TypeScript

该包基于 TypeScript 编写，并提供类型定义（EasingFn、MotionKeyframe、UseMotionOptions 等）。