Lottie-ios: Adding animation to UICollectionViewCell/UITableViewCell

Created on 13 Mar 2017  路  3Comments  路  Source: airbnb/lottie-ios

I need to know a way to add a LOTAnimationView to a collectionView prototype and then link it to the collectionViewCell. The animation will play when you press a button on the cell. Any ideas?

Most helpful comment

Ah, I guess you're using a storyboard. Perhaps someone else can confirm, but It looks like you can't add create LOTAnimationViews from interface builder.

Easiest workaround is to create a UICollectionViewCell subclass, and then add the animation in code. Something like:

import UIKit
import Lottie

class AnimCollectionViewCell: UICollectionViewCell {

    var anim: LOTAnimationView!

    override func awakeFromNib() {
        super.awakeFromNib()

        anim = LOTAnimationView(name: "LottieLogo1")
        anim.contentMode = .scaleAspectFit
        self.contentView.addSubview(anim)

        anim.centerXAnchor.constraint(equalTo: self.contentView.centerXAnchor)
        anim.centerYAnchor.constraint(equalTo: self.contentView.centerYAnchor)

    }

    public func play() {
        anim.play()
    }

}

All 3 comments

You can add an LOTAnimationView to a UICollectionViewCell like any other custom view.

I did try doing that but then I don't know how to exactly play the animation

Ah, I guess you're using a storyboard. Perhaps someone else can confirm, but It looks like you can't add create LOTAnimationViews from interface builder.

Easiest workaround is to create a UICollectionViewCell subclass, and then add the animation in code. Something like:

import UIKit
import Lottie

class AnimCollectionViewCell: UICollectionViewCell {

    var anim: LOTAnimationView!

    override func awakeFromNib() {
        super.awakeFromNib()

        anim = LOTAnimationView(name: "LottieLogo1")
        anim.contentMode = .scaleAspectFit
        self.contentView.addSubview(anim)

        anim.centerXAnchor.constraint(equalTo: self.contentView.centerXAnchor)
        anim.centerYAnchor.constraint(equalTo: self.contentView.centerYAnchor)

    }

    public func play() {
        anim.play()
    }

}
Was this page helpful?
0 / 5 - 0 ratings