I am creating a custom TextView widget with Flutter in which I want to show animations of handwritten digits, such that it seems that the text is written by hand.
I created animations for every digit with flare using 60 fps and a duration of 00:00:50 (500ms).
When dealing with multiple digits, the animations have to be played sequentially from left to right. I.e. the animation of the second digit should only start after the animation of the first digit has ended.
A second point is that when actually writing by hand, the durations for each digit to be written vary. E.g. a "1" doesn't take as long to write as a "5".
Up to now, I used hardcoded delays of 700ms using the Timer class. E.g. when writing the number "18", first the animation for the "1" is started, then after waiting for 700ms, the animation for the "8" is started and so on. The problem is that the sequence of animations still doesn't seem natural, neither after playing around with different delay values.
Example usage of handwritten "1" animation:
FlareActor(
"assets/animations/hw_1.flr",
alignment: Alignment.center,
fit: BoxFit.fitHeight,
animation: firstAnimationState,
)
Start of two sequential animations:
setState(() {
// start first animation
firstAnimationState = "write";
});
Timer(const Duration(milliseconds: 700), () {
setState(() {
// start second animation
secondAnimationState = "write";
});
});
It should be easy to synchronize digit animations within my widget and also to synchronize complete TextViews between each other.
Is there a way in Flutter to either retrieve the duration of an animation programmatically (within FlareActor) or can the duration of a played animation be set in advance?
You could hook up to the completed event of the FlareActor widget and then play the next animation.