iOS高質量的動畫實現解決方案——Lottie

iOS高質量的動畫實現解決方案——Lottie

    真心的認爲Lottie是一款十分優秀且實用的動畫開發庫，不僅對於iOS和android原生開發者來講其讓複雜動畫的實現幾乎沒有成本，對於設計師來講，它的所見即所得，不需導出幀圖像等優點也十分明顯。本篇博客主要以iOS平臺爲例，簡單介紹和總結Lottie動畫庫的使用方式。

1、幾個有用連接

Lottie官網：https://airbnb.design/lottie/。

LottieFiles：https://www.lottiefiles.com/。

LottieFiles是一個在線的測試Lottie動畫的網站，而且其上面也提供了許多經常使用的Lottie動畫組件。

2、一個簡單的小Demo

    先來看一個簡單的小例子，我在LottieFiles上找了一個騎行動畫的JSON文件，此文件的下載地址以下：

https://www.lottiefiles.com/download/1385

這是一個比較炫酷的騎行動畫，試想一下，若是使用GIF或幀動畫來實現，須要素材的大小可能要遠遠超過136k。將下載的JSON文件添加到iOS項目中，以後就像使用圖片同樣的來使用它便可，代碼以下：

#import <Lottie/Lottie.h>
@interface ViewController ()

@property(nonatomic,strong)LOTAnimationView * animationView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.animationView = [LOTAnimationView animationNamed:@"go.json"];
    [self.view addSubview:self.animationView];
    self.animationView.frame = CGRectMake(20, 30, 280, 200);
    self.animationView.loopAnimation = YES;
    [self.animationView play];
}

@end

動畫效果以下圖：

不管是從流暢度仍是性能上，動畫效果都要比GIF圖片好許多。

3、對Lottie庫的應用解析

    首先LOTAnimationView類是顯示Lottie動畫的視圖類，從源代碼中看它是繼承自LOTView，不要慌，這個LOTView並非什麼稀奇古怪的類，它其實就是爲了代碼統一，是UIView或NSView的別名而已。  若是你將動畫直接拖入到主工程下面，那麼能夠直接使用動畫JSON文件名來進行動畫的建立，方法以下：

//直接從mainBundle中加載素材
+ (nonnull instancetype)animationNamed:(nonnull NSString *)animationName NS_SWIFT_NAME(init(name:));

你也能夠從自定義的Bundle或者使用其餘方式來加載JSON文件：

//從自定義的Bundle加載動畫
+ (nonnull instancetype)animationNamed:(nonnull NSString *)animationName inBundle:(nonnull NSBundle *)bundle NS_SWIFT_NAME(init(name:bundle:));
//直接從JSON字典加載動畫
+ (nonnull instancetype)animationFromJSON:(nonnull NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));
//直接經過JSON文件加載動畫
+ (nonnull instancetype)animationWithFilePath:(nonnull NSString *)filePath NS_SWIFT_NAME(init(filePath:));
+ (nonnull instancetype)animationFromJSON:(nullable NSDictionary *)animationJSON inBundle:(nullable NSBundle *)bundle NS_SWIFT_NAME(init(json:bundle:));
//從URL加載
- (nonnull instancetype)initWithContentsOfURL:(nonnull NSURL *)url;

其實不管上面哪一種方式加載動畫，都是經過LOTComposition組件類實例化的，你也能夠直接經過這個類來構建動畫視圖：

//經常使用的構造方法
+ (nullable instancetype)animationNamed:(nonnull NSString *)animationName NS_SWIFT_NAME(init(name:));
+ (nullable instancetype)animationNamed:(nonnull NSString *)animationName
                              inBundle:(nonnull NSBundle *)bundle NS_SWIFT_NAME(init(name:bundle:));
+ (nullable instancetype)animationWithFilePath:(nonnull NSString *)filePath NS_SWIFT_NAME(init(filePath:));
+ (nonnull instancetype)animationFromJSON:(nonnull NSDictionary *)animationJSON NS_SWIFT_NAME(init(json:));
+ (nonnull instancetype)animationFromJSON:(nullable NSDictionary *)animationJSON
                                 inBundle:(nullable NSBundle *)bundle NS_SWIFT_NAME(init(json:bundle:));
- (instancetype _Nonnull)initWithJSON:(NSDictionary * _Nullable)jsonDictionary
                      withAssetBundle:(NSBundle * _Nullable)bundle;

JSON文件中包含的信息很是豐富，會與LOTComposition實例進行映射，例如動畫的時長，起始幀和結束幀，寬高尺寸等。

    構造出LOTAnimationView實例後，須要調用方法進行動畫的播放，下面列出了LOTAnimationView中的經常使用屬性與方法：

//獲取動畫是否正在播放
@property (nonatomic, readonly) BOOL isAnimationPlaying;
//設置動畫是否循環播放
@property (nonatomic, assign) BOOL loopAnimation;
//設置動畫是否自動逆序播放
@property (nonatomic, assign) BOOL autoReverseAnimation;
//設置是否緩存
@property (nonatomic, assign) BOOL cacheEnable;
//動畫完成的回調block
@property (nonatomic, copy, nullable) LOTAnimationCompletionBlock completionBlock;
//組件實例
@property (nonatomic, strong, nullable) LOTComposition *sceneModel;
//從指定的進度位置播放動畫
- (void)playToProgress:(CGFloat)toProgress
        withCompletion:(nullable LOTAnimationCompletionBlock)completion;
//播放指定區間內的動畫
- (void)playFromProgress:(CGFloat)fromStartProgress
              toProgress:(CGFloat)toEndProgress
          withCompletion:(nullable LOTAnimationCompletionBlock)completion;
//播放到動畫的某一幀
- (void)playToFrame:(nonnull NSNumber *)toFrame
     withCompletion:(nullable LOTAnimationCompletionBlock)completion;
//播放指定幀區間內的動畫
- (void)playFromFrame:(nonnull NSNumber *)fromStartFrame
              toFrame:(nonnull NSNumber *)toEndFrame
       withCompletion:(nullable LOTAnimationCompletionBlock)completion;
//播放動畫 能夠設置回調
- (void)playWithCompletion:(nullable LOTAnimationCompletionBlock)completion;
//直接播放動畫
- (void)play;
//暫停播放
- (void)pause;
//中止播放
- (void)stop;
//設置當前幀
- (void)setProgressWithFrame:(nonnull NSNumber *)currentFrame;
//設置某一幀對應的動畫屬性值
- (void)setValue:(nonnull id)value
      forKeypath:(nonnull NSString *)keypath
         atFrame:(nullable NSNumber *)frame;