You can find more resource about Lottie in their Official Site.
- iOS 9+
- macOS 10.11+
- tvOS 9+
- Xcode 11+
SDWebImageLottiePlugin is available through CocoaPods. To install it, simply add the following line to your Podfile:
SDWebImageLottiePlugin is available through Carthage.
Lottie 2 && 3
Although Lottie already release 3.x with the full Swift-rewritten code, however, during the performance testing of demo project, the Lottie 3 render performance is 60% slower than Lottie 2, many animation can not render as 60 FPS, while Lottie 2 did. See compare result at here.
So, to provide better performance on user, this plugin was written to support Lottie 2 currently, until Lottie community fix the performance problem. Track the issue here.
If you really want Lottie 3 support, please checkout 1.x branch, which provide the Lottie 3 and fully written in Swift. Once Lottie 3 fix the performance issue, we will upgrade this plugin's major version to 1.0 and release with Lottie 3 support.
Load Lottie from remote JSON
LOTAnimationView *animationView; NSURL *lottieJSONURL; [animationView sd_setImageWithURL:lottieJSONURL];
let animationView: LOTAnimationView let lottieJSONURL: URL animationView.sd_setImage(with: lottieJSONURL)
- You can also load lottie json files on
LOTAnimatedControl, like switch button.
- Lottie animation does not start automatically, you can use the completion block, or UITableView/UICollectionView's will display timing to play.
- If your Lottie json files contains references to App bundle images, you can use
SDWebImageContextLottieBundlecontext option to pass the NSBundle object to load it.
This Lottie plugin use a wrapper class
LOTAnimatedImage because of SDWebImage's customization architecture design. Typically you should not care about this, however this can allows some advanced usage.
LOTComposition *composition = [LOTComposition animationFromJSON:jsonDict]; LOTAnimatedImage *animatedImage = [[LOTAnimatedImage alloc] initWithComposition:composition]; // Snapshot Lottie animation frame UIImage *posterFrame = [animatedImage animatedImageAtIndex:0]; NSTimeInterval duration = [animatedImage animatedImageDurationAtIndex: 0];
let composition = LOTComposition(json: jsonDict) let animatedImage = LOTAnimatedImage(composition: composition) // Snapshot Lottie animation frame UIImage *posterFrame = animatedImage.animatedImageFrame(at: 0) TimeInterval duration = animatedImage.animatedImageDuration(at: 0)
- The snapshot is a bitmap version and used for special cases, like thumbnail poster. You'd better not play it on SDAnimatedImageView. Because Lottie is a vector animation and LOTAnimationView use Core Animation for rendering, which is faster.
If you have some issue about usage, SDWebImageLottiePlugin provide a demo for iOS && macOS platform. To run the demo, clone the repo and run the following command.
cd Example/ pod install open SDWebImageLottiePlugin.xcworkspace
After the Xcode project was opened, click
Run to build and run the demo.
- iOS Demo
- macOS Demo
The lottie json files are from lottie-web example
SDWebImageLottiePlugin is available under the MIT license. See the LICENSE file for more info.