<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>专业版, 网格, 权重, 路径约束, 变换约束, IK约束</p>
						</div>
						<div class="examples-header-download">[example-download:stretchyman]</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
new spine.SpinePlayer(document.getElementById("player"), {
	jsonUrl: "/files/examples/4.2/stretchyman/export/stretchyman-pro.json",
	atlasUrl: "/files/examples/4.2/stretchyman/export/stretchyman-pma.atlas",
	animation: "sneak",
	viewport: { 
		x: -187,
		y: -72,
		width: 1102,
		height: 622
	},
	backgroundColor: "#555555FF",
	fullScreenBackgroundColor: "#555555FF"
});
</script>

!!
# 变形人
变形人项目演示了如何使用[IK](/spine-ik-constraints)、[路径](/spine-path-constraints)和[权重](/spine-weights)来创建可伸缩的四肢，使用简单的控制来简化动画过程。下文我们将详述变形人的后退，前腿的设置方式相同。

## 约束
![](/img/spine-examples/stretchyman/stretchyman-constraints-01.jpg)

后腿由两个骨骼组成，分别是`back-leg-ik1`和`back-leg-ik2`，都附加到`hip`骨骼上，它们被`back-leg-ik`两骨骼IK约束驱动。`back-leg-ik-target`骨骼为IK约束的目标: 移动此骨骼将使`back-leg-ik1`和`back-leg-ik2`骨骼跟随，从而可简单控制腿移动。

我们还在`back-leg-ik`IK约束上启用了`伸展`属性。不管IK骨骼的原始长度如何，使其能够`伸展`两个IK骨骼，并始终能够达到IK目标。

`hip`包含一个名为`back-leg-path`的插槽，其中包含一个名为`back-leg-path`的路径附件。这条路径的顶点被加权到`back-leg-ik1`和`back-leg-ik2`骨骼。当这两个骨骼被`back-leg-ik`IK约束移动时，路径会相应变形。

还有八个名为`back-leg1`到`back-leg8`的骨骼链被附加到`hip`骨骼。这8个骨骼的长度和位置由`back-leg-path`路径约束控制。路径约束的`间距`类型设置为`百分比`，其值设置为`100 / 8 = 12.5`。这就保证了骨骼总是填满整个路径，该路径上的8个骨骼每个都占据了路径长度的12.5%。

`旋转`和`移动`的`混合`值设置为`100`，因此路径的旋转和移动完全应用于受约束的腿骨骼。最后，使用`链缩放`确保骨骼尽可能靠近路径。

## 权重

路径`back-leg-path`的顶点被加权到`back-leg-ik1`和`back-leg-ik2`骨骼，在选择路径时可在[`权重`视图](/spine-weights)中看到。

由于我们使用的是路径，所以没有使用`自动`来生成权重。相反，我们手动设置每个顶点的权重和顶点手柄。使用了一点权重绘画，我们最终得到了这样的配置:

![](/img/spine-examples/stretchyman/stretchyman-weights-01.jpg)

在移动`back-leg-ik-target`骨骼时，该路径及约束到该路径的骨骼`back-leg1`和`back-leg8`跟随IK骨骼`back-leg-ik1`和`back-leg-ik2`。

![](/img/spine-examples/stretchyman/stretchyman-weights-02.gif)

作为加权过程的最后一步，我们给代表腿的网格顶点分配了权重。该网格被加权到骨骼链`back-leg1`到`back-leg8`:

![](/img/spine-examples/stretchyman/stretchyman-weights-03.jpg)

在此步之后移动IK目标，现在也会根据权重变形腿部网格。

## 路径变形

虽然通过移动IK目标骨骼来移动腿已非常灵活，但是可通过[变形路径顶点](/spine-paths#Weights)来增加更多控制。

在[`动画`模式](/spine-animating)选中`sneak`动画，我们可以在`43`、`45`、`47`和`50`帧看到`back-leg-path`的变形关键帧。这些关键帧使变形人在将腿拉向自己时好似向上弯。

![](/img/spine-examples/stretchyman/stretchyman-deform-01.jpg)

可在此页面上方的播放器中观看`sneak`动画。

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