New Animation like Moving Letters Effect 15

[awhitford]

@saurabhraj042 requested to add a new animated text like Effect 15

[saurabhraj042]

@awhitford thanks for opening this issue , please assign it to me .

[saurabhraj042]

@awhitford I have a doubt like in the sample Effect 15 we have two separate Text elements, but in the animated-text kit package most of the animations work with single string at a time and I have been able to recreate Effect 15 for only one String at a time so I just want to confirm if that's we are planning to do .

[awhitford]

Focus on the effect for 1 text element. What you are really animating is the zoom in effect.

You can consider that Effect 15 is actually TWO animated texts positioned side by side with a delay.

[SirusCodes]

@saurabhraj042 You can implement it with CustomPainter https://github.com/aagarwal1012/Animated-Text-Kit/blob/master/lib/src/wavy.dart is implemented using CustomPainter

It requires a lot of mathematical calculations but very customizable

[awhitford]

Uhm... Is a CustomPainter approach really necessary? Isn't this just a reverse Scale Animation? You can likely take the Scale Animation and make some adjustments.

[SirusCodes]

What I'm thinking is that user will pass a List<String> like ["Buy Now", "On Sale"]

The sequence of animation would be like.

1. Buy scales in
2. Now scales in
3. Buy Now fades out
4. On scales in
5. and so on...

This would be better with CustomPainter

[SirusCodes]

Oh I realized with CustomPainter user would be able to manage duration of text showing up🤔

[awhitford]

@SirusCodes It would be wise to contain complexity. I also want to avoid baking too much complexity in a specific animation because a compositional approach that could be used for other animations is preferred.

The AnimatedText class is designed to animate one text string. If you want to string multiple texts, you then specify a List<AnimatedText> elements to AnimatedTextKit.

[SirusCodes]

@SirusCodes I would be wise to contain complexity. I also want to avoid baking too much complexity in a specific animation because a compositional approach that could be used for other animations is preferred.

Yaa I also feel that CustomPainter will over complicate the animation.

The AnimatedText class is designed to animate one text string. If you want to string multiple texts, you then specify a List<AnimatedText> elements to AnimatedTextKit.

What are you trying to say? AnimatedTextKit is already taking List<AnimatedText> as parameter🤔

[saurabhraj042]

@awhitford https://codeshare.io/GqgYqX please review this code snippet, I tried keeping it simple and the animation was close to Effect 15

[SirusCodes]

@saurabhraj042 can you open a PR with gif of that animation?

[awhitford]

What are you trying to say? AnimatedTextKit is already taking List<AnimatedText> as parameter🤔

AnimatedTextKit is a small example of a compositional approach because one can mix and match different AnimatedText subclasses.

To be even more clear...

• My expectation for a new AnimatedText subclass is to animate one text value.
• If we wanted to match exactly the Effect 15 example, there are 2 concepts that we need to account for:
  1. There are two text animations side by side. We can use a Row.
  2. The right animation is triggered with a bit of a delay. One could use DelayedDisplay -- or we should build something similar that could be used for any animation (not bake delay functionality into a specific animation).

I hope this helps clarify my earlier comments.

[SirusCodes]

Yes thanks now it's a lot clear 😃

[awhitford]

@awhitford https://codeshare.io/GqgYqX please review this code snippet, I tried keeping it simple and the animation was close to Effect 15

I think this is meeting my expectations. I'd have to see it in action to be sure, but it looks pretty good.

I wonder if we can come up with a better name for the effect than OutNow. It seems more like a "Zoom In" effect to me, but I'm definitely open to ideas here.

Also, I'm advocating that we do not make a corresponding Kit class for each new animation. (We have them for the old animations for backwards compatibility.)

[saurabhraj042]

@awhitford I will do the changes and make a PR asap !

[awhitford]

In addition to the new animation class...

• the README needs to be updated with a sample screenshot of the animation. (I actually do not know how @aagarwal1012 did that -- that's why #202 was created.)
• the example app needs to be updated to include the new animation.
• we expect test coverage

[SirusCodes]

I wonder if we can come up with a better name for the effect than OutNow. It seems more like a "Zoom In" effect to me, but I'm definitely open to ideas here.

How about ZoomInFadeOut?

Also, I'm advocating that we do not make a corresponding Kit class for each new animation. (We have them for the old animations for backwards compatibility.)

Let's wait for the final words from admin.

[saurabhraj042]

@awhitford What do you mean by test coverage ?

[aagarwal1012]

Also, I'm advocating that we do not make a corresponding Kit class for each new animation. (We have them for the old animations for backward compatibility.)

I agree with @awhitford, we don't need any kit class from now on.

ZoomInFadeOut looks fine to me @SirusCodes . 😅