Lottie-ios: The animation is delayed

Created on 22 Mar 2017 · 9Comments · Source: airbnb/lottie-ios

Hi all,
have you ever faced this problem, I started the animation immediately after use clicked a button, but the animation was delayed. See the attached file:
lottie-bug

Source

rickytan

👍6

Most helpful comment

We're having the same problem. Basically we're using Lottie to play an 'open / close menu' animation inside a view. The first time the objects are created, it plays smooth as butter. I can replay the animation several times and it works great. However, after I close the view, then open it again, the animation will delay a small amount before playing. This delay increases each time I open the view and create the Lottie objects again. When I go to play the animation, it appears immediately, but the increasing delay happens before animating. General responsiveness does not seem to be hampered during this delay.

Interesting to note, simply creating the Lottie objects without playing the animation can make this frustrating delay build up as well. As a test, if I open and close my view several times (each time recreating the Lottie objects), then eventually play the animation, that delay has still built up.

Unfortunately, this makes using Lottie very limited to one-off animations. I tried poking around in the Lottie sources, but couldn't find anything obvious going on. I thought it might be somehow related to Core Animation, as it's persistent even though the Lottie objects are released after each use. Hopefully this can be a priority to fix, as we have a lot of interest in using Lottie more throughout our UI!

jwarrent on 12 Jun 2017

👍3

All 9 comments

maurovc on 4 Apr 2017

+1, after i playing short movie, the lottie animation is delay. the following log has some problem????

(BOOL)animationIsPlaying {
if (_animationIsPlaying && !_loopAnimation && _layer) {
CFTimeInterval localTime = [_layer convertTime:CACurrentMediaTime() fromLayer:nil];
NSLog(@"CFTimeInterval = %f",localTime);

2017-04-28 15:08:27.838266 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.854894 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.871650 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.888364 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.906218 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.922026 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.947379 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.955228 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.976928 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:27.991014 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.005313 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.021863 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.038652 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.055016 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.071675 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.088944 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.109372 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.122831 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.138348 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.154912 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.171673 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.188303 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.204933 inke[18132:5888874] CFTimeInterval = 0.000000
2017-04-28 15:08:28.221693 inke[18132:5888874] CFTimeInterval = 0.003223
2017-04-28 15:08:28.238428 inke[18132:5888874] CFTimeInterval = 0.019957
2017-04-28 15:08:28.255084 inke[18132:5888874] CFTimeInterval = 0.036601
2017-04-28 15:08:28.272027 inke[18132:5888874] CFTimeInterval = 0.053514
2017-04-28 15:08:28.288687 inke[18132:5888874] CFTimeInterval = 0.070183
2017-04-28 15:08:28.305479 inke[18132:5888874] CFTimeInterval = 0.086954
2017-04-28 15:08:28.322058 inke[18132:5888874] CFTimeInterval = 0.103550
2017-04-28 15:08:28.338674 inke[18132:5888874] CFTimeInterval = 0.120158
2017-04-28 15:08:28.355324 inke[18132:5888874] CFTimeInterval = 0.136807
2017-04-28 15:08:28.371789 inke[18132:5888874] CFTimeInterval = 0.153313
2017-04-28 15:08:28.388412 inke[18132:5888874] CFTimeInterval = 0.169935
2017-04-28 15:08:28.405082 inke[18132:5888874] CFTimeInterval = 0.186606
2017-04-28 15:08:28.422065 inke[18132:5888874] CFTimeInterval = 0.203553
2017-04-28 15:08:28.438743 inke[18132:5888874] CFTimeInterval = 0.220236
2017-04-28 15:08:28.455359 inke[18132:5888874] CFTimeInterval = 0.236852
2017-04-28 15:08:28.472015 inke[18132:5888874] CFTimeInterval = 0.253501
2017-04-28 15:08:28.488696 inke[18132:5888874] CFTimeInterval = 0.270185
2017-04-28 15:08:28.505506 inke[18132:5888874] CFTimeInterval = 0.286989
2017-04-28 15:08:28.522024 inke[18132:5888874] CFTimeInterval = 0.303507
2017-04-28 15:08:28.538756 inke[18132:5888874] CFTimeInterval = 0.320244
2017-04-28 15:08:28.560709 inke[18132:5888874] CFTimeInterval = 0.342188
2017-04-28 15:08:28.577095 inke[18132:5888874] CFTimeInterval = 0.358572
2017-04-28 15:08:28.593801 inke[18132:5888874] CFTimeInterval = 0.375286
2017-04-28 15:08:28.610457 inke[18132:5888874] CFTimeInterval = 0.391940
2017-04-28 15:08:28.627233 inke[18132:5888874] CFTimeInterval = 0.408714
2017-04-28 15:08:28.638691 inke[18132:5888874] CFTimeInterval = 0.420201
2017-04-28 15:08:28.655495 inke[18132:5888874] CFTimeInterval = 0.436943
2017-04-28 15:08:28.672084 inke[18132:5888874] CFTimeInterval = 0.453566
2017-04-28 15:08:28.697779 inke[18132:5888874] CFTimeInterval = 0.479259
2017-04-28 15:08:28.705380 inke[18132:5888874] CFTimeInterval = 0.486884
2017-04-28 15:08:28.722200 inke[18132:5888874] CFTimeInterval = 0.503677
2017-04-28 15:08:28.740411 inke[18132:5888874] CFTimeInterval = 0.521357
2017-04-28 15:08:28.755497 inke[18132:5888874] CFTimeInterval = 0.536983
2017-04-28 15:08:28.772121 inke[18132:5888874] CFTimeInterval = 0.553602
2017-04-28 15:08:28.788565 inke[18132:5888874] CFTimeInterval = 0.570038
2017-04-28 15:08:28.805330 inke[18132:5888874] CFTimeInterval = 0.586805
2017-04-28 15:08:28.821758 inke[18132:5888874] CFTimeInterval = 0.603274
2017-04-28 15:08:28.838732 inke[18132:5888874] CFTimeInterval = 0.620229
2017-04-28 15:08:28.855115 inke[18132:5888874] CFTimeInterval = 0.636627
2017-04-28 15:08:28.871837 inke[18132:5888874] CFTimeInterval = 0.653351
2017-04-28 15:08:28.888573 inke[18132:5888874] CFTimeInterval = 0.670085
2017-04-28 15:08:28.905376 inke[18132:5888874] CFTimeInterval = 0.686892
2017-04-28 15:08:28.921972 inke[18132:5888874] CFTimeInterval = 0.703489
2017-04-28 15:08:28.938632 inke[18132:5888874] CFTimeInterval = 0.720147
2017-04-28 15:08:28.955385 inke[18132:5888874] CFTimeInterval = 0.736899
2017-04-28 15:08:28.972174 inke[18132:5888874] CFTimeInterval = 0.753535
2017-04-28 15:08:28.988785 inke[18132:5888874] CFTimeInterval = 0.770179
2017-04-28 15:08:29.005305 inke[18132:5888874] CFTimeInterval = 0.786820
2017-04-28 15:08:29.022057 inke[18132:5888874] CFTimeInterval = 0.803572
2017-04-28 15:08:29.038730 inke[18132:5888874] CFTimeInterval = 0.820247
2017-04-28 15:08:29.055293 inke[18132:5888874] CFTimeInterval = 0.836810
2017-04-28 15:08:29.072012 inke[18132:5888874] CFTimeInterval = 0.853527
2017-04-28 15:08:29.088632 inke[18132:5888874] CFTimeInterval = 0.870147
2017-04-28 15:08:29.105429 inke[18132:5888874] CFTimeInterval = 0.886870
2017-04-28 15:08:29.122078 inke[18132:5888874] CFTimeInterval = 0.903593
2017-04-28 15:08:29.138731 inke[18132:5888874] CFTimeInterval = 0.920232
2017-04-28 15:08:29.155377 inke[18132:5888874] CFTimeInterval = 0.936878
2017-04-28 15:08:29.171837 inke[18132:5888874] CFTimeInterval = 0.953327
2017-04-28 15:08:29.188366 inke[18132:5888874] CFTimeInterval = 0.969878
2017-04-28 15:08:29.205028 inke[18132:5888874] CFTimeInterval = 0.986552
2017-04-28 15:08:29.221793 inke[18132:5888874] CFTimeInterval = 0.999999
2017-04-28 15:08:29.238600 inke[18132:5888874] CFTimeInterval = 0.999999

upworldcjw on 28 Apr 2017

I've been seeing the same issue. I don't see any issues the first time an animation is played, but only when the same animation is played multiple times.

As an example, my app is using Lottie as an intro animation. When a user logs out and exits the logout screen, the view controller containing the LOTAnimationView is brought on screen again. The animation has its duration set back to 0 and then is played, but there is a delay and the first frame of the animation will be shown for sometime.

I've noticed once the animation is in this state, each time I try to play it thereafter, it gets delayed slightly longer each time.

mikegarza on 10 May 2017

jwarrent on 12 Jun 2017

👍3

I encountered the same issue. It turns out that the local time space of key window layer is changed by some reason, and lottie failed to adjust the beginTime.