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