How to control speed of animation?

[wonjiky]

How do I control the animation speed of the flow? I am currently passing a number variable through requestAnimationFrame but can't seem to control the speed of the animation unlike the example..

[ilyabo]

Good point, animationSpeed isn't currently exposed as a prop in <FlowMap>. Probably it should be. You can control it if you use FlowMapLayer directly.

BTW, why do you want to change it?

[wonjiky]

Thanks for the answer. I was able to tweak the speed by digging into the animate function and changing the animationSpeed.

However, I guess my question was specifically towards FlowMapLayer. Currently, the flow is really fast when I pass in a value to animationCurrentTime prop and I want to slow it down like the <FlowMap/>.

[ilyabo]

but if you have your own requestAnimationFrame then you are in control of how much/fast the time increases on each tick, no?

[wonjiky]

Thats what I expected too.. This is my code... could you possibly point out what I am doing wrong here?

  const [time, setTime] = React.useState(0)
  function animate () {
    var loopLength = 1800; 
    var animationSpeed = 30;
    var timestamp = Date.now() / 1000;
    var loopTime = loopLength / animationSpeed;
    setTime(((timestamp % loopTime) / loopTime) * loopLength)
    requestAnimationFrame(animate);
  };

  React.useEffect(() => {
    requestAnimationFrame(animate);
  }, []);

  const flowMap = new FlowMapLayer ({
    id: 'my-flowmap-layer',
    locations:
    [{ id: 1, name: 'New York', lat: 40.713543, lon: -74.011219 }, 
     { id: 2, name: 'London', lat: 51.507425, lon: -0.127738 }, 
     { id: 3, name: 'Rio de Janeiro', lat: -22.906241, lon: -43.180244 }],
  flows: 
    [{ origin: 1, dest: 2, count: 42 },
     { origin: 2, dest: 1, count: 51 },
     { origin: 3, dest: 1, count: 50 },
     { origin: 2, dest: 3, count: 40 },
     { origin: 1, dest: 3, count: 22 },
     { origin: 3, dest: 2, count: 42 }],
    animate: true,
    animationCurrentTime: time,
    getFlowMagnitude: (flow) => flow.count || 0,
    getFlowOriginId: (flow) => flow.origin,
    getFlowDestId: (flow) => flow.dest,
    getLocationId: (loc) => loc.id,
    getLocationCentroid: (location) => [location.lon, location.lat],
  });

[ilyabo]

Ah, you might have an issue with stale props here. You should probably use refs. Check this example.

[wonjiky]

Great! Thank you so much I think I finally figured it out.

One more question, I figured I could assign colors to each dest/origin using the getFlowColor prop but what is the colors prop?.. setting it to any color like red or green don't seem to do anything..

[ilyabo]

colors is a data structure in which you can customize the colors used for the flow map. Sorry, it lacks a proper documentation. But here is the type definition for it.

You can pass it to FlowMapLayer as an object overriding only some of the properties like in this or this example.

getFlowColor overrides flow colors defined in colors.