Export animation as a video

[Panda-Sharp]

Hi,

I'd like to export the animation as a video (eg: mp4), do you think is it possible? Can you provide me some directions on how to do it? thanks

regards

[azchohfi]

Thanks for your input, but this is not something that we are looking into supporting. You can do it directly from After Effects, or any capturing software (Camtasia or similar, or even Windows 10 game bar).

[Panda-Sharp]

Hi @azchohfi thanks for your reply, I understand that you're not looking into support it, but it's something that I'm trying to work out by myself, Can you point me out to some directions? What is the final animation, a composition, a list of images... ? Which part of your code should I look into that contains it? hope you can help me out. thanks

p.s. If I'll can make it work, I'll be glad to share the code of course :)

[azchohfi]

The image itself is only being drawn to a Win2D CanvasAnimatedControl. That is on the LottieDrawable class. You could hook up to the drawing event and after every frame save it into an image file. That is possible. You could then generate a video based on the images. That's what I would do.

[Panda-Sharp]

Thanks @azchohfi I managed to make it work, it's still not perfect, but at least it's a good start... would you like me to share the code? here in the comments or in a pull request? Cheers

[azchohfi]

It's awesome that you made it work. Share it here in the comments so someone looking for this might find it here.

[Panda-Sharp]

ok so I added a MediaElement in Mainpage.xaml

<MediaElement Grid.Row="4" x:Name="mediaElement" AutoPlay="True" AreTransportControlsEnabled="True" Width="200" Height="200"/>

and two buttons that calls the following methods in the code behind

    `private void GenerateVideoFromAnimationButton_OnClick(object sender, RoutedEventArgs e)
    {
        LottieAnimationView._lottieDrawable.GenerateVideoFromAnimation(mediaElement);
    }

    private void SaveButton_OnClick(object sender, RoutedEventArgs e)
    {
        LottieAnimationView._lottieDrawable.SaveVideo();
    }`

the rest of code is in lottiedrawable.cs

   `private MediaComposition _mediaComposition = new MediaComposition();

    public async void GenerateVideoFromAnimation(MediaElement mediaElement)
    {
        _mediaComposition = new MediaComposition();

        for (float i = 0; i < MaxFrame; i++)
        {
            Frame = i;
            await SaveCanvasAsPng();
        }

        GenerateMediaElement(mediaElement);
    }

    private async Task AddFile(IStorageFile file)
    {
        var clip = await MediaClip.CreateFromImageFileAsync(file, TimeSpan.FromMilliseconds(_animator.FrameDurationNs / 1000000));
        _mediaComposition.Clips.Add(clip);
    }

    public async Task SaveCanvasAsPng()
    {
        await SaveCanvasAsPng(_canvasControl);
    }

    private async Task SaveCanvasAsPng(UIElement canvasControl)
    {
        try
        {
            Size canvasSize = canvasControl.RenderSize;
            Point defaultPoint = canvasControl.RenderTransformOrigin;

            canvasControl.Measure(canvasSize);
            canvasControl.UpdateLayout();
            canvasControl.Arrange(new Rect(defaultPoint, canvasSize));

            var bmp = new RenderTargetBitmap();
            await bmp.RenderAsync(canvasControl);

            var file = await ApplicationData.Current.LocalFolder.CreateFileAsync($"{_mediaComposition.Clips.Count.ToString()}.png", CreationCollisionOption.ReplaceExisting);
            using (var stream = await file.OpenStreamForWriteAsync())
            {
                var pixelBuffer = await bmp.GetPixelsAsync();
                var logicalDpi = DisplayInformation.GetForCurrentView().LogicalDpi;

                var randomAccessStream = stream.AsRandomAccessStream();

                var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, randomAccessStream);
                encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)bmp.PixelWidth, (uint)bmp.PixelHeight, logicalDpi, logicalDpi, pixelBuffer.ToArray());

                await encoder.FlushAsync();
            }

            await AddFile(file);
        }
        catch
        {
            // ignored
        }
    }

    private void GenerateMediaElement(MediaElement mediaElement)
    {
        Debug.WriteLine(_mediaComposition.Clips.Count);
        if (_mediaComposition.Clips.Count < 0) return;

        mediaElement.Position = TimeSpan.Zero;
        IMediaSource mediaStreamSource = _mediaComposition.GeneratePreviewMediaStreamSource(400, 400);
        mediaElement.SetMediaStreamSource(mediaStreamSource);
    }

    public async void SaveVideo()
    {
        if (_mediaComposition.Clips.Count < 0) return;
        var file = await ApplicationData.Current.LocalFolder.CreateFileAsync($"{_mediaComposition.Clips.Count.ToString()}.mp4", CreationCollisionOption.ReplaceExisting);

        if (file != null)
            await _mediaComposition.RenderToFileAsync(file, MediaTrimmingPreference.Precise);
    }`

P.S. is still a work in progress but at least I got some result, feel free to suggest fixes and improvements