SDWebImageLottiePlugin

CI Status Version License Platform Carthage compatible codecov

What’s for

SDWebImageLottiePlugin is a plugin for SDWebImage framework, which provide the Lottie animation loading from JSON file.

You can find more resource about Lottie in their Official Site.

Requirements

  • iOS 8+
  • macOS 10.10+
  • tvOS 9+
  • Xcode 11+

Installation

CocoaPods

SDWebImageLottiePlugin is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'SDWebImageLottiePlugin'

Carthage

SDWebImageLottiePlugin is available through Carthage.

github "SDWebImage/SDWebImageLottiePlugin"

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.

Usage

Load Lottie from remote JSON

  • Objective-C
LOTAnimationView *animationView;
NSURL *lottieJSONURL;
[animationView sd_setImageWithURL:lottieJSONURL];
  • Swift
let animationView: LOTAnimationView
let lottieJSONURL: URL
animationView.sd_setImage(with: lottieJSONURL)

Advanced usage

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.

  • Objective-C
LOTComposition *composition = [LOTComposition animationFromJSON:jsonDict];
LOTAnimatedImage *animatedImage = [[LOTAnimationImage alloc] initWithComposition:composition];
// Snapshot Lottie animation frame
UIImage *posterFrame = [animatedImage animatedImageAtIndex:0];
  • Swift
let composition = LOTComposition(json: jsonDict)
let animatedImage = LOTAnimationImage(composition: composition)
// Snapshot Lottie animation frame
UIImage *posterFrame = animatedImage.animatedImageFrame(at: 0)

Demo

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.

Screenshot

  • iOS Demo

  • macOS Demo

The lottie json files are from lottie-web example

Author

DreamPiggy

License

SDWebImageLottiePlugin is available under the MIT license. See the LICENSE file for more info.