|
|
@@ -77,11 +77,42 @@ export default {
|
|
|
|
|
|
this.timeoutId = setTimeout(() => {
|
|
|
this.treeImageNode = document.getElementById('tree-image')
|
|
|
- const tween = new TWEEN.Tween(this.animationBottom)
|
|
|
- tween.to({
|
|
|
+
|
|
|
+ const tween1 = new TWEEN.Tween(this.animationBottom)
|
|
|
+ tween1.to({
|
|
|
+ value: -this.treeImageNode.clientHeight * 0.305
|
|
|
+ }, 39344 * 0.305)
|
|
|
+ tween1.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
+
|
|
|
+ const tween2 = new TWEEN.Tween(this.animationBottom)
|
|
|
+ tween2.to({
|
|
|
+ value: -this.treeImageNode.clientHeight * 0.50
|
|
|
+ }, 39344 * (0.50 - 0.305))
|
|
|
+ tween2.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
+
|
|
|
+ const tween3 = new TWEEN.Tween(this.animationBottom)
|
|
|
+ tween3.to({
|
|
|
+ value: -this.treeImageNode.clientHeight * 0.59
|
|
|
+ }, 39344 * (0.59 - 0.50))
|
|
|
+ tween3.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
+
|
|
|
+ const tween4 = new TWEEN.Tween(this.animationBottom)
|
|
|
+ tween4.to({
|
|
|
+ value: -this.treeImageNode.clientHeight * 0.7
|
|
|
+ }, 39344 * (0.7 - 0.59))
|
|
|
+ tween4.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
+
|
|
|
+ const tween5 = new TWEEN.Tween(this.animationBottom)
|
|
|
+ tween5.to({
|
|
|
+ value: -this.treeImageNode.clientHeight * 0.8
|
|
|
+ }, 39344 * (0.8 - 0.7))
|
|
|
+ tween5.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
+
|
|
|
+ const tween6 = new TWEEN.Tween(this.animationBottom)
|
|
|
+ tween6.to({
|
|
|
value: window.innerHeight - this.treeImageNode.clientHeight
|
|
|
- }, 45000)
|
|
|
- tween.onComplete(() => {
|
|
|
+ }, 39344 * (1 - 0.8) - 39344 * window.innerHeight / this.treeImageNode.clientHeight)
|
|
|
+ tween6.onComplete(() => {
|
|
|
this.showSlideTip = true
|
|
|
|
|
|
let mc = new Hammer(this.$refs['hammer-target'])
|
|
|
@@ -92,9 +123,15 @@ export default {
|
|
|
that.$router.push({ name: 'TreeSelection' })
|
|
|
})
|
|
|
})
|
|
|
- tween.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
- tween.start()
|
|
|
+ tween6.easing(TWEEN.Easing.Sinusoidal.InOut)
|
|
|
+
|
|
|
+ tween1.chain(tween2)
|
|
|
+ tween2.chain(tween3)
|
|
|
+ tween3.chain(tween4)
|
|
|
+ tween4.chain(tween5)
|
|
|
+ tween5.chain(tween6)
|
|
|
|
|
|
+ tween1.start()
|
|
|
this.requestAnimationId = this.animate()
|
|
|
}, 1000)
|
|
|
}
|
任一存