Small animation improvements

[Aditya94A]

• [ ] When you click a lot in the minute picker (That is, repeatedly and quickly click at a lot of different positions) the animation sometimes skips, the minute hand just appears at the final position without animating from it's current position.

  I think the correct behavior should be to take the current position of the minute hand (wherever that is, stationery or in the middle of another animation due to a previous click) and use that as starting position (stop the old animation if necessary) and then just go from there.

• [ ] The second thing I noticed is that whenever you click at a number, say 5 or 30 or whatever (in both the minute and hour pickers) the font color of the number changes to white immediately on the click. So, for a few 100s of milliseconds, we see white text on the light grey-ish background, which doesn't look very good.

  Here's an idea, change the color to white just before the hand reaches that number. I mean as the big blue circle is about to overlap with the number (as over 25 below), that is when the text should change to white. The change of color should coincide with the end of the hand's animation, or maybe a little bit before.

Let me know if you don't quite get what I mean and I'll make a video.

[leMaik]

Thanks a lot for using this component and for the feedback. :)

1. ~Is this a valid use case or just clicking around and seeing whether the component will explode?~ I'll look into this, but I think it's low priority. :wink:
2. I know exactly what you mean and this actually also bothers me. :sweat_smile: Android clips the font over the circle and displays it partially white and partially black. This is also possible in CSS (with some... fiddling) and I'll look into this.

[PorterK]

A good idea I had to fix the color is to possibly use CSS masks to invert the color of the text. I messed with the implementation a little but didn't land on anything solid

[leMaik]

@PorterK Same here. I wasted several hours on that. :sweat: