Document how to screen shot animations

[awhitford]

When new animations are introduced, we need to know how to best capture new animation samples. Specifics around:

• settings (resolution, duration, etc.)
• tooling
• optimization techniques

will be helpful.

[SirusCodes]

I don't how other did it, but when I created my animation, I screen recorded it and the converted it to a gif using ezgif.com or some other site.

@aagarwal1012 how you did it? Some GSSoC participant can do it or I can document it in CONTRIBUTING.md

[awhitford]

@SirusCodes / @aagarwal1012 We need some advice to give folks offering new animations. (GSSOC Participants are going to want their points, and I don't want to approve a new animation that isn't fully documented.)

Another thing worth mentioning is that the sample is square -- looks like 1048 x 1048 resolution is typical.

🤔 I would love to see the display images captured during the test execution. I'm aware you can do that for screenshots, but I am not sure we can capture an animation.

golden_toolkit is another option for screenshots, but I don't see advice for animation. I did find AnimationSheetBuilder, but it does not appear to create an animated gif.

[SirusCodes]

Currently I don't think that there is a way to capture a gif widget_record and widget_recorder are option but they are not worked upon so we might consider to ask them to screen record and convert video to gif.
I don't think we can automate this for now...

[aagarwal1012]

@aagarwal1012 how you did it? Some GSSoC participant can do it or I can document it in CONTRIBUTING.md

@SirusCodes I also followed your way to use a screen recorder, trimmed the video to make it look consistent, and converted it to gif or webp image online using ezgif.com or similar websites.

[aagarwal1012]

I found a really good documentation from the flutter team, https://github.com/flutter/flutter/wiki/Making-animated-GIFs-of-Flutter-apps. Take a look at it @awhitford @SirusCodes.

[SirusCodes]

I found a really good documentation from the flutter team, https://github.com/flutter/flutter/wiki/Making-animated-GIFs-of-Flutter-apps. Take a look at it @awhitford @SirusCodes.

Yes, this looks better it will work. For ease we can ask them to record it.

1. On emulator you can directly record it.
2. Currently most physical devices have inbuilt screen recorder or they can use these commands

We can give them a other specifications for gif.

1. Gif should look like it's on loop.
2. Size of gif and aspect ratio

[awhitford]

I like the documentation from the flutter team -- that should be good for now. We should add a section to the README that outlines advice for adding new animations. It could link to the flutter doc, but it also should provide some additional advice to generate the appropriate output -- like square gif ~ 1048x1048.

🤔 However, maybe we should strive to let #201 negate the need to do this altogether. If we had a cool, generated web-app that showed the animations interactively, then that satisfies our documentation requirement and we won't need to jump through hoops to capture animation samples.