# @designcombo/animations 中文文档

规范地址：https://npmcn.com/package/%40designcombo/animations/

版本：5\.5\.8
npm 元数据更新时间：2025-12-05T15:05:13.120Z
中文译文更新时间：2026-11-12T01:16:51.856Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40designcombo/animations
原文对照：https://npmcn.com/package/%40designcombo/animations/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：28.6 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：@designcombo/events ^1\.0\.2，react ^18\.2\.0，remotion ^4\.0\.0，@designcombo/types 5\.5\.8
- 首次发布：2025-09-07T01:01:25.841Z
- 最新版本发布：2025-12-05T15:05:12.917Z
- 近 30 天下载量：6051（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 12 个）

## 中文简介

一个强大的动画库,用于在React应用中管理复杂的动画序列和过渡,具有不同动画情景的专门组件.

## 安装

```sh
npm install @designcombo/animations
```

也可以使用：`pnpm add @designcombo/animations`、`yarn add @designcombo/animations`、`bun add @designcombo/animations`

## README

# @designcombo/动画

一个强大的动画库,用于在React应用中管理复杂的动画序列和过渡,具有不同动画情景的专门组件.

## 安装

```bash
npm install @designcombo/animations
# or
yarn add @designcombo/animations
# or
pnpm add @designcombo/animations
```

## 使用量

### BoxAnim 组件

带有旋转处理的标准入出动画的主要动画包装:

```tsx
import { BoxAnim } from "@designcombo/animations";

<BoxAnim
  animationIn={[
    {
      property: "opacity",
      from: 0,
      to: 1,
      durationInFrames: 30,
      ease: (t) => t,
      delay: 0
    },
    {
      property: "translateX",
      from: -100,
      to: 0,
      durationInFrames: 30,
      ease: (t) => t
    }
  ]}
  animationOut={[
    {
      property: "opacity",
      from: 1,
      to: 0,
      durationInFrames: 15,
      ease: (t) => t
    }
  ]}
  durationInFrames={60}
  frame={currentFrame}
  style={{ transform: "rotate(45deg)" }}
>
  <div>Your BoxAnim content here</div>
</BoxAnim>;
```

### 内容 Anim 组件

对于受旋转变换影响的时间动画:

```tsx
import { ContentAnim } from "@designcombo/animations";

<ContentAnim
  animationTimed={[
    {
      property: "scale",
      from: 0.8,
      to: 1.2,
      durationInFrames: 45,
      ease: (t) => t,
      persist: true
    }
  ]}
  durationInFrames={60}
  frame={currentFrame}
  style={{ width: 200, height: 200 }}
>
  <div>Content with timed animations</div>
</ContentAnim>;
```

### 马斯克阿尼姆组件

用于创建面具显示不同模式的动画:

```tsx
import { MaskAnim } from "@designcombo/animations";

<MaskAnim
  frame={currentFrame}
  item={itemData}
  keyframeAnimations={[
    {
      property: "maskRevealIn", // or "maskRevealCenterIn", "maskRevealCornerIn"
      durationInFrames: 30
    }
  ]}
>
  <div>Content that will be revealed with mask animation</div>
</MaskAnim>;
```

### 动画钩

直接访问动画计算 :

```tsx
import {
  useAnimation,
  combineAnimations,
  combine
} from "@designcombo/animations";

// Basic usage
const style = useAnimation(
  combineAnimations(animations),
  durationInFrames,
  frame,
  false // isOut
);

// Advanced usage with timed animations
const timedStyle = useAnimation(
  combineAnimations(animations),
  durationInFrames,
  frame,
  false, // isOut
  true // isTimed
);

// Combining multiple animation sources
const combinedAnimations = combine(
  animationIn,
  animationOut,
  additionalAnimations
);
```

## 动画属性

库支持各种动画属性:

-   **变形属性**数字 : `scale`, (中文(简体) ), `translateX`, (中文(简体) ), `translateY`, (中文(简体) ), `rotate`
-   **视觉属性**数字 : `opacity`
-   **特殊属性**数字 : `shake` (自动间隔)
-   **遮罩属性**数字 : `maskRevealIn`, (中文(简体) ), `maskRevealCenterIn`, (中文(简体) ), `maskRevealCornerIn`

## 动画界面

```tsx
interface Animation {
  property: keyof React.CSSProperties | string;
  from: number;
  to: number;
  durationInFrames: number;
  ease: (t: number) => number;
  delay?: number;
  persist?: boolean; // For timed animations
}
```

## 特征

-   **动画组件**: 带有旋转补偿的入出动画的主要包装
-   **内容动画构成部分**: 专为受旋转影响的时间动画制作
-   **MaskWrapper 组件**: 创建带有多种模式的掩码显示效果
-   **动画钩**: 直接访问动画计算
-   **旋转处理**: 旋转元素的自动补偿
-   **持续动画**: 对完成后持续存在的动画的支持
-   **摇动效果**: 内置自动间隔摇动动动画
-   **转换提取器**: 用于剖析和组合变换属性的公用事业
-   **业绩优化**: 有记忆的高效动画渲染
-   **类型脚本支持**: 具有全面接口的完整类型安全
-   **恢复整合**: 用于恢复视频框架的建筑

## 发展

```bash
# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build package
pnpm build

# Format code
pnpm format
```

## 许可证

麻省理工学院

## 常见问题

### @designcombo/animations 是什么？

一个强大的动画库,用于在React应用中管理复杂的动画序列和过渡,具有不同动画情景的专门组件\.

### 如何安装 @designcombo/animations？

在项目目录运行 npm install @designcombo/animations，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@designcombo/events（^1\.0\.2）、react（^18\.2\.0）、remotion（^4\.0\.0）、@designcombo/types（5\.5\.8）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @designcombo/animations 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @designcombo/animations 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @designcombo/animations 可以商用吗？

@designcombo/animations 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @designcombo/animations 的下载量有多少？

根据 npm 官方下载统计，@designcombo/animations 在 2026/10/12 – 2026/11/10 这 30 天内被下载 6,051 次，日均约 202 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @designcombo/animations 还在维护吗？

最新版本 5\.5\.8 发布于 2025/12/05（11 个月前）；至今共发布 21 个版本，其中过去 12 个月发布了 12 个；首次发布于 2025/09/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。