# @exodus/haraka 中文文档

规范地址：https://npmcn.com/package/%40exodus/haraka/

版本：0\.0\.38
npm 元数据更新时间：2026-10-06T21:00:22.706Z
中文译文更新时间：2026-11-14T04:16:15.680Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40exodus/haraka
原文对照：https://npmcn.com/package/%40exodus/haraka/?lang=original
项目主页：https://github.com/ExodusMovement/haraka#readme
源码仓库：https://github.com/ExodusMovement/haraka

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

- 包体积（解压后）：19.1 kB，4 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：react \>=16\.3\.0，react-native \*
- 首次发布：2018-11-20T15:26:23.180Z
- 最新版本发布：2022-04-04T15:43:34.310Z
- 近 30 天下载量：10431（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

React Industrial的状态动画.

## 安装

```sh
npm install @exodus/haraka
```

也可以使用：`pnpm add @exodus/haraka`、`yarn add @exodus/haraka`、`bun add @exodus/haraka`

## README

# 原开

[![npm version](https://badge.fury.io/js/%40exodus%2Fharaka.svg)](https://badge.fury.io/js/%40exodus%2Fharaka)

![](https://npmcn.com/package/%40exodus/haraka/haraka.svg)

定义组件的行为状态,然后在它们之间产生动能.

![](https://npmcn.com/package/%40exodus/haraka/examples/demos/demo1.gif)

## 使用量

```js
import Behavior from '@exodus/haraka'

box = React.createRef()

<Behavior
  ref={this.box}
  state={[
    { opacity: 1 }, // state 0, or just `{}` since the default opacity is 1
    { opacity: 0.5 }, // state 1
    { rotate: '45deg' } // state 2
    { translateX: 10, translateY: 10 } // state 3
    { scale: 1.1 } // state 4
  ]}
/>

// ..

this.box.current.goTo(1) // animates the opacity of the box from 1 to 0.5
this.box.current.goTo(2) // rotates the faded box 45 degrees
this.box.current.goTo(3) // move the tilted faded box right and down by 10 points
this.box.current.goTo(4) // scale the shifted tilted faded box by a factor of 1.1

this.box.current.goTo([1, 2, 3, 4]) // plays a sequence of behavior states

// or use the declarative API instead of `goTo()`
<Behavior currentState={0} />
<Behavior currentState={1} />
```

## 安装

```bash
yarn add @exodus/haraka
```

## 定义

```js
type DefaultConfig = { // goTo() default configuration
  type?: 'spring' | 'timing', // default = 'spring', `Animated.spring()` or `Animated.timing()`
  onComplete?: func, // to be executed once animation is completed, inside `.start()`
  delay?: number, // used to delay the start of the animation (ms)
  ref?: bool, // this will return the animation reference instead of playing it immediately
  unmount? bool, // unmount after animation ends
  // can be useful for animating multiple behaviors with `Animated.sequence()` and `Animated.parallel()`
  // `onStart` and `onComplete `are ignored when `ref` is enabled
  ...AnimatedSpringOptions, // excluding toValue, useNativeDriver (see React Native docs), spring type
  ...AnimatedTimingOptions, // excluding toValue, useNativeDriver (see React Native docs), timing type
}

type State = {
  opacity?: number, // [0, 1], default = 1
  rotate?: string, // e.g. '45deg', default = '0deg'
  scale?: number, // default = 1
  translateX?: number, // default = 0
  translateY?: number, // default = 0
  config?: DefaultConfig, // you can pass custom state config here
}

type StyleProp = {
  prop: string,
  default: string | number | null,
  transform: bool,
}

type Behavior = {
  freeze?: bool, // default = false, set to true to turn off animation completely
  config?: DefaultConfig,
  clearStyleProps?: bool, // removes all default style props on mount and utilizes whatever in `styleProps` only
  disabled?: bool, // allows disabling the behavior interactivity through pointerEvents = none
  state?: State[], // default value is [{}, {}], [{}] can be used for a static behavior
  nativeDriver?: AnimatedValue, // default = new Animated.Value(0), you can use a custom native driver
  children?: any, // behavior component can enclose other components or enclose another behavior(s)
  clamp?: bool, // default = false, prevent animations from exceeding their ranges
  keys?: number[], // can be used with custom drivers to define custom state keys/indices
  currentState?: number, // default = 0, use to declaratively toggle animation
  initialState?: number, // default = 0
  skipProps?: string[], // default = [], allows filtering passed props from being included in styles
  skipStyleProps?: string[], // default = [], allows dropping unused style props
  style?: object, // style of the behavior view, default = {}, AnimatedViewStyle (see React Native docs)
  styleProps?: StyleProp[], // default = [], allows adding any type of style props manually
  unmounted?: bool, // default = false, start behavior in the unmounted state
  // animation presets (they populate `state` prop which will be ignored):
  faded?: bool, // default = false, see below for available presets
  // layout presets (they populate `style` prop):
  absolute?: bool, // default = false, see below for available presets
  centered?: bool, // default = false
  fixed?: bool, // default = false
  full?: bool, // default = false
  landing?: bool, // default = false
}

// animation presets
const presets = {
  faded: [{ opacity: 0 }, { opacity: 1 }],
}

// layout presets, you can use multiple, along with `style` prop, they have a higher priority over it
const layoutPresets = {
  absolute: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 },
  centered: { alignSelf: 'center' },
  fixed: { position: 'absolute' },
  full: { flex: 1 },
  landing: { alignItems: 'center', flex: 1, justifyContent: 'center' },
}

// methods
// animate to a specific behavior state
behavior.goTo(index: number | number[], config?: DefaultConfig = {})

behavior.unmount() // useful for removing components that are hidden after animation
behavior.mount(state: ?number) // useful for animations that start in a hidden state
// use along with `unmounted` prop and `mount()`

behavior.key // to retrieve current state key

behavior.setNativeProps({} : Props) // gives you the ability to change props without having to re-render
```

## 实例

可用 [这里](https://npmcn.com/examples)。 。 。 .

## 常见问题

### @exodus/haraka 是什么？

React Industrial的状态动画\.

### 如何安装 @exodus/haraka？

在项目目录运行 npm install @exodus/haraka，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.3\.0）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @exodus/haraka 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/exodus\_\_haraka 是否存在。

### @exodus/haraka 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @exodus/haraka 可以商用吗？

@exodus/haraka 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @exodus/haraka 的下载量有多少？

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

### @exodus/haraka 还在维护吗？

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