Lottie-ios: Using LOTAnimationView in Interface Builder

[Xeaza]

I've been trying to figure out how to use a LOTAnimationView in Interface Builder so I can be consistent with how the rest of my app is set up. I'd also like to take advantage of auto layout in IB instead of having to hard code a frame for any LOTAnimationView I use.

I'd like to propose implementing initWithCoder: on LOTAnimationView and a helper method to assign an animation to said view.

I could be thinking about this incorrectly if so I'd love to hear how I'd use a LOTAnimationView in IB. Otherwise, would you be open to me submitting a PR?
Thanks for reading!

Code Example

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
  self = [super initWithCoder:aDecoder];
  if (self) {
    [self _commonInit];
  }
  return self;
}

- (void)setAnimationNamed:(nonnull NSString *)animationName {
  LOTComposition *comp = [LOTComposition animationNamed:animationName inBundle:[NSBundle mainBundle]];

  [self _initializeAnimationContainer];
  [self _setupWithSceneModel:comp];
}

Use

• Add a view to a nib/storyboard set its class to LOTAnimationView
• Add an outlet to that view
• Call the helper method on your outlet.

[self.myAnimationView setAnimationNamed:@"loading_animation"];
[self.myAnimationView play];

Check these before submitting:

• [x] Updated to the latest version of Lottie (2.1.5)
• [x] The issue doesn't involve an Unsupported Feature
• [x] This issue isn't related to another open issue

This issue is a:

• [x] Feature Request

What Platform are you on?

• [x] iOS

[buba447]

This is great! Please do!

[fadylateef]

Any solution !
Used latest pod , still found nil while using IB

[luayzaemanuel]

Hi guys, any update with this? Still found nil while using IB.

[Xeaza]

Hey @luayzaemanuel and @fadylateef, I'm not sure what the issues you're experiencing are. I just tried again and can confirm that if you follow the steps for use that I indicated above, as of the latest version (2.5.0) this still works. Best of luck!

[maciaspeter]

I double checked the interface builder to see if there is LOTAnimationView, there is none. The version of the lottie is 2.5.1 in my app. There are LOTAnimatedControl and LOTAnimatedSwitch although.

[Xeaza]

@prmacias, I'm not sure why LOTAnimationView doesn't auto-populate in the custom class drop down of the Identity Inspector like LOTAnimatedControl & LOTAnimatedSwitch. However, if you simply paste LOTAnimationView into the Class box in IB it will work. Best of luck!

[james-rantmedia]

I'm currently getting:

2019-02-22 15:35:17.263609+0000 App[10201:3189822] Unknown class _TtC6Lottie16LOTAnimationView in Interface Builder file.
2019-02-22 15:35:17.267100+0000 App[10201:3189822] Failed to set (animation) user defined inspected property on (UIView): [<UIView 0x13f007b60> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key animation.

When trying to use a LOTAnimationView in an interface builder file.

[maciaspeter]

@Xeaza thanks for replying to my post. I tried your solution but it is not working so I'm sticking to LOTAnimatedControl for now.

[Xeaza]

Hey @james-rantmedia & @prmacias, I'd need more info to know exactly why you're experiencing the issues you're describing.
I made this example project. Hopefully it helps demonstrate exactly how I've been able to get LOTAnimationView to work in IB.

[maciaspeter]

I see the lottie updated its code from LOTAnimationView to AnimationView and I refactored the app and it's coming fine.

Thanks!

[james-rantmedia]

@Xeaza I checked your example project and the only difference is that you use Cocoa Pods and I'm using Carthage. Besides that, everything to do with how the LOTAnimationView was set in IB was the same.

Is there anything you're aware of with Carthage that would prevent views from a dynamic framework being used in IB?

[maciaspeter]

@james-rantmedia

Can you update the lottie via Carthage to see if that works? There are some editing from LOTAnimationView to AnimationView.

[james-rantmedia]

I updated to Lottie 3.0.1 and some of my existing animations no longer work, so I have reverted back to 2.5.2. I don't have the time to debug and fix/recreate the animations so that they work in Lottie 3.x right now.

[maciaspeter]

Understood. Have you tried LOTAnimationControl? Or any other lottie classes (Do you see it in the droplist?) It was working for me and LOTAnimationView is subclassed in LOTAnimationControl. I didn't see any issues with using LOTAnimationControl.

[james-rantmedia]

I didn't try the Interface Builder stuff. Lottie 3.x does not play some of my animations even when I use the animation views without Interface Builder, so I reverted. Even if Lottie does work with IB in this version, it's useless if the animations do not play. I will raise a separate issue regarding that problem.

[buba447]

@james-rantmedia I wrote the swift rewrite of lottie and Id love to get your animations working. Please file an issue and give me some details to work with.

[james-rantmedia]

@buba447 Here it is: #813

[maciaspeter]

Don't forget to add that your setup has Carthage in this issue. Mine's pods. That might narrow the solutions.

[LokiRathod]

Below is my code,
I have added the UIView from the StoryBoard (IB).
and i have set the UIView class name as AnimationView.
I am getting error Called.
"Unknown class AnimationView in Interface Builder file".

import UIKit
import Lottie

class TestAnimationViewController: UIViewController {

@IBOutlet weak var lotieAnimationView: AnimationView!


override func viewDidLoad() {
    super.viewDidLoad()
    playAnimation()
}

func playAnimation(){
    lotieAnimationView.animation = Animation.named("loading")
    lotieAnimationView.loopMode = .loop
    lotieAnimationView.play()
}

}

Please help me here.

[StefanLdhl]

I found the solution! Just set the module to Lottie.

[yassinecc]

@StefanLdhl I understand that you have to specify the module because Lottie comes from Pods/Carthage, in my case I still get an Unknown class _TtC6Lottie16LOTAnimationView in Interface Builder file error using Lottie 3.0.4 from Pods
Do you know if the module name changed between 3.0.4 and the latest version?

[StefanLdhl]

I don't think the module name has changed. It looks like you're still using "LOTAnimationView" instead of "AnimationView".

See Lottie 3.0 Release Notes
_"Please Note that the Api and Class names have changed slightly. (No more LOT prefix)."_

[yassinecc]

@StefanLdhl Sorry I was mistaken, I am using lottie-react-native v2.5.10 with lottie-ios set to 2.5.3. Interestingly, the UnknownClass error disappears as soon as I switch to 3.0.4

[croossin]

I am using Storyboard as well and added an AnimationView (ensuring I have set Lottie as the Module) but I seem to be getting an issue because window is nil. Very similar to issue #999 . @buba447 Any thoughts on what might be causing this? Seems like a pretty straightforward approach, but having no luck.

[shivamtiwari8736]

I found the solution! Just set the module to Lottie.

@StefanLdhl Worked for me, thanks!