Lottie动画教程

为了提升用户体验, 在界面中加入一个设计良好的界面动画成为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