DEV Community: John Wika Haakseth

Creating custom webmap animations - Adding easing

John Wika Haakseth — Sun, 02 Feb 2020 17:18:18 +0000

From the previous parts of this series, we have a pretty good animation. There is still one more thing to do to create an even more pleasant animation: Easing.

Add easing

Right now our animation is linear. In nature, most motion has an acceleration component to it. This mean that we as humans are used to it, and we should use it in web-animations as well, to make our interfaces more pleasant to use.

I found a good source of easing functions for javascript here, and some nice visualizations here. Google Developers also has a well-written article on the subject. For this example, let’s try the following function:

const easeInOutCubic = t =>
  t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;

We can then rewrite our createNormalizedLineFeature() function to vary the along length like so:

export const createNormalizedLineFeature = (feature, res = 60) => {
  const alongDist = length(feature) / res;
  const normalizedFeature = {
    ...feature,
    features: [
      {
        ...feature.features[0],
        geometry: { ...feature.features[0].geometry, coordinates: [] }
      }
    ]
  };
  for (var i = 0; i < res; i++) {
    const newCoord = along(
      feature.features[0].geometry,
      alongDist * (i * easeInOutCubic(i / res))
    );
    normalizedFeature.features[0].geometry.coordinates.push(
      newCoord.geometry.coordinates
    );
  }
  return normalizedFeature;
};

By varying the distance between the points on our route, we get a more pleasing result:

In the first part of this series, I said that this method works equally well for other map libraries. To put my money where my mouth is, here is the same example in OpenLayers. OpenLayers even provide their own easing functions we can use.

There are still more things to do for us to improve these animations, but this post is getting long enough. For example:

Control duration of animation based on actual time in stead of just frames.
Handle framedrops. For instance, if the browser is struggling, fall back to just showing the route.
Handle different types of geometries. Routes may consist of multiLineStrings. Also, maybe we want to animate polygons or points?

If you enjoyed this series, or have any feedback, feel free to comment, or contact me on twitter. My website is at haakseth.com.

Creating custom webmap animations - Controlling duration

John Wika Haakseth — Sun, 02 Feb 2020 17:14:48 +0000

Approach
Calculating length and finding points along the line using turf.js
Result

In the previous part, we set up the application, and added animation to the feature we’re adding to the map. Since we added only one point to the line feature for each animation frame, we saw that for longer routes, this could make the animation unbearably long. In addition, due to the line’s topology, some parts of the line might have more points than others, thus making the animation vary in speed:

Ouch! Let’s bring out turf.js to work on the line to make a smooth, predictable animation.

Approach

Chop the line into equal parts of line length divided by our desired line resolution.
In stead of adding a single point per animation frame, we’ll add number of points divided by number of desired animation frames per animation frame. This lets us control the length of the animation.
Finally, when the animation is done, we’ll replace the animated feature with the original one, as doing the previous steps will change its topology some, depending on our line resolution.

Calculating length and finding points along the line using turf.js

In order to get a smooth line of a given resolution we’ll have to do some work on the feature. For this we’ll use turf’s functions length and along. Let’s define a function createNormalizedLineFeature(feature, resolution) that takes a line feature and does the following:

Calculate the feature’s distance
Based on distance and resolution, calculate “along-distance” for feature (how far between each point). Higher resolution will make the line more detailed, but will demand more computing power.
Create feature without coordinates.
Use the along function for turf to add coordinates to feature along the original line.

Here is an implementation:

const createNormalizedLineFeature = (feature, resolution = 60) => {
  const alongDist = length(feature) / resolution;
  // create base feature, without coordinates
  const normalizedFeature = {
    ...feature,
    features: [
      {
        ...feature.features[0],
        geometry: { ...feature.features[0].geometry, coordinates: [] }
      }
    ]
  };
  // add coordinates
  for (var i = 0; i < resolution; i++) {
    const newCoord = along(feature.features[0].geometry, alongDist * i);
    normalizedFeature.features[0].geometry.coordinates.push(
      newCoord.geometry.coordinates
    );
  }
  return normalizedFeature;
};

Result

Great! Now our animation will be just as fast, no matter how long the feature is. We can use the resolution parameter to make it more or less detailed during animation. Just remember to replace the animation feature with the original route feature when the animation is complete, as we might lose some detail depending on our resolution.

In the next and final part, we’ll try to make the animation feel more natural by adding easing.

Creating custom webmap animations

John Wika Haakseth — Sun, 02 Feb 2020 17:10:19 +0000

Result
The base app
Adding motion using requestAnimationFrame

Micro animations in web applications are useful to guide users’ attention. They can even give the users extra information! Web map libraries come with a fixed set of built-in animations, like panning, zooming, and sometimes fading styles. What if we want to do more? Using requestAnimationFrame(), we can create our own, custom animations.

I did a talk on this topic at Kortdage 2019, you can find the slides on my talks page.

Result

This is where we’ll end up in these posts. The idea is an app that shows the user a route on the map. In stead of just having the route appear, we can have it grow from start to stop. Not only is this more pleasing and delightful for the user, it also makes the route direction obvious.

Awesome, right? Let’s go through the process of developing this animation step-by-step. This example is using Mapbox GL, but the same technique can be used in OpenLayers or Leaflet as well.

The base app

So our app simply fetches a route for the user and shows it to the user. The examples in this post are simplified to not take moving the map into consideration for the animation and only focus on the route itself.

This is what we’re starting with. Pressing the button simply puts the route on the map. If the users blink they might not even notice something changed.

Adding motion using requestAnimationFrame

Let’s add some motion. In stead of just adding the route itself to the map, we want to store it in a variable, and add it coordinate by coordinate to the map. But how do we know how often to add coordinates?

requestAnimationFrame() is good for this. The usage is simple: Define a method to run for each frame. To start simply call requestAnimationFrame with your method as a callback. Then, in your method have a clause that says whether it should be called again, if so do it!

Say we want to animate something 10 times:

let count = 0;
function yourMethod() {
  count++;
  // Do stuff
  if (count > 10) {
    requestAnimationFrame(yourMethod);
  } else {
    count = 0;
  }
}
requestAnimationFrame(yourMethod);

In the our base example above, we simply add our feature by calling:

map.getSource("line-animation").setData(routeFeature);

To animate it, we define an animateLine() method that:

Counts the number of coordinates in our route LineFeature and how many times it has been called.
In addition to our route feature, we define an animationFeature, without coordinates in it.
Add another coordinate to the animationfeature and calls requestAnimationFrame(animateLine) until we’re finished.

It will look something like this:

let animationFeature = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "LineString",
        coordinates: []
      }
    }
  ]
};
let progress = 0;
const animateLine = () => {
  const numberOfPoints = route.features[0].geometry.coordinates.length;
  if (progress < numberOfPoints) {
    // append next coordinate pair to the lineString
    animationFeature.features[0].geometry.coordinates.push(
      route.features[0].geometry.coordinates[progress]
    );
    map.getSource("line-animation").setData(animationFeature);
    progress++;
    // Request the next frame of the animation.
    requestAnimationFrame(animateLine);
  } else {
    progress = 0;
  }
};

Nice! This works pretty well. However, we’re not quite finished. Since we’re adding a single coordinate for each frame, the duration of the animation will vary greatly depending on how long our feature is. Take a look at what happens if we want to show a longer route:

Probably not what we want! Also, since there will be more points where the line curves, the speed of the animation will slow down there, which might be undesirable. Go on to part 2 of this series to see how we can work with that.