feat: Drawing order animation

[apomalyn]

As a user, I want to see how to draw a kanji, kana or vocabulary step by step.

Requirements

• UI
  • the animation control panel should be composed of:
  • left icon button
    • icon: Icons.fast_rewind_rounded
    • on tap: back one step
    • on long press: go to start
  • central icon button
    • icon: Icons.play_arrow_rounded and Icons.pause_rounded
    • on tap: first tap play animation, second tap pause animation
  • right icon button
    • icon: Icons.fast_forward_rounded
    • on tap: advance one step
    • on long press: go to the end

What needs to be done

• Create a widget (AnimatedDrawing) that draws any kana, or kanji passed with an animation controller (optional)
• Create a widget composed of:
  • the previously created widget (AnimatedDrawing)
  • the animation control panel
• Implement everything inside the DetailsView.
  • by default, the AnimatedDrawing should be displayed and the animation should be run one (1) time when the view is opened
  • if AnimatedDrawing is tapped, show the animation control panel
• Write the necessary tests

Dependencies

• 102

• Data format decision
• Implementation of the data inside the API

[apomalyn]

Here is my proposition for the data format. Let's assume a drawing canvas of 100x100

Each pencil movement will be an array of positions looking like this:

[
  [10, 10] // Starting point
  [12, 15] // Another point somewhere like a curve
  ... // Any other point
  [20, 20] // Ending point
]

We just need to repeat these for each strike and we would have something like this:

[
  [[0, 0], [5, 5], [10, 10]] // First strike
  [[3, 3], [4, 4]] // Second strike
  ...
]

This info would be only available for the kana and kanji, we will skip the vocabulary as it's supposed to be only composed of kana and kanji.

Also, it will be given when you get the full details of the kanji or it could be a completely different endpoints 🤔