在使用Lottie之前,你需要确保你的动画文件是有效的JSON格式。通常我们可以使用Adobe After Effects和一个Lottie插件来导出这些动画。 3.1 动画导出 在Adobe After Effects中,使用Bodymovin插件导出你的动画文件: 安装Bodymovin插件。 打开你想要导出的动画项目。 在菜单中找到Window > Extensions > Bodymovin,点击打开。 在...
安装Lottie 要在iOS 项目中使用 Lottie,首先需要通过 CocoaPods 安装 Lottie 的库。在终端中进入项目目录,并执行以下命令: pod'lottie-ios' 1. 安装完成后,打开项目的.xcworkspace文件,开始使用 Lottie。 加载动画 在项目中加载动画需要两个文件:动画的 JSON 文件和 Lottie 的AnimationView。首先,在项目中添加动画 ...
Lottie支持iOS 8 及其以上系统。当我们把动画需要的images资源文件添加到Xcode的目标工程的后,Lottie 就可以通过JSON文件或者包含了JSON文件的URL来加载动画。 最简单的方式是用LOTAnimationView来使用它,这也是最常用的一种方式。 LOTAnimationView *animation = [LOTAnimationView animationNamed:@"Lottie"]; [self.vi...
最基本的方式是用AnimationView来使用它: // someJSONFileName 指的就是用 AE 导出的动画本地 JSON 文件名letanimationView=AnimationView(name:"someJSONFileName")// 可以使用 frame 也可以使用自动布局animationView.frame=CGRect(x:100,y:100,width:100,height:100)view.addSubview(animationView)animationView...
真心的认为Lottie是一款十分优秀且实用的动画开发库,不只对于iOS和android原生开发者来说其让复杂动画的实现几乎没有成本,对于设计师来说,它的所见即所得,不需导出帧图像等优势也十分明显。本篇博客主要以iOS平台为例,简单介绍和总结Lottie动画库的使用方式。
1 点击Xcode，新建Xcode项目工程，选择Single View App，然后点击Next，输入工程名字，创建在桌面之上，如下：2 打开终端，进入到项目所在的目录底下，如下：cd /Users/Rain/Desktop/LottieTest 3 使用touch创建Podfile文件（touch Podfile），然后使用vim命令打开Podfile文件（vim Podfile），如下：4 按：进入到编辑模式...
使用LOTAnimationView 加载 json 文件 这里使用了懒加载的方式来加载这个 view, 具体过程如下,首先需要找到自定义 bundle 的地址,然后再在 bundle 中找到 json 文件并且加载。 animationView.png 播放动画 在Lottie 的 API 中我们可以看到,只需要简单的 [firstAnimationView play] 即可播放动画。到这里简单的需求基本...
后面我被人推荐去用lottie,一个可以把json格式文件转化为svg格式动图的工具,只需要安装一个包,就能轻松使用。 对不同的端它似乎分得比较细,我用的是lottie-web的包,但使用起来发现,在web端、ios端、android端都满足了我的需求。大家可以去它的官网或github按需安装使用(链接在文末)。
Lottie是一个用于Web和iOS(Android)的移动库,用于解析使用Bodymovin导出为json的Adobe After Effects动画,并在移动设备上呈现它们。设计师第一次可以创建和运送漂亮的动画,而无需工程师手工重新创建。
使用方法 集成环境: 移动端同学集成Lottie框架, UI/UE同学集成AE的bodymovin插件 制作动画, 导出文件, 拖进工程 创建LOTAnimationView, 并播放 非常简单, 下面看两个实际例子 实战 先看第一个例子: 典型的形变动画加上几个普通动画融合在一起, 如果由程序员来写, 确实还要花一番心思, 使用Lottie就非常容易了. ...