07 人物基本动画.md

人物基本动画

摆头

let rotateHeadOffset = 0

// 苦力怕摆头
function creeperHeadRotate() {
  rotateHeadOffset += 0.04
  creeperObj.head.rotation.y = Math.sin(rotateHeadOffset)
}

这边 rotateHeadOffset 是递增的弧度值，我们利用 sinθ 值会介于 (-1, 1) 的特性，让苦力怕的头可以沿着y 轴有左右来回摆动的效果。

走路

let walkOffset = 0

// 苦力怕走动
function creeperFeetWalk() {
  walkOffset += 0.04
  
  creeperObj.foot1.rotation.x = Math.sin(walkOffset) / 4 // 前脚左
  creeperObj.foot2.rotation.x = -Math.sin(walkOffset) / 4 // 后脚左
  creeperObj.foot3.rotation.x = -Math.sin(walkOffset) / 4 // 前脚右
  creeperObj.foot4.rotation.x = Math.sin(walkOffset) / 4 // 后脚右
}

这边跟上面摆头的原理差不多，而分别都除以四代表旋转的值介于 (-0.25, 0.25) 这个区间。由于四只脚在走动的过程中会有前后交叉的效果，所以这边需要分边操纵四只脚，但若是要同时调整四只脚时，则可以更方便地使用 creeperObj.feet 整个脚的群组物件。

膨胀

let scaleHeadOffset = 0

// 苦力怕膨胀
function creeperScaleBody() {
  scaleHeadOffset += 0.04
  let scaleRate = Math.abs(Math.sin(scaleHeadOffset)) / 16 + 1
  creeperObj.creeper.scale.set(scaleRate, scaleRate, scaleRate)
}

膨胀的效果是苦力怕在爆炸前会有的前置动作，这边的 scaleRate 利用 Math.abs(Math.sin(scaleHeadOffset)) 取值在 (0, 1) 之间，再除以16 后加1，则会得到一个 (1, 1.0625) 的区间作为膨胀比例，让苦力怕有轻微膨胀的效果。

而这里因为要做到整只苦力怕膨胀，所以是针对 creeperObj.creeper 整个群组做在每个方向缩放比例的操纵。

最后最重要的是记得要在 render() 中加入以上三个操作动画的function 才会有效果：

function render() {
  ...
  creeperHeadRotate()
  creeperFeetWalk()
  creeperScaleBody()
  ...
  requestAnimationFrame(render)
  renderer.render(scene, camera)
}