<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:windmill]</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
new spine.SpinePlayer(document.getElementById("player"), {
	jsonUrl: "/files/examples/4.2/windmill/export/windmill-ess.json",
	atlasUrl: "/files/examples/4.2/windmill/export/windmill-pma.atlas",
	animation: "animation",
	viewport: { 
		x: -585,
		y: -383,
		width: 1170,
		height: 1090
	},
	backgroundColor: "#d0fbf2",
	fullScreenBackgroundColor: "#d0fbf2"
});
</script>

!!
#风车
风车项目演示了如何用Spine基础版和专业版建模等距透视。该项目还介绍了如何执行等距旋转，创建一个简单的烟雾效果，以及如何通过复制元素及其动画来增加变化。

## 视频
[youtube:kUi7ODUmQes]

本项目的下载包含7个`.spine`文件，按时间顺序编号，让你可以跟随视频学习。

## 树、灌木和花

![](/img/spine-examples/windmill/trees-bushes-flowers.png)  

### 设置
每棵树都有一个[插槽](/spine-basic-concepts#Slots)代表树干(`tree1-trunk`和`tree2-trunk`)，而每一束附加到树干分支上的树叶(`leaves`到`leaves8`)都有一个骨骼。由于树干没有动画，且其插槽是根骨骼的直接子级，这样可以节省两个骨骼。

每株灌木都由一个骨骼(`bush1`和`bush2`)组成，每个都有一个插槽和附件。

花有些复杂。每株都由一个骨骼和插槽组成的层次结构来模拟花的影子，花茎底部的前后叶，花茎本身，以及顶部的花瓣。花瓣插槽包含3张不同的图片，在对复制的花朵进行定制时可选择不同的花瓣形状，还可以更改插槽颜色以增添其他品种。

### 动画
通过设置每一束树叶的[旋转](/spine-key-frames#Rotation)即可实现树木动画。在动画开始和结束设置装配姿势的关键帧，中间增添变化，即可形成无缝循环的动画。

只需设置灌木的[倾斜](/spine-tools#Shear-tool)属性的关键帧即可实现灌木动画，这样可使灌木变形的同时保持其贴地。与树叶一样，在动画开始和结束都设置倾斜值的关键帧，中间增添变化，从而形成无缝循环的动画。

在设置了所有基本关键帧后，通过选择所有关键帧并在[图表视图](/spine-graph)中应用曲线可更改关键帧之间的曲线。为了使动画不那么同步，在关键帧分组上使用了[偏移工具](/spine-dopesheet#Key-Offset)。

## 公鸡
这只公鸡是屋顶上的装饰品，它是金属做的，可被风吹动。场景是等距视图的，所以公鸡应该按照等距视角在垂直轴上旋转。

### 设置
公鸡由一个零长度的骨骼和一个插槽组成，插槽包含公鸡的正面视图作为区域附件。

### 动画
通过设置Y轴上的倾斜属性关键帧可实现公鸡动画。为了创建一个无缝循环，在第一帧和最后一帧设置倾斜值关键帧，两帧之间增添变化。

![](/img/spine-examples/windmill/rooster.png)

## 风车叶片
旋转叶片是构图的主要焦点，其由叶片图片`windmill-blades`和两个组成叶片正面的长木板(`windmill-blades-wood-h`和`windmill-blades-wood-v`)组成。所有图片都是正面视图，但是旋转时要遵循场景的等距透视。

### 设置

我们需要两个骨骼来实现正确的等距旋转:一个骨骼使叶片变形以匹配等距透视的`windmill-blades-pivot`，另一个骨骼实际执行该旋转，分别是`windmill-blades-front` 和 `windmill-blades-back`。

<img style="max-width:550px" class="no-borders" src="/img/spine-examples/windmill/bones-blades.png">!!

[等距透视](https://design.tutsplus.com/tutorials/how-to-create-advanced-isometric-illustrations-using-the-ssr-method--vector-1058)可通过将图片缩放`0.86`再应用`30°`倾斜来实现，这对于正方形是有效的，但是由于叶片被附加到一个六角形上，我们使用了一个`20°`的倾斜。

<img style="max-width:536px" class="no-borders" src="/img/spine-examples/windmill/ssr-isometric.png">!!

在Spine中，子骨骼继承父骨骼的变换(除非禁用骨骼属性中的继承)。应用`0.86`的缩放和`20°`倾斜到父骨骼也会将该变换应用到子骨骼。为此，我们可将等距透视变换应用到`windmill-blades-pivot`父骨骼，其会影响该骨骼的子级。

为了让叶片更有深度，我们将叶片前后分成两个骨骼(`windmill-blades-back`和`windmill-blades-front`)，并稍微进行偏移。

### 动画
为了在Spine中实现[完整旋转](/spine-key-frames#Rotation)，我们将动画开始和结束的骨骼旋转关键帧设置为`0°`。然后在中间放置两个等距关键帧，一个在动画时长的1/3位置，另一个在2/3位置。一个完整的旋转为`360°`，每个关键帧的旋转增量为`120°`。

<img style="max-width:489px" class="no-borders" src="/img/spine-examples/windmill/rotation.png">!!

`windmill-blades-back`和`windmill-blades-front`两个骨骼的旋转都遵循此原则。

叶片深度效果在`设置`模式下`预览`视图中调整。

## 烟雾
烟雾从烟囱里冒出来，渐渐消失在远处。

### 设置
我们重用了3个骨骼(`smoke`到`smoke3`)的烟雾图片来制造一个小烟雾痕迹。

###动画###
烟雾飘动是移动、旋转、缩放和[颜色关键帧](/spine-key-frames#Color)的综合效果。

在旋转时，烟雾从屋顶向右上角移动，开始很小，向上向右移动时变大。
烟雾冒出时还会改变其透明度，最后渐渐消失。

先为一个烟雾骨骼创建动画，然后复制偏移即可。要实现偏移，第一帧和最后一帧必须匹配。

![](/img/spine-examples/windmill/smoke.png)

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