3D小游戏(three)-Block跟随动画实现

Block跟随动画

1. block/base.js

import { customAnimation } from '../../libs/animation'

export default class BaseBlock{

constructor(type){

this.type = type//cuboid||culinder

this.height = blockConf.height

this.width = blockConf.width

//Block跳跃变形

this.status = 'stop'

this.scale = 1

}

_shrink () {//Block收缩

const DELTA_SCALE = 0.005

const MIN_SCALE = 0.55

this.scale -= DELTA_SCALE

this.scale = Math.max(MIN_SCALE, this.scale)

if (this.scale <= MIN_SCALE) {

this.status = 'stop'

return

}

this.instance.scale.y = this.scale

const deltaY = this.height * DELTA_SCALE / 2

this.instance.position.y -= deltaY

}

rebound () {//还原

this.status = 'stop'

this.scale = 1

customAnimation.to(this.instance.scale, 0.5, { ease: 'Elastic.easeOut', y: 1 })

customAnimation.to(this.instance.position, 0.5, { ease: 'Elastic.easeOut', y: 0})

}

shrink () {

this.status = 'shrink'

}

update () {

if (this.status == 'shrink') {

this._shrink()

}

}

}

1. game-page.js

addInitBlock中

this.currentBlock = new Cuboid(-15, 0, 0, 'show')

this.scene.instance.add(this.currentBlock.instance)

render中

if (this.currentBlock) {

this.currentBlock.update()

}

touchStartCallback中

this.currentBlock.shrink()

touchEndCallback中

this.currentBlock.rebound()//还原