iOS高质量的动画实现解决方案——Lottie

简介: iOS高质量的动画实现解决方案——Lottie

真心的认为Lottie是一款十分优秀且实用的动画开发库,不只对于iOS和android原生开发者来说其让复杂动画的实现几乎没有成本,对于设计师来说,它的所见即所得,不需导出帧图像等优势也十分明显。本篇博客主要以iOS平台为例,简单介绍和总结Lottie动画库的使用方式。


一、几个有用链接


Lottie官网:https://airbnb.design/lottie/


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


LottieFiles是一个在线的测试Lottie动画的网站,并且其上面也提供了许多常用的Lottie动画组件。


二、一个简单的小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图片好许多。


三、对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;

目录
相关文章
|
存储 Android开发 iOS开发
iOS不支持HEIC格式的图片显示和标签函数显示问题及解决方案
iOS不支持HEIC格式的图片显示和标签函数显示问题及解决方案
651 0
|
开发框架 前端开发 Android开发
探索安卓和iOS应用开发中的跨平台解决方案
【10月更文挑战第42天】在移动应用开发的广阔天地中,安卓和iOS系统如同两座巍峨的山峰,分别占据着半壁江山。开发者们在这两座山峰之间穿梭,努力寻找一种既能节省资源又能提高效率的跨平台开发方案。本文将带你走进跨平台开发的世界,探讨各种解决方案的优势与局限,并分享一些实用的代码示例,助你在应用开发的道路上更加游刃有余。
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时,按钮将从圆形变为椭圆形并从蓝色渐变为绿色;释放按钮时,动画恢复原状。通过UIView的动画方法和弹簧动画效果,实现平滑自然的动画过渡。
330 5
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时,按钮将从圆形变为椭圆形,颜色从蓝色渐变到绿色;释放按钮时,动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果,实现平滑自然的过渡。
380 1
|
测试技术 开发工具 iOS开发
iOS自动化测试方案(三):WDA+iOS自动化测试解决方案
这篇文章是iOS自动化测试方案的第三部分,介绍了在没有MacOS系统条件下,如何使用WDA(WebDriverAgent)结合Python客户端库facebook-wda和tidevice工具,在Windows系统上实现iOS应用的自动化测试,包括环境准备、问题解决和扩展应用的详细步骤。
4158 1
iOS自动化测试方案(三):WDA+iOS自动化测试解决方案
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
400 7
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台解决方案
【9月更文挑战第27天】在移动应用开发的广阔天地中,安卓和iOS两大操作系统如同双子星座般耀眼。开发者们在这两大平台上追逐着创新的梦想,却也面临着选择的难题。如何在保持高效的同时,实现跨平台的开发?本文将带你探索跨平台开发的魅力所在,揭示其背后的技术原理,并通过实际案例展示其应用场景。无论你是安卓的忠实拥趸,还是iOS的狂热粉丝,这篇文章都将为你打开一扇通往跨平台开发新世界的大门。
871 9
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
369 11
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
274 7
|
前端开发 开发工具 Android开发
探索安卓与iOS应用开发:跨平台解决方案的崛起
【8月更文挑战第27天】在移动设备日益普及的今天,安卓和iOS系统占据了市场的主导地位。开发者们面临着一个重要问题:是选择专注于单一平台,还是寻找一种能够同时覆盖两大系统的解决方案?本文将探讨跨平台开发工具的优势,分析它们如何改变了移动应用的开发格局,并分享一些实用的开发技巧。无论你是新手还是资深开发者,这篇文章都将为你提供有价值的见解和建议。