add support for video Export usage #30

alexiscn · 2017-02-04T10:45:38Z

I want to export this amazing animation into my video file with AVFoundation.

let animationView = LAAnimationView.animationNamed("hamburger")

let parentLayer: CALayer = CALayer()
let videoLayer: CALayer = CALayer()
videoLayer.frame = CGRect(x: 0, y: 0, width: renderSize.width, height: renderSize.height)
parentLayer.frame = CGRect(x: 0, y: 0, width: renderSize.width, height: renderSize.height)
parentLayer.addSublayer(videoLayer)

parentLayer.addSublayer(animationView.layer)

composition.animationTool = AVVideoCompositionCoreAnimationTool(postProcessingAsVideoLayer: videoLayer, in: parentLayer)

but the animation does not shown in the composed video. I thought the animation begin time is not correct. It should be AVCoreAnimationBeginTimeAtZero

can you add this feature in this amazing animation library ?

The text was updated successfully, but these errors were encountered:

buba447 · 2017-02-13T17:51:42Z

Im not sure what it would take to support this but I will add it to our research list!

yasinbor · 2017-06-25T22:00:03Z

Is there any progress in this issue? I am also trying to add Lottie animation to video.

buba447 · 2017-08-04T18:06:31Z

Try Lottie 2.0! It now more closely follows CAAnimaiton rules.

jakobsvenningsson · 2017-08-21T11:38:28Z

I can confirm that it's possible to include Lottie animations when exporting videos with AVFoundation. I'm using version 2.0.5.

jjc235 · 2017-08-21T17:22:36Z

Do you have code that enables this?

…

On Mon, Aug 21, 2017 at 4:38 AM jakob svenningsson ***@***.***> wrote: I can confirm that it's possible to include Lottie animations when exporting videos with AVFoundation. I'm using version 2.0.5. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#30 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMwOz-zo6GrgGVxhjvTUMbYQu9syoE1sks5saWw8gaJpZM4L3HTw> .

jakobsvenningsson · 2017-08-21T20:24:29Z

You just add the layer from the LOTAnimatioView class the same way as if you'd add a normal CALayer to a video using AVFoundation. I can recommend the following tutorial: https://www.raywenderlich.com/30200/avfoundation-tutorial-adding-overlays-and-animations-to-videos. In However there is one difference. I had to call the play method of the LOTAnimationView class before I merged it with the videolayer.

jjc235 · 2017-08-21T20:30:00Z

Thanks. Actually it doesn't quite work well. However the animation is actually not rendered correctly depending on device etc. The animation timespace is not linked to the video timespace so you'll notice that timing is off.

…

On Mon, Aug 21, 2017 at 1:24 PM Jakob svenningsson ***@***.***> wrote: You just add the layer from the LOTAnimatioView class the same way as if you'd add a normal CALayer to a video using AVFoundation. I can recommend the following tutorial: https://www.raywenderlich.com/30200/avfoundation-tutorial-adding-overlays-and-animations-to-videos. In However there is one difference. I had to call the play method of the LOTAnimationView class before I merged it with the videolayer. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#30 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMwOzzJ9YnTYINGUyzXjxkzc-THtRrBKks5saeeEgaJpZM4L3HTw> .

jakobsvenningsson · 2017-08-21T20:31:51Z

You have to change the FPS of the animation to the same FPS as your recording. You also have to set the start frame manually in order to sync the animation with the video.

If you save the process of the animation when you start record, you can set the start of the animation like this:

            lottieLayer.animationProgress = animationStart 
            lottieLayer.loopAnimation = true
            lottieLayer.play()

amrittrivedir · 2017-08-24T14:23:55Z

@jakobsvenningsson - I did try your method but it's not working at saving time with avexportsession. I made one method to start animation at static time like below

NSTimeInterval duration = ((_sceneModel.endFrame.floatValue - _sceneModel.startFrame.floatValue) / _sceneModel.framerate.floatValue);
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"currentFrame"];
    animation.speed = 1.0;
    animation.fromValue = _sceneModel.startFrame;
    animation.toValue = _sceneModel.endFrame;
    animation.duration = duration;
    animation.fillMode = kCAFillModeBoth;
    animation.repeatCount = _loopAnimation ? HUGE_VALF : 1;
    animation.autoreverses = _autoReverseAnimation;
    animation.delegate = self;
    animation.removedOnCompletion = NO;
    animation.beginTime = 0.2;
    [_compContainer addAnimation:animation forKey:kCompContainerAnimationKey];

// Save video code

[parentLayer addSublayer:overlayLayer];

    self.videoComposition.animationTool = [AVVideoCompositionCoreAnimationTool
                                           videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer
                                           inLayer:parentLayer];

I am adding LOTAnimationView layer in overlay layer. But animation is not working.

agibson73 · 2017-09-12T00:40:43Z

Just tried myself with no luck. The animation is not playing at all. I have called play as well as set the frame and the speed. Are there any special requirements of the After Effects file? Is there an option to not remove on completion in after effects?

amrittrivedir · 2017-11-03T04:23:40Z

Animation will not work in AVAssetExport session for new Lottie. Use Lottie 1.0. In new one they shifted all animation logic to frame by frame. And this will cause timing issue and slowness of animation at export. @buba447 - Will you please go back to Lottie 1.0 like animation for future versions? Because even in current version if we will have multiple heavy tasks of ARKIT or COREML then this frame by frame animation causing delays. And everything seems to work in Lottie 1.0. But there are so many limitations in it.

Even in new Lottie animation stops after pushing to new view controller. OR putting app in background.

stanchiang · 2017-11-10T05:45:23Z

using Lottie v2.1.4 and the animation (using "LottieLogo2") renders and runs following AVAssetExportSession
but the frame rate is noticeably slower than it is when animating by itself even though I tried to set speed to 1 for both scenarios. I didn't notice a FPS attribute or any way to sync it to what's going on in the video.

will tinker with it as I literally just added it to my app.

lvpengwei · 2017-12-08T03:01:13Z

@amrittrivedir i use lottie-ios 1.0.4, and i found when export custom layer property animation(LOTStrokeShapeLayer), it will not work, the preview is ok, but the other properties are ok(preview&export).
my app is 猫饼.

mliapich · 2018-03-06T08:23:56Z

Could someone provide working code?
Because after a lot of attempts with different versions of lottie, all that I've achieved is rendering static image in video from animation

hezhk3 · 2018-03-30T10:36:57Z

@jakobsvenningsson
It's not animating in the exported video. Is there anything wrong about my code below?

    NSURL *url = [[NSBundle mainBundle] URLForResource:@"test0" withExtension:@"mov"];

    AVAsset *asset = [AVURLAsset assetWithURL:url];
    AVAssetTrack *assetTrack = [asset tracksWithMediaType:AVMediaTypeVideo].firstObject;
    CGSize naturalSize = assetTrack.naturalSize;
    AVMutableComposition *mutableComposition = [AVMutableComposition composition];
    AVMutableCompositionTrack *mutableCompositionTrack = [mutableComposition addMutableTrackWithMediaType:AVMediaTypeVideo preferredTrackID:kCMPersistentTrackID_Invalid];
    [mutableCompositionTrack insertTimeRange:CMTimeRangeMake(kCMTimeZero, asset.duration) ofTrack:assetTrack atTime:kCMTimeZero error:nil];
    AVMutableVideoCompositionInstruction *mainInstruction = [AVMutableVideoCompositionInstruction videoCompositionInstruction];
    mainInstruction.timeRange = CMTimeRangeMake(kCMTimeZero, asset.duration);
    AVMutableVideoCompositionLayerInstruction *layerInstruction = [AVMutableVideoCompositionLayerInstruction videoCompositionLayerInstructionWithAssetTrack:assetTrack];
    [layerInstruction setTransform:CGAffineTransformIdentity atTime:kCMTimeZero];
    mainInstruction.layerInstructions = @[layerInstruction];
    
    AVMutableVideoComposition *videoComposition = [AVMutableVideoComposition videoComposition];
    videoComposition.instructions = @[mainInstruction];
    videoComposition.frameDuration = assetTrack.minFrameDuration;
    videoComposition.renderSize = naturalSize;
    
    LOTAnimationView *animationView = [LOTAnimationView animationNamed:@"LottieLogo1" inBundle:[NSBundle mainBundle]];
    animationView.frame = CGRectMake(0, 0, 300, 300);
    animationView.contentMode = UIViewContentModeScaleAspectFit;
    [animationView play];
    
    CALayer *videoLayer = [CALayer layer];
    CALayer *parentLayer = [CALayer layer];
    parentLayer.frame = CGRectMake(0, 0, naturalSize.width, naturalSize.height);
    videoLayer.frame = CGRectMake(0, 0, naturalSize.width, naturalSize.height);
    [parentLayer addSublayer:videoLayer];
    parentLayer.geometryFlipped = YES;
    [parentLayer addSublayer:animationView.layer];
    
    AVVideoCompositionCoreAnimationTool *animationTool = [AVVideoCompositionCoreAnimationTool videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];
    videoComposition.animationTool = animationTool;
    
    NSURL *exportURL = [NSURL fileURLWithPath:[[NSTemporaryDirectory() stringByAppendingPathComponent:[NSUUID UUID].UUIDString] stringByAppendingPathExtension:@"mov"]];
    NSLog(@"%@", exportURL.path);
    AVAssetExportSession *exportSession = [AVAssetExportSession exportSessionWithAsset:asset presetName:AVAssetExportPresetLowQuality];
    exportSession.videoComposition = videoComposition;
    exportSession.outputURL = exportURL;
    exportSession.outputFileType = AVFileTypeQuickTimeMovie;
    exportSession.shouldOptimizeForNetworkUse = YES;
    
    NSLog(@"begin");
    [exportSession exportAsynchronouslyWithCompletionHandler:^{
        switch (exportSession.status) {
            case AVAssetExportSessionStatusCompleted:
                NSLog(@"completed");
                break;
            default:
                NSLog(@"failed");
        }
    }];

SamChenzx · 2018-04-16T12:47:32Z

@hezhk3 I once used animationView like you, add animationView.layer to superLayer, but it didn't now.
I wander is your code can still work properly with the latest version?

hezhk3 · 2018-04-16T14:58:29Z

@SamChenzx I was using 2.5.0 and there's no update since then.
I gave up exporting video with the layer. I now use snapshots of the view as gif.

spykr · 2018-05-03T00:09:53Z

I managed to get the animations to play in the rendered video by adding the LOTAnimationView as a subview to self.view before playing them and attaching the layer to the scene. This only worked on the device and not the simulator.

Next I set the framerate of the video using videoComposition.frameDuration = CMTime(value: 1, timescale: framerate) (30 in this case) and then used the framerate of the animations to calculate the new animation speed to match the video framerate. However in the best case scenario (a single animation) the rendered animations play slower than they do regularly and in the worst case the framerates are completely variable, going up and down at seemingly random. For example the more stickers I add the faster they all seem to play on average in the final video.

Basically my final blocker is that the framerates of the animations are variable and tied to something other than the framerate of the video itself, has anyone encountered a solution for this yet?

syyjay · 2018-11-27T02:40:28Z

I successfully exported video

adobysh · 2018-11-30T10:23:57Z

@syyjay Can you please share your solution?

syyjay · 2018-12-03T02:48:08Z

using Lottie v2.1.4 and the animation (using "LottieLogo2") renders and runs following AVAssetExportSession
but the frame rate is noticeably slower than it is when animating by itself even though I tried to set speed to 1 for both scenarios. I didn't notice a FPS attribute or any way to sync it to what's going on in the video.

will tinker with it as I literally just added it to my app.

Have you solved the whole problem

syyjay · 2018-12-03T02:49:07Z

@syyjay Can you please share your solution?

CALayer *parentLayer = [CALayer layer];
CALayer *videoLayer = [CALayer layer];
parentLayer.frame = CGRectMake(0, 0, size.width, size.height);
videoLayer.frame = CGRectMake(0, 0, size.width, size.height);
[parentLayer addSublayer:videoLayer];
self.lotView.layer.frame=parentLayer.bounds;
[parentLayer addSublayer:self.lotView.layer];

composition.animationTool = [AVVideoCompositionCoreAnimationTool
                             videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

syyjay · 2018-12-15T15:21:01Z

animationStart

animationStart ，How do you compute this value

smallqiang · 2019-01-29T08:03:48Z

I managed to get the animations to play in the rendered video by adding the LOTAnimationView as a subview to self.view before playing them and attaching the layer to the scene. This only worked on the device and not the simulator.

Next I set the framerate of the video using videoComposition.frameDuration = CMTime(value: 1, timescale: framerate) (30 in this case) and then used the framerate of the animations to calculate the new animation speed to match the video framerate. However in the best case scenario (a single animation) the rendered animations play slower than they do regularly and in the worst case the framerates are completely variable, going up and down at seemingly random. For example the more stickers I add the faster they all seem to play on average in the final video.

Basically my final blocker is that the framerates of the animations are variable and tied to something other than the framerate of the video itself, has anyone encountered a solution for this yet?

I have the same problem. Have you solved it?

lvpengwei · 2019-02-02T09:27:56Z

I have a demo about how to render Lottie in video.
LottieInVideo

hezhk3 · 2019-02-12T08:22:21Z

You can draw the animation image frame by frame to export.
(But it seems that it is way slower than normal export session.)

- (IBAction)onExportBtn:(UIButton *)sender {
    NSURL *url = [NSBundle.mainBundle URLForResource:@"test" withExtension:@"mov"];
    AVAsset *asset = [AVURLAsset URLAssetWithURL:url options:@{AVURLAssetPreferPreciseDurationAndTimingKey: @(YES)}];
    NSTimeInterval duration = CMTimeGetSeconds(asset.duration);
    AVAssetExportSession *exportSession = [AVAssetExportSession exportSessionWithAsset:asset presetName:AVAssetExportPresetHighestQuality];
    exportSession.outputFileType = AVFileTypeMPEG4;
    NSURL *outputURL = [[NSFileManager.defaultManager.temporaryDirectory URLByAppendingPathComponent:@"output"] URLByAppendingPathExtension:@"mp4"];
    [NSFileManager.defaultManager removeItemAtURL:outputURL error:nil];
    exportSession.outputURL = outputURL;
    
    CIFilter *filter = [CIFilter filterWithName:@"CISourceAtopCompositing"];
    [self.animationView stop];
    self.animationView.animationProgress = 0;
    CGRect bounds = self.animationView.bounds;
    __weak typeof(self)weakSelf = self;
    exportSession.videoComposition = [AVMutableVideoComposition videoCompositionWithAsset:asset applyingCIFiltersWithHandler:^(AVAsynchronousCIImageFilteringRequest * _Nonnull request) {
        __strong typeof(weakSelf)strongSelf = weakSelf;
        
        // Set background image
        [filter setValue:request.sourceImage forKey:kCIInputBackgroundImageKey];
        
        // Vary animation progress based on video timing
        Float64 seconds = CMTimeGetSeconds(request.compositionTime);
        Float64 progress = seconds / duration;
        dispatch_sync(dispatch_get_main_queue(), ^{
            strongSelf.animationView.animationProgress = progress;
        });
        
        // Draw
        UIGraphicsBeginImageContextWithOptions(bounds.size, NO, 0);
        [strongSelf.animationView drawViewHierarchyInRect:bounds afterScreenUpdates:NO];
        UIImage *animationImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        CIImage *inputImage = [CIImage imageWithCGImage:animationImage.CGImage];
        
        // Get output image
        [filter setValue:inputImage forKey:kCIInputImageKey];
        CIImage *output = filter.outputImage;
        
        // Provide the filter output to the composition
        [request finishWithImage:output context:nil];
    }];
    
    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.01 repeats:YES block:^(NSTimer * _Nonnull timer) {
        NSLog(@"[progress]: %.3lf", exportSession.progress);
    }];
    
    sender.enabled = NO;
    [exportSession exportAsynchronouslyWithCompletionHandler:^{
        dispatch_async(dispatch_get_main_queue(), ^{
            [timer invalidate];
            sender.enabled = YES;
            [self.animationView play];
            switch (exportSession.status) {
                case AVAssetExportSessionStatusCompleted:
                    NSLog(@"[Completed]");
                    UISaveVideoAtPathToSavedPhotosAlbum(outputURL.path, nil, nil, nil);
                    break;
                default:
                    NSLog(@"[Failed]: %@", exportSession.error);
                    break;
            }
        });
    }];
}

buba447 · 2019-03-17T17:10:16Z

Lottie has been completely rewritten in Swift as of 3.0 (#777)

I am closing all issues prior to this release to reduce the noise. If you continue to run into this issues or any issue with Lottie 3.0 please open a new ticket

For continued support of Lottie Objective-c please point to this branch: https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC

ben73 · 2019-04-23T04:41:33Z

Lottie 3.0 supports exporting using AVAssetExportSession?

Andy4202 · 2019-04-23T22:06:56Z

@ben73 could you provide example code, please? :)

d1xlord · 2019-07-30T07:47:43Z

Can this issue be reopened? Facing the issue with non-uniform animation speed (which might be the reason as we are kind of recording the lottie-animation by adding in to the view and playing before inserting it into the animationTool flow)

damikdk · 2019-09-16T09:11:31Z

I created demo project with both AVAssetExportSession and AVAssetWritermethods. AVAssetExportSession doesn't work right, AVAssetWriter works great but 3-6 times slower.

@lvpengwei uses AVAssetExportSession with CustomVideoCompositor and CVPixelBuffer magic in LottieInVideo, so it works with almost the same speed as raw AVAssetWriter. It's still cool, but too slow for our app. And deprecated, btw (EAGLContext iOS12+)

We need some AVFoundation + CoreAnimation genius here

mayqiyue · 2019-12-09T11:11:47Z

I can export video from lottie 3.0+ or 2.5.3; But the animation speed is always wrong in the video. Can someone helps?

hezhk3 · 2019-12-09T12:35:34Z

@mayqiyue
That's because lottie animation runs in a different time with export session.
You should export lottie animation frame by frame, then add to your video.

mayqiyue · 2019-12-09T12:47:32Z

You mean through screen recorder? That’s two slow. hezhk3 <notifications@github.com>于2019年12月9日周一20:35写道：

…

@mayqiyue <https://github.com/mayqiyue> That's because lottie animation runs in a different time with export session. You should export lottie animation frame by frame, then add to your video. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#30?email_source=notifications&email_token=ABQZYVYBGUVCLD6L2BSQM6DQXY3RRA5CNFSM4C64OTYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGJAPUY#issuecomment-563218387>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABQZYV6ZF3FEC6EN7BMMM5LQXY3RRANCNFSM4C64OTYA> .

hezhk3 · 2019-12-09T12:58:49Z

You mean through screen recorder? That’s two slow. hezhk3 notifications@github.com于2019年12月9日周一20:35写道：
…
@mayqiyue https://github.com/mayqiyue That's because lottie animation runs in a different time with export session. You should export lottie animation frame by frame, then add to your video. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#30?email_source=notifications&email_token=ABQZYVYBGUVCLD6L2BSQM6DQXY3RRA5CNFSM4C64OTYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGJAPUY#issuecomment-563218387>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABQZYV6ZF3FEC6EN7BMMM5LQXY3RRANCNFSM4C64OTYA .

Yes, that's the only way currently. @mayqiyue
Or if you are not using any new features, you can try to export with animation tool at Lottie 1.0.4, according to @lvpengwei . LottieInVideo

mayqiyue · 2019-12-09T13:03:46Z

Ok, thx for your reply hezhk3 <notifications@github.com>于2019年12月9日周一20:58写道：

…

You mean through screen recorder? That’s two slow. hezhk3 ***@***.***于2019年12月9日周一20:35写道： … <#m_7553585765126834425_> @mayqiyue <https://github.com/mayqiyue> https://github.com/mayqiyue That's because lottie animation runs in a different time with export session. You should export lottie animation frame by frame, then add to your video. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#30 <#30>?email_source=notifications&email_token=ABQZYVYBGUVCLD6L2BSQM6DQXY3RRA5CNFSM4C64OTYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGJAPUY#issuecomment-563218387>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABQZYV6ZF3FEC6EN7BMMM5LQXY3RRANCNFSM4C64OTYA . Yes, that's the only way currently. @mayqiyue <https://github.com/mayqiyue> Or if you are not using any new features, you can try to export with animation tool at Lottie 1.0.4, according to @lvpengwei <https://github.com/lvpengwei> . LottieInVideo <https://github.com/lvpengwei/LottieInVideo> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#30?email_source=notifications&email_token=ABQZYVZ4OEFORNC4CVHTJZTQXY6I3A5CNFSM4C64OTYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGJCSRQ#issuecomment-563226950>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABQZYVYS37CECMYCHOXHL3TQXY6I3ANCNFSM4C64OTYA> .

sagarthecoder · 2021-06-14T07:04:34Z

How does animationTool work in AVMutableVideoComposition()? Can anyone describe the inner mechanism of animationTool? Is it responsible for slower exporting?
I'm using this code ( https://stackoverflow.com/questions/46315867/making-video-from-uiimage-array-with-different-transition-animations/46560615#46560615) for creating animated video. But when use UIBezierPath to animation, then export video is too much slow. Help me to reduce exporting time.

damikdk · 2022-07-27T09:22:28Z

Is it possible now, with new CoreAnimation engine?

agibson73 · 2022-07-27T16:59:54Z

Is it possible now, with new CoreAnimation engine?

Sorry what is the new CoreAnimation engine? Or do you mean if this is possible?

damikdk · 2022-07-28T11:01:52Z

Sorry what is the new CoreAnimation engine? Or do you mean if this is possible?

Lottie 3.4.0 added a new rendering engine powered by Core Animation

the new release says a lot about this new engine. So maybe now we can export lottie animations through AVAssetExportSession? As we tried years ago:

By creating AVMutableVideoComposition and adding AnimationView.layer (CALayer) on it by AVVideoCompositionCoreAnimationTool

I will check later anyway, but maybe it's obvious for maintainers already

calda · 2022-07-28T13:37:57Z

Just curious, what use case do folks have for exporting a Lottie animation to a video file? It seems technically feasible but I'm not sure exactly why you would want / need to do that.

damikdk · 2022-07-28T13:47:49Z

@calda Designers create beautiful complex compositions in after effects and export them with bodymovin. We use it in app and allow users to change them in runtime. For example, by inserting your own pictures and videos into them. And after editing, the user can do the export.

You can check templates in applications like Bazaart

calda · 2022-07-28T14:07:28Z

Oh wow, that's cool! Very nice.

agibson73 · 2022-07-28T14:27:50Z

example.of.lottie.mp4

very simplistic example of an export with lottie from iOS. I think the lack of duration and begin time hold Lottie back in terms of export with the apple frameworks. The only way I know to do this is running it inside a custom compositor because you can run it like a clock using frame time. Then the next bottleneck is in the snapshotting technique. I am not really familiar with the inner workings of lottie as its complexity seemed it must be running on a display link or something

calda · 2022-07-28T14:32:40Z

Yeah, the Main Thread rendering engine basically uses a display link. The new Core Animation engine uses CAAnimations instead so may be easier to work with.

agibson73 · 2022-07-28T14:36:23Z

Yeah it is possible to export as I did above. I guess the big question to understand how to build this out would be why use the display link if CAAnimations are used? Is it because some of the animations are custom keypaths or are full rerenders used at points in certain animations? I am guessing this is the case as well. If so then exporting running a wall clock type style is the only way.

calda · 2022-07-28T15:03:06Z

The Main Thread rendering engine uses a display link because it doesn't use CAANimations. The new Core Animation rendering engine uses CAAnimations instead of a display link.

agibson73 · 2022-07-28T15:05:32Z

So maybe it's as simple as being able to toggle removedOnCompletion = false and change beginTime to AVCoreAnimationBeginTimeAtZero + beginTime...maybe a global isExporting on the AnimationView

lvpengwei · 2022-07-29T02:32:37Z

I created demo project with both AVAssetExportSession and AVAssetWritermethods. AVAssetExportSession doesn't work right, AVAssetWriter works great but 3-6 times slower.

@lvpengwei uses AVAssetExportSession with CustomVideoCompositor and CVPixelBuffer magic in LottieInVideo, so it works with almost the same speed as raw AVAssetWriter. It's still cool, but too slow for our app. And deprecated, btw (EAGLContext iOS12+)

We need some AVFoundation + CoreAnimation genius here

@damikdk Now, you can try PAG, which is designed for a video editor. and it can run on iOS/Android/Mac/Windows/Linux/Web with the same CPP code.

agibson73 · 2022-07-29T06:28:22Z

@lvpengwei it seems PAG does everything we are asking in this thread if I am not reading their git page wrong. so maybe this is not needed from Lottie? Are there features missing? The bottleneck you mention above is the snapshoting technique and no matter the context you use it will be slow because of main thread rendering. Actually your use of drawHierarchy is partially GPU bound so you are doing it pretty efficient. To be faster the Lottie view would have to not be updated based on time and the native rending of the animation tool would be faster. There is a way to do what you are doing exponentially faster but it is a private framework. I look in release notes often to see if it has made it public but so far it has not.

lvpengwei · 2022-07-29T07:22:25Z

@lvpengwei it seems PAG does everything we are asking in this thread if I am not reading their git page wrong. so maybe this is not needed from Lottie? Are their features missing? The bottleneck you mention above is the snapshoting technique and no matter the context you use it will be slow because of main thread rendering. Actually your use of drawHierarchy is partially GPU bound so you are doing it pretty efficient. To be faster the Lottie view would have to not be updated based on time and the native rending of the animation tool would be faster. There is a way to do what you are doing exponentially faster but it is a private framework. I look in release notes often to see if it has made it public but so far it has not.

@agibson73 PAG is just like Lottie, use an AE plugin to export pag files and render them using libpag sdk on multiple platforms. PAG uses binary serialization which is TLV, so the pag file is smaller than Lottie's JSON file in most cases.

feature supported

If the feature is not supported, you can export the pre-composition as sequence frames that are webp or video. BMP guide

The snapshot way before, copy data from GPU to CPU and then send to GPU.

PAG uses OpenGL ES just like skottie to render on an arbitrary thread. with iOS, you can use a CVPixelBuffer as the render target, and then combine it with video, The whole process is on the GPU side. pag-ios-demo

dilloncc · 2024-06-05T19:54:02Z

@lvpengwei I know this is a very old thread. Do you know if it is possible for PAG to be added to a CALayer to overlay a video? I asked this question in a libpag discussion as well - Tencent/libpag#2330

buba447 mentioned this issue Feb 13, 2017

AVSynchronizedLayer Issue #84

Closed

buba447 added the enhancement label Feb 27, 2017

buba447 mentioned this issue Feb 27, 2017

should consider exposing containing CALayer for animations #42

Closed

smallqiang mentioned this issue Jan 26, 2019

How to export video or LOTAnimationView insert to a video? #764

Closed

buba447 closed this as completed Mar 17, 2019

damikdk mentioned this issue Sep 2, 2019

Add support for video Export usage #1001

Closed

add support for video Export usage #30

add support for video Export usage #30

Comments

alexiscn commented Feb 4, 2017 • edited Loading

buba447 commented Feb 13, 2017

yasinbor commented Jun 25, 2017

buba447 commented Aug 4, 2017

jakobsvenningsson commented Aug 21, 2017

jjc235 commented Aug 21, 2017 via email

jakobsvenningsson commented Aug 21, 2017

jjc235 commented Aug 21, 2017 via email

jakobsvenningsson commented Aug 21, 2017 • edited Loading

amrittrivedir commented Aug 24, 2017

agibson73 commented Sep 12, 2017 • edited Loading

amrittrivedir commented Nov 3, 2017

stanchiang commented Nov 10, 2017

lvpengwei commented Dec 8, 2017 • edited Loading

mliapich commented Mar 6, 2018

hezhk3 commented Mar 30, 2018 • edited Loading

SamChenzx commented Apr 16, 2018

hezhk3 commented Apr 16, 2018

spykr commented May 3, 2018

syyjay commented Nov 27, 2018

adobysh commented Nov 30, 2018

syyjay commented Dec 3, 2018

syyjay commented Dec 3, 2018

syyjay commented Dec 15, 2018

smallqiang commented Jan 29, 2019

lvpengwei commented Feb 2, 2019 • edited Loading

hezhk3 commented Feb 12, 2019

buba447 commented Mar 17, 2019

ben73 commented Apr 23, 2019

Andy4202 commented Apr 23, 2019

d1xlord commented Jul 30, 2019

damikdk commented Sep 16, 2019 • edited Loading

mayqiyue commented Dec 9, 2019

hezhk3 commented Dec 9, 2019

mayqiyue commented Dec 9, 2019 via email

hezhk3 commented Dec 9, 2019

mayqiyue commented Dec 9, 2019 via email

sagarthecoder commented Jun 14, 2021

damikdk commented Jul 27, 2022

agibson73 commented Jul 27, 2022

damikdk commented Jul 28, 2022

calda commented Jul 28, 2022

damikdk commented Jul 28, 2022

calda commented Jul 28, 2022

agibson73 commented Jul 28, 2022

calda commented Jul 28, 2022

agibson73 commented Jul 28, 2022 • edited Loading

calda commented Jul 28, 2022 • edited Loading

agibson73 commented Jul 28, 2022

lvpengwei commented Jul 29, 2022 • edited Loading

agibson73 commented Jul 29, 2022 • edited Loading

lvpengwei commented Jul 29, 2022 • edited Loading

dilloncc commented Jun 5, 2024

alexiscn commented Feb 4, 2017 •

edited

Loading

jakobsvenningsson commented Aug 21, 2017 •

edited

Loading

agibson73 commented Sep 12, 2017 •

edited

Loading

lvpengwei commented Dec 8, 2017 •

edited

Loading

hezhk3 commented Mar 30, 2018 •

edited

Loading

lvpengwei commented Feb 2, 2019 •

edited

Loading

damikdk commented Sep 16, 2019 •

edited

Loading

agibson73 commented Jul 28, 2022 •

edited

Loading

calda commented Jul 28, 2022 •

edited

Loading

lvpengwei commented Jul 29, 2022 •

edited

Loading

agibson73 commented Jul 29, 2022 •

edited

Loading

lvpengwei commented Jul 29, 2022 •

edited

Loading