Lottie-ios: When the application is switched from the background to the foreground, the animation is not executed

Created on 5 Jan 2018  路  8Comments  路  Source: airbnb/lottie-ios

Lottie-iOS Issue

Hello! Sorry you're having an Issue! Please help us make Lottie better by filling everything below out with as much information as you can, so we can try to reproduce and fix the issue!

This issue is a:

  • Non-Crashing Bug (Visual or otherwise)

When the application is switched from the background to the foreground, the animation is not executed

My Suggestion:

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)complete {
  if ([_compContainer animationForKey:kCompContainerAnimationKey] == anim &&
      [anim isKindOfClass:[CABasicAnimation class]]) {
    CABasicAnimation *playAnimation = (CABasicAnimation *)anim;
    NSNumber *frame = _compContainer.presentationLayer.currentFrame;
    if (complete) {
      // Set the final frame based on the animation to/from values. If playing forward, use the
      // toValue otherwise we want to end on the fromValue.
      frame = [self _isSpeedNegative] ? (NSNumber *)playAnimation.toValue : (NSNumber *)playAnimation.fromValue;
    }
    if (complete) {
        [self _removeCurrentAnimationIfNecessary];
        [self setProgressWithFrame:frame callCompletionIfNecessary:NO];
    }
    [self _callCompletionIfNecessary:complete];
  }
}

What Platform are you on?

  • iOS

Expected Behavior

Actual Behavior

Code Example

Animation JSON

Most helpful comment

@AshishKapoor thanks! This solved my problem.

class Component extends React.Component {
        this.state = {
            appState: AppState.currentState
        }
    }
    componentDidMount() {
        AppState.addEventListener("change", this._handleAppStateChange)
    }

    componentWillUnmount() {
        AppState.removeEventListener("change", this._handleAppStateChange)
    }
    _handleAppStateChange = nextAppState => {
        if (this.state.appState.match(/inactive|background/) && nextAppState === "active") {
            if (this._animation) {
                this._animation.play()
            }
        }
        this.setState({ appState: nextAppState })
    }
}

All 8 comments

I have the same issue

same issue, for loop animation, should not remove animation after switch to background.

Same issue. Any work around?

Same issue here. My Animation is playing during the Splashscreen (start) of the App.
After switching to Background and coming back to Foreground, the animation is frozen, App is not responding. Do you have any workaround ?

Put in a workaround with:

 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(continueAnimation) name:UIApplicationWillEnterForegroundNotification object:nil];

where:
```

  • (void)continueAnimation {
    [self.animationView play];
    }
    ````

@AshishKapoor thanks! This solved my problem.

class Component extends React.Component {
        this.state = {
            appState: AppState.currentState
        }
    }
    componentDidMount() {
        AppState.addEventListener("change", this._handleAppStateChange)
    }

    componentWillUnmount() {
        AppState.removeEventListener("change", this._handleAppStateChange)
    }
    _handleAppStateChange = nextAppState => {
        if (this.state.appState.match(/inactive|background/) && nextAppState === "active") {
            if (this._animation) {
                this._animation.play()
            }
        }
        this.setState({ appState: nextAppState })
    }
}

Lottie has been completely rewritten in Swift as of 3.0 (https://github.com/airbnb/lottie-ios/pull/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

Was this page helpful?
0 / 5 - 0 ratings