Split animations into discrete ideas and provide composibility

[awhitford]

While pondering the similarities between #175/#180 and #207 (and even #203), it occurred to me that maybe we should split some of these animations into more discrete parts, and then offer some wrappers that can combine animations.

For example:

• instead of offering Fade that fades in and then out, we can offer a FadeIn and FadeOut effect. We can keep Fade that simply combines the FadeIn with FadeOut.
• instead of offering Scale that scales in and then out, we can offer a ScaleIn and ScaleOut effect. Similarly, we can keep Scale that simply combines the ScaleIn and ScaleOut.
• instead of Rotate that rotates in and then out, we can offer a RotateIn and RotateOut effect. (I think you know where I'm going with this...)

The benefit of this approach is even more flexibility and customization opportunities. For example, instead of offering a rotateOut property that short-circuits the rotation, the user can simply use the RotateIn animation. Also, imagine combining the ScaleIn and FadeOut for a unique effect.

There is likely room to grow a set of combiners that offer even more unique functionality, like delays, pauses, maybe even running animations at the same time (would that solve #191?).

[SirusCodes]

At the start I thought why to split out them if we can pass a flag but now, I think it is not a bad idea.

I have a few doubts...

1. Are you saying that Fade will be parent of FadeIn and FadeOut?
2. FadeIn and FadeOut will accessible to the users as well?
3. If yes then will the API be similar to that of v3?
4. If animation is XYZIn how user will wrap it with another XYZOut?

[awhitford]

I just tried an experiment last night to split up Fade and it was working great until I hit the animatedBuilder. 🤔

[SirusCodes]

What issue did you faced?

[awhitford]

If you compose multiple animationBuilders/build, there are theoretically 2 strategies:

• Stack them so that all animations are executed.
• Specify an interval for each animation(s) to apply.

I think the latter strategy is the only real logical solution.

[SirusCodes]

Like show the animation FadeIn for 0-0.5 and 0.5-1 FadeOut??

[awhitford]

Yes, something like that.

I switched gears and did some other work, like removing textStyle as required. I will come back to this soon.