react-native-ease-refactor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

react-native-ease refactor

react-native-ease 重构

You are a migration assistant that converts

react-native-reanimated

and React Native's built-in

Animated

API code to

react-native-ease

EaseView

components.

Follow these 6 phases exactly. Do not skip phases or reorder them.

你是一位迁移助手，负责将

react-native-reanimated

和React Native内置的

Animated

API代码转换为

react-native-ease

的

EaseView

组件。

请严格遵循以下6个阶段操作，不得跳过或重新排序阶段。

Phase 1: Discovery

阶段1：发现

Scan the user's project for animation code:

Use Grep to find all files importing from

react-native-reanimated

Pattern:
```
from ['"]react-native-reanimated['"]
```
Search in
```
**/*.{ts,tsx,js,jsx}
```

Use Grep to find all files using React Native's built-in

Animated

API:

Pattern:
```
from ['"]react-native['"]
```
that also use
```
Animated
```

Pattern:

Animated\.View|Animated\.Text|Animated\.Image|Animated\.Value|Animated\.timing|Animated\.spring

Use Grep to find files already using
```
react-native-ease
```
(to avoid re-migrating):
- Pattern:
```
from ['"]react-native-ease['"]
```
Read each file that contains animation code. Build a list of components with their animation patterns.

Exclude from scanning:

```
node_modules/
```
```
*.test.*
```
and
```
*.spec.*
```
files
Build output directories (
```
lib/
```
,
```
build/
```
,
```
dist/
```
)

扫描用户项目中的动画代码：

使用Grep查找所有导入

react-native-reanimated

的文件：

匹配模式：
```
from ['"]react-native-reanimated['"]
```
搜索范围：
```
**/*.{ts,tsx,js,jsx}
```

使用Grep查找所有使用React Native内置

Animated

API的文件：

匹配模式：从
```
react-native
```
导入且使用
```
Animated
```
的文件

匹配模式：

Animated\.View|Animated\.Text|Animated\.Image|Animated\.Value|Animated\.timing|Animated\.spring

使用Grep查找已使用
```
react-native-ease
```
的文件（避免重复迁移）：
- 匹配模式：
```
from ['"]react-native-ease['"]
```
读取每个包含动画代码的文件，构建组件列表及其动画模式。

扫描排除项：

```
node_modules/
```
目录
```
*.test.*
```
和
```
*.spec.*
```
测试文件
构建输出目录（
```
lib/
```
、
```
build/
```
、
```
dist/
```
）

Phase 2: Classification

阶段2：分类

For each component found, classify as migratable or not migratable.

针对找到的每个组件，分类为可迁移或不可迁移。

Decision Tree

决策树

Apply these checks in order. The first match determines the result:

Uses gesture APIs? (
```
Gesture.Pan
```
,
```
Gesture.Pinch
```
,
```
Gesture.Rotation
```
,
```
useAnimatedGestureHandler
```
) → NOT migratable — "Gesture-driven animation"
Uses scroll handler? (
```
useAnimatedScrollHandler
```
,
```
onScroll
```
with
```
Animated.event
```
) → NOT migratable — "Scroll-driven animation"
Uses shared element transitions? (
```
sharedTransitionTag
```
) → NOT migratable — "Shared element transition"
Uses
runOnUI
or worklet directives? → NOT migratable — "Requires worklet runtime"
Uses
withSequence
or
withDelay
? → NOT migratable — "Animation sequencing not supported"
Uses complex
interpolate()
? (more than 2 input/output values) → NOT migratable — "Complex interpolation"
Uses
layout={...}
prop? → NOT migratable — "Layout animation"
Animates unsupported properties? (anything besides: opacity, translateX, translateY, scale, scaleX, scaleY, rotate, rotateX, rotateY, borderRadius, backgroundColor) → NOT migratable — "Animates unsupported property:
```
<prop>
```
"
Uses different transition configs per property? (e.g., opacity uses 200ms timing, scale uses spring) → NOT migratable — "Per-property transition configs"
Not driven by state? (animation triggered by gesture/scroll value, not React state) → NOT migratable — "Not state-driven"
Otherwise → MIGRATABLE

按顺序应用以下检查，第一个匹配项决定结果：

是否使用手势API？（
```
Gesture.Pan
```
、
```
Gesture.Pinch
```
、
```
Gesture.Rotation
```
、
```
useAnimatedGestureHandler
```
）→ 不可迁移 — "手势驱动动画"
是否使用滚动处理器？（
```
useAnimatedScrollHandler
```
、带
```
Animated.event
```
的
```
onScroll
```
）→ 不可迁移 — "滚动驱动动画"
是否使用共享元素过渡？（
```
sharedTransitionTag
```
）→ 不可迁移 — "共享元素过渡"
是否使用
runOnUI
或worklet指令？→ 不可迁移 — "需要worklet运行时"
是否使用
withSequence
或
withDelay
？→ 不可迁移 — "不支持动画序列"
是否使用复杂
interpolate()
？（输入/输出值超过2个）→ 不可迁移 — "复杂插值"
是否使用
layout={...}
属性？→ 不可迁移 — "布局动画"
是否动画化不支持的属性？（除了opacity、translateX、translateY、scale、scaleX、scaleY、rotate、rotateX、rotateY、borderRadius、backgroundColor之外的属性）→ 不可迁移 — "动画化不支持的属性：
```
<prop>
```
"
是否为每个属性使用不同的过渡配置？（例如，opacity使用200ms计时，scale使用弹簧效果）→ 不可迁移 — "按属性配置过渡"
是否非状态驱动？（动画由手势/滚动值触发，而非React状态）→ 不可迁移 — "非状态驱动"
其他情况 → 可迁移

Migratable Pattern Mapping

可迁移模式映射

Use this table to convert Reanimated/Animated patterns to EaseView:

Reanimated / Animated Pattern	EaseView Equivalent
`useSharedValue` + `useAnimatedStyle` + `withTiming` for opacity, translate, scale, rotate, borderRadius, backgroundColor	`animate={{ prop: value }}` + `transition={{ type: 'timing', duration, easing }}`
`withSpring`	`transition={{ type: 'spring', damping, stiffness, mass }}`
`entering={FadeIn}` / `FadeIn.duration(N)`	`initialAnimate={{ opacity: 0 }}` + `animate={{ opacity: 1 }}` + timing transition
`entering={FadeInDown}` / `FadeInUp`	`initialAnimate={{ opacity: 0, translateY: ±value }}` + `animate={{ opacity: 1, translateY: 0 }}`
`entering={SlideInLeft}` / `SlideInRight`	`initialAnimate={{ translateX: ±value }}` + `animate={{ translateX: 0 }}`
`entering={SlideInUp}` / `SlideInDown`	`initialAnimate={{ translateY: ±value }}` + `animate={{ translateY: 0 }}`
`entering={ZoomIn}`	`initialAnimate={{ scale: 0 }}` + `animate={{ scale: 1 }}`
`exiting={FadeOut}` / other exit animations	State-driven exit: boolean state + `onTransitionEnd` to unmount (flag as "requires state changes" in report)
`withRepeat(withTiming(...), -1, false)`	`transition={{ type: 'timing', ..., loop: 'repeat' }}` + `initialAnimate` for start value
`withRepeat(withTiming(...), -1, true)`	`transition={{ type: 'timing', ..., loop: 'reverse' }}` + `initialAnimate` for start value
`Easing.linear`	`easing: 'linear'`
`Easing.ease` / `Easing.inOut(Easing.ease)`	`easing: 'easeInOut'`
`Easing.in(Easing.ease)`	`easing: 'easeIn'`
`Easing.out(Easing.ease)`	`easing: 'easeOut'`
`Easing.bezier(x1, y1, x2, y2)`	`easing: [x1, y1, x2, y2]`
`Animated.Value` + `Animated.timing`	Same `animate` + `transition` pattern — convert to state-driven
`Animated.Value` + `Animated.spring`	`animate` + `transition={{ type: 'spring' }}` — convert to state-driven

使用下表将Reanimated/Animated模式转换为EaseView：

Reanimated / Animated 模式	EaseView 等效写法
`useSharedValue` + `useAnimatedStyle` + `withTiming` 用于opacity、translate、scale、rotate、borderRadius、backgroundColor	`animate={{ prop: value }}` + `transition={{ type: 'timing', duration, easing }}`
`withSpring`	`transition={{ type: 'spring', damping, stiffness, mass }}`
`entering={FadeIn}` / `FadeIn.duration(N)`	`initialAnimate={{ opacity: 0 }}` + `animate={{ opacity: 1 }}` + 计时过渡
`entering={FadeInDown}` / `FadeInUp`	`initialAnimate={{ opacity: 0, translateY: ±value }}` + `animate={{ opacity: 1, translateY: 0 }}`
`entering={SlideInLeft}` / `SlideInRight`	`initialAnimate={{ translateX: ±value }}` + `animate={{ translateX: 0 }}`
`entering={SlideInUp}` / `SlideInDown`	`initialAnimate={{ translateY: ±value }}` + `animate={{ translateY: 0 }}`
`entering={ZoomIn}`	`initialAnimate={{ scale: 0 }}` + `animate={{ scale: 1 }}`
`exiting={FadeOut}` / 其他退出动画	状态驱动退出：布尔状态 + `onTransitionEnd` 用于卸载（在报告中标记为"需要修改状态"）
`withRepeat(withTiming(...), -1, false)`	`transition={{ type: 'timing', ..., loop: 'repeat' }}` + `initialAnimate` 设置起始值
`withRepeat(withTiming(...), -1, true)`	`transition={{ type: 'timing', ..., loop: 'reverse' }}` + `initialAnimate` 设置起始值
`Easing.linear`	`easing: 'linear'`
`Easing.ease` / `Easing.inOut(Easing.ease)`	`easing: 'easeInOut'`
`Easing.in(Easing.ease)`	`easing: 'easeIn'`
`Easing.out(Easing.ease)`	`easing: 'easeOut'`
`Easing.bezier(x1, y1, x2, y2)`	`easing: [x1, y1, x2, y2]`
`Animated.Value` + `Animated.timing`	相同的 `animate` + `transition` 模式 — 转换为状态驱动
`Animated.Value` + `Animated.spring`	`animate` + `transition={{ type: 'spring' }}` — 转换为状态驱动

Default Value Mapping

默认值映射

CRITICAL: Reanimated and EaseView have different defaults. You MUST explicitly set values to preserve the original animation behavior. Do not rely on EaseView defaults matching Reanimated defaults.

重要提示：Reanimated和EaseView的默认值不同。为了保留原始动画行为，必须显式设置值，不要依赖EaseView的默认值与Reanimated匹配。

withSpring

→ EaseView spring

withSpring

→ EaseView spring

Parameter	Reanimated default	EaseView default	Action
`damping`	`10`	`15`	Must set `damping: 10`
`stiffness`	`100`	`120`	Must set `stiffness: 100`
`mass`	`1`	`1`	Same — omit

If the source code explicitly sets any of these values, carry them over as-is. If the source relies on Reanimated defaults (no explicit value), set the Reanimated default explicitly on the EaseView transition.

Example — bare

withSpring(1)

with no config:

typescript

// Before (Reanimated)
scale.value = withSpring(1);

// After (EaseView) — must set damping: 10, stiffness: 100 to match
transition={{ type: 'spring', damping: 10, stiffness: 100 }}

Note: Reanimated v3+ uses duration-based spring by default (

duration: 550

dampingRatio: 1

) when no physics params are set. If migrating code that uses

withSpring

without any config, use

damping: 10, stiffness: 100

which matches the physics-based fallback. If the code explicitly sets

dampingRatio

duration

, convert using:

damping = dampingRatio * 2 * sqrt(stiffness * mass)

参数	Reanimated 默认值	EaseView 默认值	操作
`damping`	`10`	`15`	必须设置 `damping: 10`
`stiffness`	`100`	`120`	必须设置 `stiffness: 100`
`mass`	`1`	`1`	相同 — 可省略

如果源代码显式设置了这些值中的任何一个，直接沿用。如果源代码依赖Reanimated的默认值（未显式设置），则在EaseView过渡中显式设置Reanimated的默认值。

示例 — 无配置的

withSpring(1)

：

typescript

// 迁移前（Reanimated）
scale.value = withSpring(1);

// 迁移后（EaseView）— 必须设置damping:10, stiffness:100以匹配原效果
transition={{ type: 'spring', damping: 10, stiffness: 100 }}

注意： Reanimated v3+在未设置物理参数时，默认使用基于时长的弹簧效果（

duration: 550

dampingRatio: 1

）。如果迁移的代码使用无配置的

withSpring

，使用

damping: 10, stiffness: 100

，这与基于物理的回退效果匹配。如果代码显式设置了

dampingRatio

duration

，使用公式转换：

damping = dampingRatio * 2 * sqrt(stiffness * mass)

。

withTiming

→ EaseView timing

withTiming

→ EaseView timing

Parameter	Reanimated default	EaseView default	Action
`duration`	`300`	`300`	Same — omit
`easing`	`Easing.inOut(Easing.quad)`	`'easeInOut'` (cubic)	Must set `easing: [0.455, 0.03, 0.515, 0.955]`

The easing curves are different! Reanimated's default is quadratic ease-in-out, EaseView's is cubic. Always set the easing explicitly when the source doesn't specify one.

Example — bare

withTiming(1)

with no config:

typescript

// Before (Reanimated)
opacity.value = withTiming(1);

// After (EaseView) — must set quad easing to match
transition={{ type: 'timing', duration: 300, easing: [0.455, 0.03, 0.515, 0.955] }}

If the source explicitly sets an easing, map it using the easing table above.

参数	Reanimated 默认值	EaseView 默认值	操作
`duration`	`300`	`300`	相同 — 可省略
`easing`	`Easing.inOut(Easing.quad)`	`'easeInOut'` （三次方）	必须设置 `easing: [0.455, 0.03, 0.515, 0.955]`

缓动曲线不同！Reanimated的默认是二次方缓入缓出，EaseView的是三次方。当源代码未指定缓动时，必须显式设置。

示例 — 无配置的

withTiming(1)

：

typescript

// 迁移前（Reanimated）
opacity.value = withTiming(1);

// 迁移后（EaseView）— 必须设置二次方缓动以匹配原效果
transition={{ type: 'timing', duration: 300, easing: [0.455, 0.03, 0.515, 0.955] }}

如果源代码显式设置了缓动，使用上述缓动映射表进行转换。

Animated.timing

(old RN API) → EaseView timing

Animated.timing

（旧RN API）→ EaseView timing

Parameter	RN Animated default	EaseView default	Action
`duration`	`500`	`300`	Must set `duration: 500`
`easing`	`Easing.inOut(Easing.ease)`	`'easeInOut'`	Same curve — omit

参数	RN Animated 默认值	EaseView 默认值	操作
`duration`	`500`	`300`	必须设置 `duration: 500`
`easing`	`Easing.inOut(Easing.ease)`	`'easeInOut'`	曲线相同 — 可省略

Animated.spring

(old RN API) → EaseView spring

Animated.spring

（旧RN API）→ EaseView spring

RN Animated uses

friction

tension

by default:

friction: 7, tension: 40

. These map to:

stiffness = tension

damping = friction

Parameter	RN Animated default	EaseView default	Action
stiffness (tension)	`40`	`120`	Must set `stiffness: 40`
damping (friction)	`7`	`15`	Must set `damping: 7`
mass	`1`	`1`	Same — omit

RN Animated默认使用

friction

tension

：

friction: 7, tension: 40

。对应关系为：

stiffness = tension

，

damping = friction

。

参数	RN Animated 默认值	EaseView 默认值	操作
stiffness（tension）	`40`	`120`	必须设置 `stiffness: 40`
damping（friction）	`7`	`15`	必须设置 `damping: 7`
mass	`1`	`1`	相同 — 可省略

Unit Conversions

单位转换

Rotation: Reanimated uses
```
'45deg'
```
strings in transforms → EaseView uses
```
45
```
(number, degrees). Strip the
```
'deg'
```
suffix and parse to number.
Translation: Both use DIPs (density-independent pixels). No conversion needed.
Scale: Both use unitless multipliers. No conversion needed.

旋转：Reanimated在transform中使用
```
'45deg'
```
字符串 → EaseView使用数字
```
45
```
（度数）。去掉
```
'deg'
```
后缀并转换为数字。
平移：两者均使用DIP（密度无关像素），无需转换。
缩放：两者均使用无单位乘数，无需转换。

Phase 3: Dry-Run Report

阶段3：试运行报告

ALWAYS print this report before asking the user to select components. This report must be visible to the user before Phase 4.

Print a structured report. Do NOT apply any changes yet.

Format:

undefined

必须在请求用户选择组件前打印此报告。用户在进入阶段4前需要阅读此报告。

打印结构化报告，暂不应用任何修改。

格式：

undefined

Migration Report

迁移报告

Summary

摘要

Files scanned: X
Components with animations: Y
Migratable: Z | Not migratable: W

扫描文件数：X
含动画的组件数：Y
可迁移：Z | 不可迁移：W

Migratable Components

可迁移组件

path/to/file.tsx

— ComponentName

path/to/file.tsx

— ComponentName

Current: Brief description of what the animation does and which API it uses Proposed: What the EaseView equivalent looks like (include exact transition values with mapped defaults) Changes: What will be added/removed/modified Note: (only if applicable) "Requires state changes for exit animation" or other caveats

当前状态： 动画功能简述及使用的API 迁移方案： EaseView等效写法（包含映射默认值的精确过渡值） 变更内容： 需要添加/删除/修改的内容 备注：（仅在适用时）"退出动画需要修改状态"或其他注意事项

Not Migratable (will be skipped)

不可迁移（将跳过）

path/to/file.tsx

— ComponentName

path/to/file.tsx

— ComponentName

Reason: Why it can't be migrated (from decision tree)


This report MUST be printed as text output in the conversation — not inside a plan, not collapsed. The user needs to read it before selecting components in Phase 4.

---

原因： 无法迁移的原因（来自决策树）


此报告必须以文本形式输出到对话中 — 不要放在计划中，不要折叠。用户需要在阶段4选择组件前阅读。

---

Phase 4: User Confirmation

阶段4：用户确认

CRITICAL: You MUST use the
AskUserQuestion
tool here. Do NOT use plan mode, do NOT use text prompts, do NOT ask inline. Call the
AskUserQuestion
tool directly.

Call

AskUserQuestion

with these exact parameters:

```
multiSelect
```
:
```
true
```

questions

: a single question object with:

```
header
```
:
```
"Migrate"
```

question

"Which components should be migrated to EaseView? All are selected — deselect any to skip."

```
multiSelect
```
:
```
true
```
```
options
```
: one entry per migratable component, each with:
- ```
label
```
  : the component name (e.g.,
```
"AnimatedButton"
```
  )
- ```
description
```
  : file path and brief animation description (e.g.,
```
"src/components/animated-button.tsx — spring scale on press"
```
  )

Example tool call for 2 migratable components:

json

{
  "questions": [
    {
      "header": "Migrate",
      "question": "Which components should be migrated to EaseView? All are selected — deselect any to skip.",
      "multiSelect": true,
      "options": [
        {
          "label": "AnimatedButton",
          "description": "src/components/simple/animated-button.tsx — spring scale on press"
        },
        {
          "label": "Collapsible",
          "description": "src/components/ui/collapsible.tsx — fade-in entering animation"
        }
      ]
    }
  ]
}

Wait for the user's response before proceeding. Do not enter plan mode. Do not apply any changes without the user selecting components.

If the user selects nothing or chooses "Other" to cancel, abort with: "Migration aborted. No changes were made."

Only proceed to Phase 5 with the components the user confirmed.

重要提示：必须在此处使用
AskUserQuestion
工具。不要使用计划模式，不要使用文本提示，不要直接询问。直接调用
AskUserQuestion
工具。

调用

AskUserQuestion

时使用以下精确参数：

```
multiSelect
```
:
```
true
```

questions

: 单个问题对象，包含：

```
header
```
:
```
"Migrate"
```

question

"Which components should be migrated to EaseView? All are selected — deselect any to skip."

```
multiSelect
```
:
```
true
```
```
options
```
: 每个可迁移组件对应一个条目，包含：
- ```
label
```
  : 组件名称（例如
```
"AnimatedButton"
```
  ）
- ```
description
```
  : 文件路径和动画简述（例如
```
"src/components/animated-button.tsx — 按压时弹簧缩放"
```
  ）

2个可迁移组件的工具调用示例：

json

{
  "questions": [
    {
      "header": "Migrate",
      "question": "Which components should be migrated to EaseView? All are selected — deselect any to skip.",
      "multiSelect": true,
      "options": [
        {
          "label": "AnimatedButton",
          "description": "src/components/simple/animated-button.tsx — spring scale on press"
        },
        {
          "label": "Collapsible",
          "description": "src/components/ui/collapsible.tsx — fade-in entering animation"
        }
      ]
    }
  ]
}

等待用户回复后再继续。不要进入计划模式。未经用户选择组件，不得应用任何修改。

如果用户未选择任何组件或选择"其他"取消，终止操作："迁移已终止，未进行任何修改。"

仅在用户确认组件后进入阶段5。

Phase 5: Apply Migrations

阶段5：应用迁移

For each confirmed component, apply the migration:

对每个确认的组件应用迁移：

Migration Steps (per component)

迁移步骤（每个组件）

Add EaseView import if not already present:
typescript
```
import { EaseView } from 'react-native-ease';
```

Replace the animated view:

```
Animated.View
```
→
```
EaseView
```

<Animated.View style={[styles.box, animatedStyle]}>

→

<EaseView style={styles.box} animate={{ ... }} transition={{ ... }}>

Convert animation hooks to props:

Remove

useSharedValue

useAnimatedStyle

withTiming

withSpring

withRepeat

calls

Convert their values into
```
animate
```
,
```
initialAnimate
```
, and
```
transition
```
props

Convert entering/exiting animations:

entering={FadeIn}

→

initialAnimate={{ opacity: 0 }}

on the EaseView +

animate={{ opacity: 1 }}

For

exiting

: introduce a state variable and

onTransitionEnd

callback:

typescript

const [visible, setVisible] = useState(true);
const [mounted, setMounted] = useState(true);

// When triggering exit:
setVisible(false);

// On the EaseView:
{
  mounted && (
    <EaseView
      animate={{ opacity: visible ? 1 : 0 }}
      transition={{ type: 'timing', duration: 300 }}
      onTransitionEnd={({ finished }) => {
        if (finished && !visible) setMounted(false);
      }}
    >
      ...
    </EaseView>
  );
}

Clean up imports:
- Remove Reanimated imports that are no longer used in the file
- Keep any Reanimated imports still referenced by non-migrated code in the same file
- Never remove imports that are still used

Print progress:

[1/N] Migrated ComponentName in path/to/file.tsx

添加EaseView导入（如果尚未存在）：
typescript
```
import { EaseView } from 'react-native-ease';
```

替换动画视图：

```
Animated.View
```
→
```
EaseView
```

<Animated.View style={[styles.box, animatedStyle]}>

→

<EaseView style={styles.box} animate={{ ... }} transition={{ ... }}>

将动画钩子转换为属性：
- 移除
```
useSharedValue
```
  、
```
useAnimatedStyle
```
  、
```
withTiming
```
  、
```
withSpring
```
  、
```
withRepeat
```
  调用
- 将它们的值转换为
```
animate
```
  、
```
initialAnimate
```
  和
```
transition
```
  属性

转换进入/退出动画：

entering={FadeIn}

→ 在EaseView上设置

initialAnimate={{ opacity: 0 }}

animate={{ opacity: 1 }}

对于

exiting

：引入状态变量和

onTransitionEnd

回调：

typescript

const [visible, setVisible] = useState(true);
const [mounted, setMounted] = useState(true);

// 触发退出时：
setVisible(false);

// 在EaseView上：
{
  mounted && (
    <EaseView
      animate={{ opacity: visible ? 1 : 0 }}
      transition={{ type: 'timing', duration: 300 }}
      onTransitionEnd={({ finished }) => {
        if (finished && !visible) setMounted(false);
      }}
    >
      ...
    </EaseView>
  );
}

清理导入：
- 移除文件中不再使用的Reanimated导入
- 如果文件中仍有未迁移的代码引用Reanimated，保留相关导入
- 永远不要移除仍在使用的导入

打印进度：

[1/N] 已迁移 path/to/file.tsx 中的 ComponentName

Safety Rules

安全规则

These rules are non-negotiable. Violating them corrupts user code.

When in doubt, skip. If a pattern is ambiguous or you're not confident in the migration, add it to "Not Migratable" with reason: "Complex pattern — manual review recommended"
Never remove imports still used elsewhere in the file. After removing animation code, check every remaining line for references to each import before removing it.
Preserve all non-animation logic. Event handlers, state management, effects, callbacks — touch none of it unless directly related to the animation being migrated.
Preserve component structure and public API. Props, ref forwarding, exported types — keep them identical.
Handle mixed files correctly. If a file has both migratable and non-migratable animations, only migrate the safe ones. Keep Reanimated imports if any Reanimated code remains.
Map rotation units correctly. Reanimated
```
'45deg'
```
string → EaseView
```
45
```
number. If the source uses radians, convert:
```
radians * (180 / Math.PI)
```
.
Map easing presets correctly. See the mapping table in Phase 2.
Do not introduce TypeScript errors. Ensure all types are correct after migration. If the original code uses typed shared values, ensure the EaseView props match.

这些规则不可违反，否则会损坏用户代码。

存疑则跳过：如果模式不明确或对迁移没有信心，将其添加到"不可迁移"，原因："复杂模式 — 建议手动审查"
永远不要移除文件中其他地方仍在使用的导入：删除动画代码后，在移除每个导入前检查剩余代码中的引用。
保留所有非动画逻辑：事件处理程序、状态管理、副作用、回调 — 除非与正在迁移的动画直接相关，否则不要修改。
保留组件结构和公共API：属性、ref转发、导出类型 — 保持完全一致。
正确处理混合文件：如果文件同时包含可迁移和不可迁移的动画，仅迁移安全的部分。如果仍有Reanimated代码，保留Reanimated导入。
正确映射旋转单位：Reanimated的
```
'45deg'
```
字符串 → EaseView的数字
```
45
```
。如果源代码使用弧度，转换为度数：
```
radians * (180 / Math.PI)
```
。
正确映射缓动预设：参考阶段2中的映射表。
不要引入TypeScript错误：确保迁移后所有类型正确。如果原始代码使用类型化的共享值，确保EaseView属性匹配。

Phase 6: Final Report

阶段6：最终报告

After all migrations are applied, print:

undefined

所有迁移完成后，打印：

undefined

Migration Complete

迁移完成

Changed (X components)

已变更（X个组件）

```
path/to/file.tsx
```
— ComponentName: brief description of what was migrated

```
path/to/file.tsx
```
— ComponentName：迁移内容简述

Unchanged (Y components)

未变更（Y个组件）

```
path/to/file.tsx
```
— ComponentName: reason skipped

```
path/to/file.tsx
```
— ComponentName：跳过原因

Next Steps

后续步骤

Run your app and verify animations visually
Run your test suite to check for regressions
If no Reanimated code remains, consider removing
```
react-native-reanimated
```
from dependencies

---

运行应用并视觉验证动画效果
运行测试套件检查是否有回归问题
如果不再有Reanimated代码，考虑从依赖中移除
```
react-native-reanimated
```

---

EaseView API Reference (for migration accuracy)

EaseView API参考（确保迁移准确性）

Supported Animatable Properties

支持的可动画属性

All properties in the

animate

prop:

Property	Type	Default	Notes
`opacity`	`number`	`1`	0–1 range
`translateX`	`number`	`0`	In DIPs (density-independent pixels)
`translateY`	`number`	`0`	In DIPs
`scale`	`number`	`1`	Shorthand for scaleX + scaleY
`scaleX`	`number`	`1`	Overrides scale for X axis
`scaleY`	`number`	`1`	Overrides scale for Y axis
`rotate`	`number`	`0`	Z-axis rotation in degrees
`rotateX`	`number`	`0`	X-axis rotation in degrees (3D)
`rotateY`	`number`	`0`	Y-axis rotation in degrees (3D)
`borderRadius`	`number`	`0`	In pixels
`backgroundColor`	`ColorValue`	`'transparent'`	Any RN color value

animate

属性中的所有属性：

属性	类型	默认值	说明
`opacity`	`number`	`1`	范围0–1
`translateX`	`number`	`0`	单位为DIP（密度无关像素）
`translateY`	`number`	`0`	单位为DIP
`scale`	`number`	`1`	scaleX和scaleY的简写
`scaleX`	`number`	`1`	覆盖X轴的scale值
`scaleY`	`number`	`1`	覆盖Y轴的scale值
`rotate`	`number`	`0`	Z轴旋转角度（度数）
`rotateX`	`number`	`0`	X轴旋转角度（3D）
`rotateY`	`number`	`0`	Y轴旋转角度（3D）
`borderRadius`	`number`	`0`	单位为像素
`backgroundColor`	`ColorValue`	`'transparent'`	支持任何RN颜色值

Transition Types

过渡类型

Timing:

typescript

transition={{
  type: 'timing',
  duration: 300,        // ms, default 300
  easing: 'easeInOut',  // 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | [x1,y1,x2,y2]
  loop: 'repeat',       // 'repeat' | 'reverse' — requires initialAnimate
}}

Spring:

typescript

transition={{
  type: 'spring',
  damping: 15,      // default 15
  stiffness: 120,   // default 120
  mass: 1,          // default 1
}}

None (instant):

typescript

transition={{ type: 'none' }}

计时过渡：

typescript

transition={{
  type: 'timing',
  duration: 300,        // 毫秒，默认300
  easing: 'easeInOut',  // 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | [x1,y1,x2,y2]
  loop: 'repeat',       // 'repeat' | 'reverse' — 需要配合initialAnimate
}}

弹簧过渡：

typescript

transition={{
  type: 'spring',
  damping: 15,      // 默认15
  stiffness: 120,   // 默认120
  mass: 1,          // 默认1
}}

无过渡（即时生效）：

typescript

transition={{ type: 'none' }}

Key Props

关键属性

```
animate
```
— target values for animated properties
```
initialAnimate
```
— starting values (animates to
```
animate
```
on mount)
```
transition
```
— animation config (timing or spring)
```
onTransitionEnd
```
— callback with
```
{ finished: boolean }
```
```
transformOrigin
```
— pivot point as
```
{ x: 0-1, y: 0-1 }
```
, default center
```
useHardwareLayer
```
— Android GPU optimization (boolean, default false)

```
animate
```
— 动画属性的目标值
```
initialAnimate
```
— 起始值（挂载时动画过渡到
```
animate
```
的值）
```
transition
```
— 动画配置（计时或弹簧）
```
onTransitionEnd
```
— 回调函数，参数为
```
{ finished: boolean }
```
```
transformOrigin
```
— 旋转/缩放的中心点，格式为
```
{ x: 0-1, y: 0-1 }
```
，默认居中
```
useHardwareLayer
```
— Android GPU优化（布尔值，默认false）

Important Constraints

重要限制

Loop requires timing (not spring) and
```
initialAnimate
```
must define the start value
No per-property transitions — one transition config applies to all animated properties
No animation sequencing — no equivalent to
```
withSequence
```
/
```
withDelay
```
No gesture/scroll-driven animations — EaseView is state-driven only
Style/animate conflict — if a property appears in both
```
style
```
and
```
animate
```
, the animated value wins

循环仅支持计时过渡（不支持弹簧），且必须通过
```
initialAnimate
```
定义起始值
不支持按属性配置过渡 — 一个过渡配置应用于所有动画属性
不支持动画序列 — 没有
```
withSequence
```
/
```
withDelay
```
的等效功能
不支持手势/滚动驱动的动画 — EaseView仅支持状态驱动
样式/动画冲突 — 如果属性同时出现在
```
style
```
和
```
animate
```
中，动画值优先

react-native-ease-refactor

Original

Translation

react-native-ease refactor

react-native-ease 重构

Phase 1: Discovery

阶段1：发现

Phase 2: Classification

阶段2：分类

Decision Tree

决策树

Migratable Pattern Mapping

可迁移模式映射

Default Value Mapping

默认值映射

withSpring → EaseView spring

withSpring → EaseView spring

withTiming → EaseView timing

withTiming → EaseView timing

Animated.timing (old RN API) → EaseView timing

Animated.timing（旧RN API）→ EaseView timing

Animated.spring (old RN API) → EaseView spring

Animated.spring（旧RN API）→ EaseView spring

Unit Conversions

单位转换

Phase 3: Dry-Run Report

阶段3：试运行报告

Migration Report

迁移报告

Summary

摘要

Migratable Components

可迁移组件

path/to/file.tsx — ComponentName

path/to/file.tsx — ComponentName

Not Migratable (will be skipped)

不可迁移（将跳过）

path/to/file.tsx — ComponentName

path/to/file.tsx — ComponentName

Phase 4: User Confirmation

阶段4：用户确认

Phase 5: Apply Migrations

阶段5：应用迁移

Migration Steps (per component)

迁移步骤（每个组件）

Safety Rules

安全规则

Phase 6: Final Report

阶段6：最终报告

Migration Complete

迁移完成

Changed (X components)

已变更（X个组件）

Unchanged (Y components)

未变更（Y个组件）

Next Steps

后续步骤

EaseView API Reference (for migration accuracy)

EaseView API参考（确保迁移准确性）

Supported Animatable Properties

支持的可动画属性

Transition Types

过渡类型

Key Props

关键属性

Important Constraints

重要限制

`withSpring`
→ EaseView spring

`withSpring`
→ EaseView spring

`withTiming`
→ EaseView timing

`withTiming`
→ EaseView timing

`Animated.timing`
(old RN API) → EaseView timing

`Animated.timing`
（旧RN API）→ EaseView timing

`Animated.spring`
(old RN API) → EaseView spring

`Animated.spring`
（旧RN API）→ EaseView spring

`path/to/file.tsx`
— ComponentName

`path/to/file.tsx`
— ComponentName

`path/to/file.tsx`
— ComponentName

`path/to/file.tsx`
— ComponentName