lywsvip/engine
1
0
Fork 0
mirror of https://github.com/galacean/engine.git synced 2026-05-06 22:23:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Change image in spine doc (#2356)

Browse Source 
feat: change img
This commit is contained in:
johanzhu
2024-08-21 15:18:31 +08:00
committed by GitHub
parent 22f80f0537
commit 1369f111a9
2 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/zh/graphics/2D/spine/editor.md
View File

@@ -21,60 +21,60 @@ Galacean 编辑器内置了对 Spine 动画的支持，无需额外下载或配
1. 完成动画制作后，单击 `Spine 菜单`>`导出` ，打开导出窗口
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721205852909-9c6db2f1-7e47-45d7-ac0b-a6ebf9f95f68.png#clientId=uf07edf19-371c-4&from=paste&height=354&id=qQazJ&originHeight=812&originWidth=466&originalType=binary&ratio=2&rotation=0&showTitle=false&size=188598&status=done&style=shadow&taskId=u95ae3381-21c1-4bf6-9249-64901470a7e&title=&width=203" width="203" alt="Export panel in Spine editor">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*AhJWTLotiKUAAAAAAAAAAAAADvX8AQ/original" width="203" alt="Export panel in Spine editor">
2. 选择导出窗口左上角的**二进制** （ 推荐使用二进制，以二进制格式而不是JSON格式导出，会使文件体积更小，加载更快
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721206075003-d755386d-4669-4ff2-a757-f82ac284e325.png#clientId=uf07edf19-371c-4&from=paste&height=427&id=ufb114b96&originHeight=968&originWidth=1250&originalType=binary&ratio=2&rotation=0&showTitle=false&size=277354&status=done&style=shadow&taskId=u39556ffc-a18d-4cc4-ab5a-6ae5eea1ca8&title=&width=551" width="551" alt="Export window in Spine editor">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*SLgpQr7P8FIAAAAAAAAAAAAADvX8AQ/original" width="551" alt="Export window in Spine editor">
3. 勾选上，**纹理图集**的打包复选框
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721206140885-a03f2be1-6373-48cf-b0cd-6edff71c586d.png#clientId=uf07edf19-371c-4&from=paste&height=422&id=u37a697a3&originHeight=960&originWidth=1250&originalType=binary&ratio=2&rotation=0&showTitle=false&size=301864&status=done&style=shadow&taskId=u98574e54-60c2-4a5b-9b66-62a55911d26&title=&width=549" width="549" alt="Click packing texture atlas button in Export window">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*lryOSrLjzEYAAAAAAAAAAAAADvX8AQ/original" width="549" alt="Click packing texture atlas button in Export window">
4. 点击 **打包设置**
这里建议勾选 `2 的幂数`；`预乘`和`溢出`两项请勿勾选
完成打包设置后，点击**确定**
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721206251962-c1dfb317-d420-465d-aaa4-c1d8784d70c4.png#clientId=uf07edf19-371c-4&from=paste&height=486&id=u1d53bfc0&originHeight=1164&originWidth=1248&originalType=binary&ratio=2&rotation=0&showTitle=false&size=546042&status=done&style=shadow&taskId=ue44ae711-4bc7-4668-925f-84e9ec00870&title=&width=521" width="521" alt="Texture pack window in Spine Editor">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*iVKbR4tlIRkAAAAAAAAAAAAADvX8AQ/original" width="521" alt="Texture pack window in Spine Editor">
5. 回到导出窗口，选择导出文件夹后，点击**导出**
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721206632354-5782e179-5485-4461-a257-b22d5eea1dc0.png#clientId=uf07edf19-371c-4&from=paste&height=403&id=u20d66c56&originHeight=966&originWidth=1244&originalType=binary&ratio=2&rotation=0&showTitle=false&size=327047&status=done&style=shadow&taskId=u74c46bf0-7f7b-45b7-8757-6cedbfac3aa&title=&width=519" width="519" alt="Click export button in texture pack window">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*Tv0uRpXYT-gAAAAAAAAAAAAADvX8AQ/original" width="519" alt="Click export button in texture pack window">
6. 将会得到三个如下文件：
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721206737659-cd768958-f4e4-4edd-a6ff-0bd16bd82d22.png#clientId=uf07edf19-371c-4&from=paste&height=152&id=uf58744da&originHeight=246&originWidth=656&originalType=binary&ratio=2&rotation=0&showTitle=false&size=70043&status=done&style=shadow&taskId=u31c50a47-bd13-4c0a-80a4-76db96d8118&title=&width=406" width="406" alt="Spine assets in folder">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*2eL6R51ITuAAAAAAAAAAAAAADvX8AQ/original" width="406" alt="Spine assets in folder">
spineboy.skel 包含了 skeleton animation 数据，spineboy.atlas 包含了 texture atlas 信息，导出的图片可能有多张，每张图片都代表了 texture altas 中的一页
## 2. 在 Galacean 编辑器中导入资产
从 Spine 编辑器导出资产后，第二步就要将资产导入至 Galacean 编辑器了。打开编辑器后，将导出的文件直接拖入到[资产面板](/docs/assets/interface/)中，即可完成上传
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/gif/76063/1721208067896-206d850e-20fc-44a6-9987-6a8556b10e3b.gif#clientId=uf07edf19-371c-4&from=paste&height=540&id=u4bb88103&originHeight=1080&originWidth=1984&originalType=binary&ratio=2&rotation=0&showTitle=false&size=8620071&status=done&style=shadow&taskId=ua9290849-8cb2-46ac-98b6-e2b22ab0d83&title=&width=992" width="992" alt="Drag spine assets into Galacean editor">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*u-FHQYyaXlgAAAAAAAAAAAAADvX8AQ/original" width="992" alt="Drag spine assets into Galacean editor">
也可以点击资产面板的上传按钮进行上传：
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721208282563-ba24bcfc-74bd-4c32-b5ba-c289f2ea6d01.png#clientId=uf07edf19-371c-4&from=paste&height=819&id=ud32f3a82&originHeight=1638&originWidth=3014&originalType=binary&ratio=2&rotation=0&showTitle=false&size=1171591&status=done&style=shadow&taskId=u01d46d27-0380-444f-8e79-60e3d602bd4&title=&width=1507" width="1507" alt="Use upload button to upload spine assets">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*KaxcS6O7M5EAAAAAAAAAAAAADvX8AQ/original" width="1507" alt="Use upload button to upload spine assets">
上传完成后，在资产面板中能够看到上传的 spine 素材。
### SpineSkeletonData 资产
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721208635628-02647961-4617-46ee-a1cd-81cf0550f5a2.png#clientId=uf07edf19-371c-4&from=paste&height=153&id=u678e6fba&originHeight=242&originWidth=174&originalType=binary&ratio=2&rotation=0&showTitle=false&size=25946&status=done&style=shadow&taskId=u6e5256e7-b3c3-4657-9353-b262e3b4e18&title=&width=110" width="110" alt="Spine skeleton data asset icon">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*-U5CRKWiRlsAAAAAAAAAAAAADvX8AQ/original" width="110" alt="Spine skeleton data asset icon">
SpineSkeletonData 资产存储了 skeleton 数据，以及对生成的 SpineAtlas 资产的引用
点击资产后，能够在检查器中预览 Spine 动画，预览面板中能够切换`皮肤`和`动画片段`：
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721208897606-b5b510b6-cfd2-4e8f-ada8-ccc529817f5e.png#clientId=uf07edf19-371c-4&from=paste&height=425&id=u2591706d&originHeight=936&originWidth=1052&originalType=binary&ratio=2&rotation=0&showTitle=false&size=254860&status=done&style=shadow&taskId=ua66952b9-8070-4603-ba16-50e9efe8cc4&title=&width=478" width="478" alt="Spine skeleton data preview">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*AXsDRognlqMAAAAAAAAAAAAADvX8AQ/original" width="478" alt="Spine skeleton data preview">
### SpineAtlas 资产
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721209002319-1e562970-c951-48f5-838d-8641b2c974b7.png#clientId=uf07edf19-371c-4&from=paste&height=144&id=u793a9e3e&originHeight=248&originWidth=186&originalType=binary&ratio=2&rotation=0&showTitle=false&size=27200&status=done&style=shadow&taskId=u6909b718-88b3-4e61-a735-4a82290c799&title=&width=108" width="108" alt="Spine atlas asset">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*OGNbSaCYQlwAAAAAAAAAAAAADvX8AQ/original" width="108" alt="Spine atlas asset">
SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Texture 资产的引用。
点击资产后，能够在检查器中查看其引用的 Texture 资产，以及 Spine 的图集信息
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721209172413-9db9e2c6-c7e8-4795-84d7-b3b42137ef4e.png#clientId=uf07edf19-371c-4&from=paste&height=539&id=u8f790c41&originHeight=1208&originWidth=1048&originalType=binary&ratio=2&rotation=0&showTitle=false&size=222670&status=done&style=shadow&taskId=u7974e9fa-5e0a-4be4-8d8c-a1a77172d32&title=&width=468" width="468" alt="Spine atlas preview">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*-j8aSq7wSVAAAAAAAAAAAAAADvX8AQ/original" width="468" alt="Spine atlas preview">
### 资产更新
如若需要更新你的 Spine 资产。从 Spine 编辑器中重新导出资产，并再次导入到 Galacean 编辑器中覆盖原有文件即可。
@@ -88,23 +88,23 @@ SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Textur
拖入添加是最快捷的一种方式。点击 SpineSkeletonData 资产，按住后拖动到视图区，就能快速创建一个添加了 SpineAnimationRenderer 组件的实体，并指定资产为刚刚选中的 SpineSkeletonData 资产。
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/gif/76063/1721210070086-6db51cd8-4493-4b4d-93ee-16c8187fe843.gif#clientId=uf07edf19-371c-4&from=paste&height=540&id=ucc4cc750&originHeight=1080&originWidth=1984&originalType=binary&ratio=2&rotation=0&showTitle=false&size=7335004&status=done&style=shadow&taskId=u97b775ac-f0f4-4f0f-80f6-077cacc66d5&title=&width=992" width="992" alt="Drag Spine skeleton data asset into viewport">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*2s_oTZ4sIU0AAAAAAAAAAAAADvX8AQ/original" width="992" alt="Drag Spine skeleton data asset into viewport">
2. 快速添加
点击左上角的快速添加按钮，选择 `2D Object`>`SpineAnimationRenderer`，
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721268718386-994e5358-1b2d-44ae-8c3e-721f31e7f8b2.png#clientId=uf07edf19-371c-4&from=paste&height=732&id=u11165e8f&originHeight=1464&originWidth=3014&originalType=binary&ratio=2&rotation=0&showTitle=false&size=1070042&status=done&style=shadow&taskId=uadbb1c9b-c18c-4534-9965-4b74519a4e0&title=&width=1507" width="1507" alt="Quick add Spine animation renderer">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*NbafRIIuvuAAAAAAAAAAAAAADvX8AQ/original" width="1507" alt="Quick add Spine animation renderer">
添加完成后，能够看到一个新的实体，挂载了 SpineAnimationRenderer 组件；点击 Resource 属性，选择上传的 SpineSkeletonData 资产，就能看到 Spine 动画啦
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721268852169-d90ebd7b-e691-462b-acd4-4ad1f8c9b5ec.png#clientId=uf07edf19-371c-4&from=paste&height=735&id=u2c86eb68&originHeight=1470&originWidth=3000&originalType=binary&ratio=2&rotation=0&showTitle=false&size=1241001&status=done&style=shadow&taskId=u80f72acd-3fd6-47e2-aa7a-f3d0ab9b56b&title=&width=1500" width="1500" alt="Select spine skeleton data asset in component panel">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*WyOtTJBu98MAAAAAAAAAAAAADvX8AQ/original" width="1500" alt="Select spine skeleton data asset in component panel">
3. 手动添加
手动添加的方式与快速添加类似，不过需要在节点树中手动创建一个新的实体，并通过检查器的 AddComponent 按钮添加 SpineAnimationRenderer 组件
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721269154975-11ceb229-2142-4c6c-9552-0afba11ae924.png#clientId=uf07edf19-371c-4&from=paste&height=476&id=u450ac092&originHeight=1460&originWidth=1048&originalType=binary&ratio=2&rotation=0&showTitle=false&size=276525&status=done&style=shadow&taskId=u1924fec4-712d-4f69-b343-2ab8021cc8e&title=&width=342" width="342" alt="Use add component to add spine animation renderer">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*PO1FQ7rjMOkAAAAAAAAAAAAADvX8AQ/original" width="342" alt="Use add component to add spine animation renderer">
添加了 SpineAnimationRenderer 组件后，同样需要指定组件的 Resource，也就是 SpineAnimationRenderer 组件要渲染的 SpineSkeletonData 资产。
@@ -113,7 +113,7 @@ SpineAtlas 资产存储了texture atlas 文件，并包含了其对所需 Textur
SpineAnimationRenderer 组件的配置如下：
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721269455151-ceaf0b7e-a00b-4ba4-a109-0cdb08c135f2.png#clientId=uf07edf19-371c-4&from=paste&height=199&id=ucac2f7de&originHeight=398&originWidth=1060&originalType=binary&ratio=2&rotation=0&showTitle=false&size=82934&status=done&style=shadow&taskId=ub50cded7-5559-41de-b104-9db3c4bb4f5&title=&width=530" width="503" alt="Spine animation renderer component config">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*afilTpuoSmwAAAAAAAAAAAAADvX8AQ/original" width="503" alt="Spine animation renderer component config">
通过 SpineAnimationRenderer 组件能够配置 Spine 动画的资产以及默认状态：

25
docs/zh/graphics/2D/spine/runtime.md
View File

@@ -39,18 +39,18 @@ await engine.resourceManager.load({
注意：`Uploadd Assets to CDN` 选项，如果勾选，则是通过 cdn 链接来加载动画；如果未勾选，则是通过本地文件相对路径加载动画。
<img src="https://lark-assets-prod-aliyun.oss-cn-hangzhou.aliyuncs.com/lark/0/2024/png/76063/1723625698235-35d144af-6132-4443-86bd-ea1aac0dbaab.png?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1723629894&Signature=ABY7574qDvp7LSuVDOJiMTxKNeQ%3D&x-oss-process=image%2Fformat%2Cwebp%2Fresize%2Cw_856%2Climit_0&response-content-disposition=inline" width="260" alt="Project export panel">
<img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*0rZJQJRNamIAAAAAAAAAAAAADsp6AQ/original" width="260" alt="Project export panel">
2. 找到 spine 资产文件
下载项目到本地后，打开 project.json 文件，找到 url 属性并打开。
如果上一步勾选了`Uploadd Assets to CDN`选项，那么可以在 json 文件中找到spine 资产链接：
如果上一步勾选了`Uploadd Assets to CDN`选项，那么可以在 json 文件中找到 spine 资产链接：
<img src="https://lark-assets-prod-aliyun.oss-cn-hangzhou.aliyuncs.com/lark/0/2024/png/76063/1723626809088-8e43170a-3370-4efb-b5a0-efbb7e53447f.png?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1723628613&Signature=6nGO0msM3MVVCtluiUgECJarzqg%3D&x-oss-process=image%2Fformat%2Cwebp%2Fresize%2Cw_1500%2Climit_0&response-content-disposition=inline" width="630" alt="Find spine assset">
<img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*-eG9RafXm64AAAAAAAAAAAAADsp6AQ/original" width="630" alt="Find spine assset">
如果上一步未勾选`Uploadd Assets to CDN`选项，可以在本地 `public 文件夹`中找到 spine 资产。加载时，使用相对路径作为链接即可。
如果上一步未勾选`Uploadd Assets to CDN`选项，可以在本地 `public 文件夹`中找到 spine 资产。加载时，使用<b>相对路径</b>作为链接即可。
<img src="https://lark-assets-prod-aliyun.oss-cn-hangzhou.aliyuncs.com/lark/0/2024/png/76063/1723627676520-e86baa02-02b8-463c-97c6-29ba706c2f79.png?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1723629486&Signature=zJ9EpUh9AnRYxsITn8wM0mWA%2Ffk%3D&x-oss-process=image%2Fformat%2Cwebp&response-content-disposition=inline" width="230" alt="Find spine assset">
<img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*KT9yTZWQ2C8AAAAAAAAAAAAADsp6AQ/original" width="300" alt="Find spine assset">
2. 使用 resourceManager 加载
@@ -290,26 +290,29 @@ addAnimation 接受 4 个参数：
前三个参数很好理解，这里解释一下第四个参数：
delay 代表了前一个动画的持续时间。
当 delay > 0 时（假设 delay 为 1），前一个动画会在播放 1 秒后，切换到下一个动画。如下图所示：
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721274299254-431c2e96-9c3b-482e-a06b-350023042200.png#clientId=uf07edf19-371c-4&from=paste&height=129&id=u189d34f4&originHeight=348&originWidth=1286&originalType=binary&ratio=2&rotation=0&showTitle=false&size=92765&status=done&style=none&taskId=u329862b0-6b18-42b7-b7f2-4a5c118842d&title=&width=477" width="377" alt="animation delay > 0">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*-sY9TrNI8L8AAAAAAAAAAAAADvX8AQ/original" width="350" alt="animation delay > 0">
如果动画 A 的时长小于 1 秒，则会根据是否设置了循环播放：循环播放直至 1 秒，或者播放完毕后，保持在动画播放完毕的状态直至 1 秒。
当 delay = 0 时，下一个动画会在前一个动画播放完毕后播放，如下图所示：
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721274614500-0cde58d2-ebb8-4d07-bf3a-5defb2278733.png#clientId=uf07edf19-371c-4&from=paste&height=168&id=uf2d2deb7&originHeight=476&originWidth=1324&originalType=binary&ratio=2&rotation=0&showTitle=false&size=118555&status=done&style=none&taskId=u1ec109a1-934a-4620-9d40-4d6c5987e6d&title=&width=467" width="377" alt="animation delay = 0">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*jk2VRaHwUXMAAAAAAAAAAAAADvX8AQ/original" width="350" alt="animation 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。
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721281456701-391d3d2d-d4f4-42df-9947-43aca9e191ca.png#clientId=uf07edf19-371c-4&from=paste&height=189&id=u3e7c7104&originHeight=496&originWidth=1218&originalType=binary&ratio=2&rotation=0&showTitle=false&size=128314&status=done&style=none&taskId=u924e3b93-e550-4b9a-88d6-dc168361331&title=&width=464" width="377" alt="animation delay < 0">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*1xJDTLr0ygAAAAAAAAAAAAAADvX8AQ/original" width="350" alt="animation delay < 0">
除了 addAnimation 外，还能够通过 addEmptyAnimation 方法添加空动画。空动画能够让动画回到初始状态。
除了 addAnimation 外，还能够通过 [addEmptyAnimation](https://zh.esotericsoftware.com/spine-api-reference#AnimationState-addEmptyAnimation) 方法添加空动画。空动画能够让动画回到初始状态。
addEmptyAnimation 接受三个参数：TrackIndex，mixDuration 和 delay。TrackIndex 和 delay 参数与 addAnimation 一样。 mixDuration 是过渡持续时间，动画会在 mixDuration 时间内逐渐回到初始状态。如下图所示（右侧棕色区域即是空动画），
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721283804385-16d67f51-f1ae-48e5-94c5-7e1a9791b2dc.png#clientId=uf07edf19-371c-4&from=paste&height=138&id=u06ecf378&originHeight=516&originWidth=1000&originalType=binary&ratio=2&rotation=0&showTitle=false&size=126222&status=done&style=none&taskId=u1e6ba48f-dd00-49b1-83e2-3566d25f500&title=&width=267" width="267" alt="Add empty animation api">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*UdLBR4xoXAEAAAAAAAAAAAAADvX8AQ/original" width="267" alt="Add empty animation api">
#### **轨道参数**
setAnimation 和 addAnimation 方法都会返回一个对象：TrackEntry。TrackEntry 提供了更多的参数来进行动画控制。
@@ -323,7 +326,7 @@ setAnimation 和 addAnimation 方法都会返回一个对象：TrackEntry。Trac
更多参数可以参考 [TrackEntry 官方文档](https://zh.esotericsoftware.com/spine-api-reference#TrackEntry)
#### **动画事件**
<img src="https://intranetproxy.alipay.com/skylark/lark/0/2024/png/76063/1721284098876-d94511d5-d69a-4754-80ef-4f9686cd17a2.png#clientId=uf07edf19-371c-4&from=paste&height=251&id=uf1167cf1&originHeight=280&originWidth=760&originalType=binary&ratio=2&rotation=0&showTitle=false&size=19012&status=done&style=none&taskId=u00edc2c8-9810-44ad-9254-34d8aa2d258&title=&width=681" width="681" alt="Animation event diagram">
<img src="https://mdn.alipayobjects.com/huamei_irlgws/afts/img/A*j4SmSKjherYAAAAAAAAAAAAADvX8AQ/original" width="681" alt="Animation event diagram">
当调用 AnimationState API 进行动画控制时，会触发如上图所示的事件。
在新的动画开始播放时，会触发 Start 事件，当动画在动画队列中移除或者中断时，会触发 End 事件。当动画播放完毕时，无论是否循环，都会触发 Complete 事件。