Android项目源码

Lottie动画(动画的未来)

2019-12-14  本文已影响0人  抓鱼猫L

我们在平时开发中,要实现一个动画,大多数情况直接用Gif图,但Gif占用空间较大,而且需要为各种屏幕尺寸、分辨率做适配;另一种是用帧动画,但是帧动画占用空间比 Gif 还要大的多,也需要做适配。

当项目中有很多地方用到动画效果的时候会添很多Gif,这样打出来的包会很大。这时候我们会要求设计师压缩尺寸后再给我们,这样包是变小了,但是用户体验会很差,动效很不清晰。

这种情况下,就轮到 Lottie、 (LottieFiles) 登场了,阿里新出的 犸良https://design.alipay.com/emotion就是基于Lottie动画的。设计师做好动效后只需导出很小的Json文件,把Json文件拖入工程,在iOS (安卓、Web) 代码中读取这份Json文件,解析动画结构和参数信息并渲染就行了。

一、集成:


在iOS中使用需要先集成Lottie的SDK (Swift版本OC版本),然后直接在代码中使用就可以了。

1、Swift:

pod'lottie-ios'复制代码

代码:

import UIKit

import Lottie

class ViewController: UIViewController {

    let lottieView = AnimationView()

    override func viewDidLoad() {

        super.viewDidLoad()

        lottieView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)

        lottieView.center = self.view.center

        lottieView.animation = Animation.named(“lottieJson“)//绑定Lottie动画

        lottieView.loopMode = .loop//动画效果 执行单次、多次

        lottieView.contentMode = .scaleAspectFit

        lottieView.backgroundBehavior = .pauseAndRestore//设置进入后台是否暂停动画

        self.view.addSubview(lottieView)

        lottieView.play()//开始动画

        //lottieView.stop()//暂停动画

}}

2、OC:

pod'lottie-ios_Oc'复制代码

代码:

#import "ViewController.h"

#import <lottie_ios_Oc/LOTAnimationView.h>

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    LOTAnimationView *lottieView = [LOTAnimationView animationNamed:@"lottieJson"];//绑定Lottie动画

    lottieView.frame = CGRectMake(0, 0, 400, 400);

    lottieView.center = self.view.center;

    lottieView.loopAnimation = YES;//动画效果 执行单次、多次

    lottieView.contentMode = UIViewContentModeScaleAspectFit;

    //handleWillEnterBackground 进入后台默认暂停动画

    [self.view addSubview:lottieView];

    [lottieView playWithCompletion:^(BOOL animationFinished) {

      //动画完成后可执行自定义操作

    }];

    [lottieView play];//开始动画

    //[lottieView stop];//暂停动画

}

@end

二、总结


1、优点:

·开发成本低,设计师导出Json文件给到开发即可。

·动画实现成功率高,只要设计师能设计出来的都能实现。

·支持服务端URL方式创建,通过服务端配置Json文件随时替换动画,不用重新发版。

·iOS、安卓、Web可用同一套Json文件。

·支持转场动画,Presen/Dismiss时可做转场效果。


2、缺点:

 ·低配设备上解析大Json文件可能比较耗时、异常,适用硬件性能较好的设备。

解决:

·手机性能不断升级,将有效缓解这方面问题;

·切换页面后暂停动画,节省资源;

·设计师注意好这些注意事项 Lottie避坑指南常见错误免异常总结,也能让动画更流畅;

如果觉得本文有用,可以在下方点个赞。如果发现有遗漏或不对的地方,请在下方留言~

资料:

从Json到Animationlottie-ios学习笔记使用Lottie播放动画安卓集成

上一篇下一篇

猜你喜欢

热点阅读