Add Animation Controls widget

[elenatorro]

Fix CartoDB/cartoframes#812

Add a simple Animation Controls widget and its VL Bridge connector

[rjimenezda]

Looks good, but I feel like the Bridge code could be extracted to a common place since so much is shared between this and the time series.

[rjimenezda]

Couple more things I saw

[VictorVelarde]

Have we considered adding the timestep visually (over or under the range slider)? I think we should. With that piece, I think we cover a much higher number of use cases.

Some ideas we could use:

• a boolean property to display it: 'none', 'top', 'bottom'
• a function receiving a date, to control the formatting

What do you think?

[rjimenezda]

I think the idea was to keep it simple. Having it on the scrubber makes it tricky to format (overflow on the sides). Also I don't know if the range sliders supports having it elsewhere.

We already have some things to format dates due to the as-time-series-widget (it receives a format as per d3-time-format).

[elenatorro]

I like the idea, actually there're other things it'd be great to have, like showing the current value of the animation. As Román says, we idea is to keep it simple now and create all the widgets, see how they work together, and then improve them. It'd also be great if the design team could be involved, but I'd do that in the next iteration.

[VictorVelarde]

@elenatorro @rjimenezda I was talking about 'current value of the animation' indeed 😄 , but it's clear that I didn't explain myself correctly.

I aggree with not adding it now, in this first version, but I think that displaying the date will be eventually required. Let's wait then.

[andy-esch]

I just wanted to chime in that I agree with @VictorVelarde and think it's important for the next iteration of this widget to have the current timestamp (or number if animating on a numerical field). This helps the person viewing the map and interacting with it to understand the when and where of the events in the data. I also love @rjimenezda's idea of having a formatting string so the user can control how the timestamp (or number) is shown on the map.