Lottie動畫教程

原文: www.jianshu.com/p/83f6a228b…

爲了提高用戶體驗, 在界面中加入一個設計良好的界面動畫成爲app設計的潮流. 以前聽有人說過專業的界面動畫是要有設計師、工程師、程序員、平面動畫師等組成, 想一想這是一個多大的任務量啊. 並且裏面的各類邏輯處理, 複雜一些的動畫, 通常人幾乎是望其項背;

但有了Lottie以後, 就大大下降了開發者的難度. 咱們能夠直接把Lottie的動畫文件導入, 設置一下參數, 就可使用這個動畫了. 爲了知足你們的好奇心, 先附幾個簡單的實例:

Lottie簡單實例

一. 初識Lottie

經過AE上的Bodymovin插件將AE中製做好的動畫導出成一個json文件，Lottie實現了iOS/macOS/Android/React Native三個平臺對該json文件的解析和渲染。

全部這些動畫都是在After Effects中建立的，使用Bodymovin導出，而且無需額外的工程師工做便可完成原生渲染。

Bodymovin是一個又Hernan Torrisi建立的After Effects插件，導出文件格式爲json和包括一個javascript網絡播放器。而它最大的優勢是提供了一套完整的跨平臺動畫實現工做流;

從代碼上看，iOS端是基於layer，而最終都是對canvas的操做，中間除去解析json外，基本無耗費性能的行爲。

固然也不可能都那麼完美, 畢竟開源不久, 它仍然存在如下問題:

1. Bodymovin插件待完善，仍然有部分AE效果沒法成功導出；
2. Lottie對json文件的支持待完善，目前有部分能成功導出成json文件的效果在移動端上沒法很好的展示；
3. 目前不支持文字，全部文字必須轉成矢量圖才能正常展示動畫；
4. 動畫沒法被編輯，即移動端沒法更改遠端下載到本地的動畫；
5. 文檔更新不及時等;
   注:
   iOS須要iOS8及以上, 安卓須要API14及以上;

二. 如何用Bodymovin插件製做動畫

iTerryWang在他的簡書博客裏詳細介紹瞭如何使用Bodymovin插件製做動畫, 我就很少說了, 也同時感謝一下iTerryWang的分享;
Lottie簡介 & iOS集成使用

三. 如何使用Lottie

1. 下載Lottie動畫文件
除了用Bodymovin插件建立動畫外, 咱們還能夠在Lottie Files下載;

Lottie Files是一個擁有高質量Lottie文件格式動畫的網站。在這個網站，不只設計師能夠在上面陳列他們的動畫並且還提供免費下載. 這步結束後, 咱們就準備好了動畫所需的JSON文件;

2. 新建工程
新建一個工程, 命名爲LottieTest;

3. 導入Lottie動畫庫
用CocoaPods安裝Lottie動畫庫:
在終端進行以下操做:
①進入文件目錄(文件目錄要用本身的工程目錄);

cd /Users/apple/Desktop/LottieTest複製代碼

②建立podfile

pod init複製代碼

③打開文件編輯

target 'LottieTest' do
  pod 'lottie-ios'
end複製代碼

④導入Lottie項目

pod install複製代碼

4. 添加Lottie動畫的JSON文件
以前已經準備好這個文件了, 導入工程就行;

5. 建立動畫
OC版:

#import "ViewController.h"
#import <Lottie/Lottie.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    LOTAnimationView *lottieTest = [LOTAnimationView animationNamed:@"servishero_loading"];
    lottieTest.contentMode = LOTViewContentModeScaleAspectFill;
    lottieTest.frame = self.view.bounds;
    lottieTest.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;
    [self.view addSubview:lottieTest];
    [lottieTest play];
}

@end複製代碼

swift版:

import UIKit
import Lottie

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        if let animationView = LOTAnimationView(name: "servishero_loading") {
// if let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/LottieLogo1.json")!) {
            animationView.frame = self.view.bounds
            animationView.center = self.view.center

            animationView.loopAnimation = true
            animationView.contentMode = .scaleAspectFill
            animationView.animationSpeed = 0.5

            // Applying UIView animation
            let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1)
            animationView.transform = minimizeTransform
            UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {
                animationView.transform = CGAffineTransform.identity
            }, completion: nil)

            view.addSubview(animationView)

            animationView.play()
        }

    }
}複製代碼

至於android, reactNative參照下方github地址:
android
reactNative

擴展:
Airbnb 動畫庫Lottie