- 导入
tweenjs
库
import * as TWEEN from '@tweenjs/tween.js'
- 使用
tweenjs
的 动画 源码地址 https://github.com/tweenjs/tween.js/blob/master/src/Tween.js
var option = { px: 0 }
new TWEEN.Tween(option)
.to({
px: 40
}, 1000)
.onUpdate(function() {
that.spriteDoorLeft.position.setX( (-86 - option.px) * that.initFactor )
that.spriteDoorRight.position.setX( ( 166 - option.px) * that.initFactor )
})
.onComplete(function() {
that.doorOpen = false
})
.delay(500)
.easing(TWEEN.Easing.Elastic.InOut)
.start();
- 最后一步 使
tweenjs
生效
animate = function () {
renderer.render( scene, cameraOrtho )
if (TWEEN.update()){
that.isRunning = true
} else {
that.isRunning = false
}
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
当有动画在运行时
TWEEN.update()
返回true
下面是使用 Vue threejs tweenjs 做的一个车子运动的页面效果 https://www.wangchunjian.top/rail/