diff --git a/docs/zh/graphics/2D/spine/editor.md b/docs/zh/graphics/2D/spine/editor.md
index ad96036d8..f1b7b6113 100644
--- a/docs/zh/graphics/2D/spine/editor.md
+++ b/docs/zh/graphics/2D/spine/editor.md
@@ -21,60 +21,60 @@ Galacean 编辑器内置了对 Spine 动画的支持，无需额外下载或配
1. 完成动画制作后，单击 `Spine 菜单`>`导出` ，打开导出窗口
-
+
2. 选择导出窗口左上角的**二进制** （ 推荐使用二进制，以二进制格式而不是JSON格式导出，会使文件体积更小，加载更快
-
+
3. 勾选上，**纹理图集**的打包复选框
-
+
4. 点击 **打包设置**
这里建议勾选 `2 的幂数`；`预乘`和`溢出`两项请勿勾选
完成打包设置后，点击**确定**
-
+
5. 回到导出窗口，选择导出文件夹后，点击**导出**
-
+
6. 将会得到三个如下文件：
-
+
spineboy.skel 包含了 skeleton animation 数据，spineboy.atlas 包含了 texture atlas 信息，导出的图片可能有多张，每张图片都代表了 texture altas 中的一页
## 2. 在 Galacean 编辑器中导入资产
从 Spine 编辑器导出资产后，第二步就要将资产导入至 Galacean 编辑器了。打开编辑器后，将导出的文件直接拖入到[资产面板](/docs/assets/interface/)中，即可完成上传
-
+
也可以点击资产面板的上传按钮进行上传：
-
+
上传完成后，在资产面板中能够看到上传的 spine 素材。
### SpineSkeletonData 资产
-
+
SpineSkeletonData 资产存储了 skeleton 数据，以及对生成的 SpineAtlas 资产的引用
点击资产后，能够在检查器中预览 Spine 动画，预览面板中能够切换`皮肤`和`动画片段`：
-
+
### SpineAtlas 资产
-
+
SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Texture 资产的引用。
点击资产后，能够在检查器中查看其引用的 Texture 资产，以及 Spine 的图集信息
-
+
### 资产更新
如若需要更新你的 Spine 资产。从 Spine 编辑器中重新导出资产，并再次导入到 Galacean 编辑器中覆盖原有文件即可。
@@ -88,23 +88,23 @@ SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Textur
拖入添加是最快捷的一种方式。点击 SpineSkeletonData 资产，按住后拖动到视图区，就能快速创建一个添加了 SpineAnimationRenderer 组件的实体，并指定资产为刚刚选中的 SpineSkeletonData 资产。
-
+
2. 快速添加
点击左上角的快速添加按钮，选择 `2D Object`>`SpineAnimationRenderer`，
-
+
添加完成后，能够看到一个新的实体，挂载了 SpineAnimationRenderer 组件；点击 Resource 属性，选择上传的 SpineSkeletonData 资产，就能看到 Spine 动画啦
-
+
3. 手动添加
手动添加的方式与快速添加类似，不过需要在节点树中手动创建一个新的实体，并通过检查器的 AddComponent 按钮添加 SpineAnimationRenderer 组件
-
+
添加了 SpineAnimationRenderer 组件后，同样需要指定组件的 Resource，也就是 SpineAnimationRenderer 组件要渲染的 SpineSkeletonData 资产。
@@ -113,7 +113,7 @@ SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Textur
SpineAnimationRenderer 组件的配置如下：
-
+
通过 SpineAnimationRenderer 组件能够配置 Spine 动画的资产以及默认状态：
diff --git a/docs/zh/graphics/2D/spine/runtime.md b/docs/zh/graphics/2D/spine/runtime.md
index b7c5b7ef5..7be998402 100644
--- a/docs/zh/graphics/2D/spine/runtime.md
+++ b/docs/zh/graphics/2D/spine/runtime.md
@@ -39,18 +39,18 @@ await engine.resourceManager.load({
注意：`Uploadd Assets to CDN` 选项，如果勾选，则是通过 cdn 链接来加载动画；如果未勾选，则是通过本地文件相对路径加载动画。
-
+
2. 找到 spine 资产文件
下载项目到本地后，打开 project.json 文件，找到 url 属性并打开。
-如果上一步勾选了`Uploadd Assets to CDN`选项，那么可以在 json 文件中找到spine 资产链接：
+如果上一步勾选了`Uploadd Assets to CDN`选项，那么可以在 json 文件中找到 spine 资产链接：
-
+
-如果上一步未勾选`Uploadd Assets to CDN`选项，可以在本地 `public 文件夹`中找到 spine 资产。加载时，使用相对路径作为链接即可。
+如果上一步未勾选`Uploadd Assets to CDN`选项，可以在本地 `public 文件夹`中找到 spine 资产。加载时，使用相对路径作为链接即可。
-
+
2. 使用 resourceManager 加载
@@ -290,26 +290,29 @@ addAnimation 接受 4 个参数：
前三个参数很好理解，这里解释一下第四个参数：
delay 代表了前一个动画的持续时间。
+
当 delay > 0 时（假设 delay 为 1），前一个动画会在播放 1 秒后，切换到下一个动画。如下图所示：
-
+
如果动画 A 的时长小于 1 秒，则会根据是否设置了循环播放：循环播放直至 1 秒，或者播放完毕后，保持在动画播放完毕的状态直至 1 秒。
+
当 delay = 0 时，下一个动画会在前一个动画播放完毕后播放，如下图所示：
-
+
假设动画 A 的时长为 1 秒，过渡持续时间为 0.2 秒，当 delay 设置为 0 时，动画 B 会从 1 - 0.2 也就是 0.8 秒开始过渡到动画 B。
+
当 delay < 0 时，上一个动画未播放完毕前，下一个动画就会开始播放，如下图所示：
同样假设动画 A 的时长为 1 秒，过渡持续时间为 0.2 秒，动画 B 则会从 0.6 秒开始过渡到动画 B。
-
+
-除了 addAnimation 外，还能够通过 addEmptyAnimation 方法添加空动画。空动画能够让动画回到初始状态。
+除了 addAnimation 外，还能够通过 [addEmptyAnimation](https://zh.esotericsoftware.com/spine-api-reference#AnimationState-addEmptyAnimation) 方法添加空动画。空动画能够让动画回到初始状态。
addEmptyAnimation 接受三个参数：TrackIndex，mixDuration 和 delay。TrackIndex 和 delay 参数与 addAnimation 一样。 mixDuration 是过渡持续时间，动画会在 mixDuration 时间内逐渐回到初始状态。如下图所示（右侧棕色区域即是空动画），
-
+
#### **轨道参数**
setAnimation 和 addAnimation 方法都会返回一个对象：TrackEntry。TrackEntry 提供了更多的参数来进行动画控制。
@@ -323,7 +326,7 @@ setAnimation 和 addAnimation 方法都会返回一个对象：TrackEntry。Trac
更多参数可以参考 [TrackEntry 官方文档](https://zh.esotericsoftware.com/spine-api-reference#TrackEntry)
#### **动画事件**
-
+
当调用 AnimationState API 进行动画控制时，会触发如上图所示的事件。
在新的动画开始播放时，会触发 Start 事件，当动画在动画队列中移除或者中断时，会触发 End 事件。当动画播放完毕时，无论是否循环，都会触发 Complete 事件。