Lottie-android: feature request: gif/mp4 output

[AhmadKabi]

thanks for an amazing library
i have an expectation about this library, that we can convert our animation played by LottieAnimationView to become gif/mp4. So that we can share this animation file through social media, or the others.
btw, i am using lottie 2.5.1

thanks a lot for your awasome work.

[rogererill]

Hi @AhmadKabi, I currently have a very similar problem to yours. I'm currently working on a solution to generate a .mp4 out of a lottieDrawable.

The approach I'm using is to iterate through every frame in your LottieDrawable, by using setFrame(int frame). Once the frame is set, send your LottieDrawable to a "FrameRecorder" or similar that you'll need to create.

This Recorder is based on this example from Google but the generateFrame method would be like:

public void generateFrame(Drawable yourLottieDrawable) {
       drainEncoder(false);

       final Canvas canvas = inputSurface.lockCanvas(null);

        try {
            yourLottieDrawable.draw(canvas);
        } finally {
            inputSurface.unlockCanvasAndPost(canvas);
        }
    }

Beware thought, that if your animation contains text, this will not be recorded (see #726).

[AhmadKabi]

I still wonder, what is LottieDrawable? I guess that the animation played is a collection of bitmap/vector. and my next question is how to get this single vector, so we can collect those to become one gif/mp4.?

If I don't bother you, could you give me step by step guide to do your approach above
thanks a lot

[gpeal]

You can just record it in your app with:
adb shell screenrecord --size 720x1280 /sdcard/recording.mp4
Then pull it with adb pull /sdcard/recording.mp4 ~/Downloads/

I also have a little bashrc alias handy for converting it to a gif

Gif()
{
    ffmpeg -i $1.$2 -pix_fmt rgb24 -r 20 -f gif $1.gif
}
alias gif=Gif

WIth that, you'd run gif recording mp4
Then, there are a multitude of ways of cropping it.

[AhmadKabi]

Actually I intent to make users have this feature too, that they can save animation they look into a gif/mp4 so that they can share to their friends easily. could you give some programmaticaly way to achive this point.?

thank you very much

[rogererill]

@AhmadKabi I plan on writing a post on Medium explaining the solution once I finish it :) I'll make sure to let you know once it's done, but the basics are the ones I told you before. Create a LottieComposition out of your Json file, attach that composition to your newly created LottieDrawable and then iterate frame by frame and send those frames to your MediaCodec

[AhmadKabi]

owh, Thanks a lot for your kindness :)

[AhmadKabi]

Hi, @rogererill, I have tried your guide above. and I have obstacle when iterating frame of LottieDrawable. My SoftInputSurfaceActivity code looks like :

`@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_soft_input_surface);

        TextView tv = (TextView) findViewById(R.id.softInputResult_text);

        try{
            LottieComposition composition = fromJsonSync(new JsonReader(new InputStreamReader(getAssets().open("car.json"))));
            drawable = new LottieDrawable();
            drawable.setComposition(composition);
        }catch (Exception e){

        }

        // Be VERY BAD and do the whole thing during onCreate().
        Log.i(TAG, "Generating movie...");
        try {
            generateMovie(new File(getFilesDir(), "soft-input-surface.mp4"));
            tv.setText(getString(R.string.succeeded));
            Log.i(TAG, "Movie generation complete");
        } catch (Exception ex) {
            Log.e(TAG, "Movie generation FAILED", ex);
            tv.setText(getString(R.string.failed));
        }
    }`

private void generateMovie(File outputFile) {
        try {
            prepareEncoder(outputFile);

            for (int i = 0; i < drawable.getMaxFrame(); i++) {
                drainEncoder(false);

                drawable.setFrame(i);
                generateFrame(drawable);

            }

            drainEncoder(true);
        } catch (IOException ioe) {
            throw new RuntimeException(ioe);
        } finally {
            releaseEncoder();
        }
    }

public void generateFrame(Drawable lottieDrawable) {
        drainEncoder(false);

        final Canvas canvas = mInputSurface.lockCanvas(null);

        try {
            lottieDrawable.draw(canvas);
        } finally {
            mInputSurface.unlockCanvasAndPost(canvas);
        }
    }

no error occured when compiling those codes actually. But mp4 rendered was just a blank video. it just plays black screen video. any suggestion to resolve this problem?. Thanks a lot

[AhmadKabi]

@rogererill Thank you so much, i have achieved my point using your advice above.

cheers :grin:

[rogererill]

@AhmadKabi I'm very glad you could work it out! 😄

[rogererill]

For further reference if someday someone has this issue again: https://engineering.21buttons.com/how-to-generate-videos-using-lottie-in-android-2db6ecceb2a

[xiexuesong]

@AhmadKabi how do it to slove blank video?Can you tell me?

[wxjer]

@rogererill Hi, Could you please give me some advice to reslove the blank video with black background?

[ashokgujju]

@AhmadKabi @rogererill I have followed the same approach, got stuck with the same blank video issue. Could you tell me how to fix it?

[rogererill]

Hello @wxjer @xiexuesong @ashokgujju, I created a simplified small project https://github.com/rogererill/LottieRecorderTest where you can see in more detail my full Recorder class and the canvas management. I hope it helps you figuring out the issue!

[ashokgujju]

Thanks @rogererill, It worked for me.

[luckydonald]

Just for those looking for some kind of server side rendering instead of android
(as this question is one of the first google/ddg hits when searching lottie mp4):

There is https://github.com/transitive-bullshit/puppeteer-lottie, which also has a CLI version available.