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.