官术网_书友最值得收藏!

Animating a value

These banners would be prettier if we could animate them when they shrink or grow. We can't rely on CSS transitions since we need to dynamically change the SVG path, so we need another way--we will animate the value of the height property used in the template.

  1. First, let's rename our template computed property to targetHeight:
      computed: {
targetHeight () {
return 220 * this.ratio + 40
},
},

This targetHeight property will be calculated only once whenever the ratio changes.

  1. Add a new height data property that we will be able to animate each time targetHeight changes:
      data () {
return {
height: 0,
}
},
  1. Initialize the value of height with the value of targetHeight when the component has been created. Do this in the created hook:
      created () {
this.height = this.targetHeight
},

To animate the height value, we will use the popular TWEEN.js library, which is already included in the index.html file. This library works by creating a new Tween object that takes the starting values, an easing function, and the ending values. It provide callbacks such as onUpdate that we will use to update the height property from the animation.

  1. We would like to start the animation whenever the targetHeight property changes, so add a watcher with the following animation code:
      watch: {
targetHeight (newValue, oldValue) {
const vm = this
new TWEEN.Tween({ value: oldValue })
.easing(TWEEN.Easing.Cubic.InOut)
.to({ value: newValue }, 500)
.onUpdate(function () {
vm.height = this.value.toFixed(0)
})
.start()
},
},

The this context in the onUpdate callback is the Tween object and not the Vue component instance. That's why we need a good old temporary variable to hold the component instance this (here, that is the vm variable).

  1. We need one last thing to make our animation work. In the main.js file, request the paint frames from the browser to make the TWEEN.js library tick, thanks to the browser's requestAnimationFrame function:
      // Tween.js
requestAnimationFrame(animate);

function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}

If the tab is in the background, the requestAnimationFrame function will wait for the tab to become visible again. This means the animations won't play if the user doesn't see the page, saving the computer resources and battery. Note that it is also the case for CSS transitions and animations.

Now when you change the food or the health of a player, the banners will progressively shrink or grow.

主站蜘蛛池模板: 紫云| 巨野县| 长顺县| 江陵县| 虹口区| 达日县| 固镇县| 平遥县| 鹤山市| 武夷山市| 英吉沙县| 勃利县| 汨罗市| 西畴县| 汪清县| 确山县| 江孜县| 抚顺县| 邛崃市| 玉溪市| 太谷县| 海伦市| 阿鲁科尔沁旗| 辽中县| 金湖县| 灌云县| 漠河县| 赞皇县| 阳江市| 长顺县| 肇庆市| 大田县| 修武县| 大石桥市| 博客| 南川市| 山东省| 林口县| 镇巴县| 什邡市| 渝北区|