<script src="/files/spine-player/4.2/spine-player.js"></script>
<link rel="stylesheet" href="/files/spine-player/4.2/spine-player.css">
<div class="units-row-end">		
	<div class="unit-100">
		<div class="examples-header">
			<div class="units-row">
				<div class="unit-60">
					<div id="player"></div>
				</div>
				<div class="unit-40">
					<div class="examples-header-info">
						<div class="examples-header-info-tags">
							<span>标签:</span>
							<p>基础版, 专业版, 变形, 网格, 变换约束, 权重</p>
						</div>
<div class="examples-header-download">[example-download:alien]</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</div>
<script>
new spine.SpinePlayer(document.getElementById("player"), {
   jsonUrl: "/files/examples/4.2/alien/export/alien-pro.json",
   atlasUrl: "/files/examples/4.2/alien/export/alien-pma.atlas",
	animation: "death",
   viewport: {
      animations: {
         death: { padTop: "-33%" }
      }
   },
   backgroundColor: "#555555FF",
   fullScreenBackgroundColor: "#555555FF"
});
</script>

!!
#外星人#

外星人项目演示了如何将传统的逐帧动画与Spine提供的高级动画工具结合使用。在此项目中，只有少量的逐帧图像是手工绘制的，然后通过Spine的[网格变形](/spine-meshes#Deformation)和平滑插值进行增强。外星人`死亡`动画在多个地方使用了这些技术: 头部爆裂、眼睛爆裂和绿色黏液飞溅。分离下巴使用了[变换约束](/spine-transform-constraints)。

在[超级Spineboy](https://github.com/EsotericSoftware/spine-superspineboy)演示游戏中可以看到此外星人的动画。为了多样化，每个外星人都采用了稍微不同的色调。另外，为不同力量的外星人使用了4种尺寸。当最大的外星人死亡时，会爆炸并产生许多小外星人。

## 头部爆裂

### 设置
![](/img/spine-examples/alien/alien-burst-setup-01.jpg)

头部由一个叫做`head`的骨骼建模，它包含两个插槽: `head`和`burst-bg`。

`head`[插槽](/spine-basic-concepts#Slots)包含四个附件: 分别是`head`、`burst01`、`burst02`和`burst03-fg`。每个附件都是一个指向不同的图片[网格](/spine-meshes)附件。`head`附件被所有动画使用，是外星人头部的默认“未爆裂”状态。`burst01`、`burst02`和`burst03-fg`附件为爆裂头部的3个帧。加上`head`附件，它们构成了传统逐帧动画的关键帧。

插槽`burst-bg`中的`burst03-bg`附件为动画增加了一些额外的绿色黏液。

请注意，眼睛、下巴和飞溅的绿色黏液不是头部骨骼层级的一部分，它们是分开的以简化动画过程。这也反映在各自插槽的[绘制顺序](/spine-images#Draw-order)中。

### 动画
![](/img/spine-examples/alien/alien-burst-animate-01.jpg)

在上图动画模式中，[摄影表](/spine-dopesheet#Dopesheet-view)中显示了死亡动画中头部爆裂部分的[时间轴](/spine-dopesheet#Timeline)。头部插槽(`Attach: head`)的附件时间轴包含头部插槽中每个[附件更改](/spine-key-frames#Attachments)的关键帧。动画从插槽中的`head`附件开始，然后切换到`burst01`、`burst02`和`burst03-fg`附件。这些关键帧类似于传统的逐帧动画。在第`39`帧中，`burst03-bg`附件被设为关键帧并变得可见，在爆裂头部附件后面添加绿色黏液。

通过[变形](/spine-meshes#Deformation)网格附件使逐帧动画变得更加有趣，如变形时间轴所示。

## 下巴和眼睛

### 设置
![](/img/spine-examples/alien/alien-jaw-setup-01.jpg)

下巴(`metaljaw`)和眼睛(`eye-root`)骨骼不以`head`骨骼为父级，而是以骨架的`root`骨骼为父级，这样就可以独立移动，从而更容易在`死亡`动画中实现下巴和眼睛与头部分离的动画。

下巴和眼睛骨骼使用[变换约束](/spine-transform-constraints)来跟随头部骨骼。设置变换约束的偏移量和混合值，使下巴和眼睛在默认情况下跟随头部骨骼移动，有效地表现为正常的父级/子级关系。

当下巴和眼睛不再需要跟随头部骨骼时，例如，在`死亡`动画中下巴飞向空中时，这些变换约束的值被设置为0，使受约束的骨骼可根据自己的变换自由移动。

### 动画
![](/img/spine-examples/alien/alien-jaw-animate-01.jpg)

为了在`死亡`动画中从头部分离下巴和眼睛，通过设置相应变换约束混合值关键帧来减少变换约束对骨骼变换的影响。混合动画在`Transform: eye-root`、`Transform: jaw`和`Transform: eye`时间轴中呈现。

<div class="toc-home"><p><a href="/spine-examples">Spine示例项目</a></p></div>