# @dloizides/ui-motion 中文文档
规范地址：https://npmcn.com/package/%40dloizides/ui-motion/
版本：1\.6\.0
npm 元数据更新时间：2026-11-09T23:05:52.151Z
中文译文更新时间：2026-11-12T12:50:12.139Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40dloizides/ui-motion
原文对照：https://npmcn.com/package/%40dloizides/ui-motion/?lang=original
项目主页：https://github.com/openmindednewby/ui-motion#readme
源码仓库：https://github.com/openmindednewby/ui-motion
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：1.1 MB，30 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18\.0\.0
- 运行依赖：3 个
- peer 依赖：react \>=18\.0\.0，react-native \>=0\.74\.0，react-native-webview \>=13\.0\.0
- 首次发布：2026-08-01T22:21:29.531Z
- 最新版本发布：2026-11-09T23:05:51.978Z
- 近 30 天下载量：2672（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：9（近 12 个月 9 个）
## 中文简介
由@dloizides/design-tokens 运动标志所驱动
## 安装
```sh
npm install @dloizides/ui-motion
```
也可以使用：`pnpm add @dloizides/ui-motion`、`yarn add @dloizides/ui-motion`、`bun add @dloizides/ui-motion`
## README
# @dloizides/ui-motion (英语)
名副其实的 **原生反应( RN- web)** 运动原始人——共享 dloizides.com UI工具包的动画层.
- 建于 RN 上 `Animated` 只有这个. **没有** 被重新激活 / moti / 帧 .
- 本地本地司机,网上联署材料司机`useNativeDriver: Platform.OS !== 'web'`) (中文(简体) ).
- **每出动画都会在用户喜欢减少动作时崩溃到瞬间** (单位:千美元)`useReducedMotion()`,从 `@dloizides/rn-web-hooks`) (中文(简体) ).
- 运动值(期限+放松)来自 `@dloizides/design-tokens`网络 (预算外) `cubic-bezier`)和土生土长(`Easing.bezier`动画 **相同的曲线**。 。 。 .
## 安装
```bash
npm install @dloizides/ui-motion
```
端点 : `react >=18`, (中文(简体) ), `react-native >=0.74`。运行时道克 `@dloizides/design-tokens` 财务报告和审定财务报表 `@dloizides/rn-web-hooks` 自动安装.
## 键
```ts
import { motionDurations, motionEasings, DEFAULT_MOTION } from '@dloizides/ui-motion';
motionDurations; // { instant: 0, fast: 140, base: 200, slow: 300 } (ms)
motionEasings.standard; // RN EasingFunction built from cubic-bezier(0.2,0,0,1)
motionEasings.decelerate; // entering elements
motionEasings.accelerate; // leaving elements
DEFAULT_MOTION.easings.standard.css; // 'cubic-bezier(0.2,0,0,1)' for web/CSS consumers
```
## 钩子
### `useReducedMotion()` 编号 : `prefersReducedMotion()`
从 `@dloizides/rn-web-hooks` (克能克之门——不是要塞). 网络读取 `matchMedia('(prefers-reduced-motion: reduce)')`; 本地回归 `false`。 。 。 .
### `useEnterExit({ visible, duration?, translateY?, fromScale? })`
可重复使用的出/入模式(取消+可选翻译/比例) `ui-feedback`敬酒厅 返回动画 `style` **财务报告和审定财务报表** (单位:千美元) `mounted` 因此,旗帜 节点留在树上直到其退出动画完成.
```tsx
const { style, mounted } = useEnterExit({ visible: open, translateY: -6 });
if (!mounted) return null;
return {children};
```
### `useFocusLift(focused, spring, { scale?, lift? })`
弹出一个平板 `scale` (违约1.06)和 `-lift` px( 默认 8) 时 `focused`继续休息 否则。 焦点变化重定向运行的弹簧. 运动减少:无运动(信号聚焦) 以环/阴影取而代之。 展开 `style` 打开 `Animated.View`。纯目标 : `focusLiftTarget`。 。 。 .
### `useSequence(items, { totalMs, itemMs?, playKey?, playOnMount? })`
沿着固定总数中任何订购的列表串起:最后一项结束于 `totalMs` 不论时间长短 名单是. `progressAt(index)` 0 - 1 的动画值。 一个新的 `playKey` 从第一个项目重放; `playOnMount: false` 开始决赛,等待一个。 减少 动作: 每件物品同时是最后的。 输入永远不会被屏蔽:没有交互手柄,没有等待的. 纯时间 : `sequenceItemRange`。 。 。 .
## 构成部分
### ``
将孩子从右侧滑入窗口宽度 `transitionKey` 更改; 第一个 做不动静。 默认 : `motionDurations.slow`, (中文(简体) ), `motionEasings.decelerate`减少动议 直接切到内容。 路由器-不可知:通过路径名作为密钥.
```tsx
```
### ``
他们的子孙在山上.
```tsx
```
### ``
动画高度扩展/缩合 **网络工作** - 它测量内容 自然高度和动画真实 `Animated.Value` 高度( 不同于 `LayoutAnimation`, (中文(简体) ), (原始内容存档于2018-09-21) (英语). a ourn- only no-op on RN-web. 儿童留守;溢出被切断.
```tsx