首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Lottie动画中获得可用的总帧数?

在Lottie动画中,可以通过以下步骤获得可用的总帧数:

  1. 首先,需要导入Lottie动画库并加载动画文件。Lottie是一个开源的动画库,可以在多个平台上使用,包括Web、iOS和Android。你可以在Lottie的官方网站(https://airbnb.design/lottie/)上找到相关的文档和资源。
  2. 加载动画文件后,可以使用动画库提供的方法来获取动画的总帧数。具体的方法可能因不同的平台而有所不同,以下是一些常见平台的示例:
    • 在Web上使用Lottie Web库,可以通过animationData对象的fr属性来获取总帧数。例如:animationData.fr
    • 在iOS上使用Lottie iOS库,可以通过animationView对象的animation属性的totalFrame属性来获取总帧数。例如:animationView.animation.totalFrame
    • 在Android上使用Lottie Android库,可以通过LottieAnimationView对象的getDuration()方法来获取动画的总时长(以毫秒为单位),然后将其除以帧率来计算总帧数。例如:int totalFrames = animationView.getDuration() / animationView.getFrameRate()
  • 获得总帧数后,你可以根据需要在动画播放过程中使用它。例如,你可以根据总帧数来设置动画的播放进度,或者在特定帧数上执行其他操作。

总结起来,要在Lottie动画中获得可用的总帧数,你需要导入相应的Lottie动画库,并使用库提供的方法来获取总帧数。具体的方法取决于你所使用的平台和库。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

深度剖析Lottie动画原理

这5个是动画中最基本属性,也是最重要。...动态),而这组合关键帧数据就是lottie动画需要数据。...(图一) 上面的数据翻译:0~30帧 scale属性值从20 -> 12,30~60帧 scale属性值从12 ->20,完成动画。上面动画之所以一直,是lottie库可以设置loop循环播放。...当然也是一个3阶贝塞尔曲线,只不过这个是用来求路径点轨迹,而不是求速率。 lottie动画会利用2个控制点和贝塞尔三阶公式,在一段关键帧动画中,默认描绘150个路径轨迹点来代表这一段曲线路径轨迹。...我自己尝试写了一个lottie-light轻量库,能完成上文提到5个属性值变化动画,下面是一些实践案例。 狮子头部位 ? 舞台闪烁 ? 希望本文对你有启发,可以把原理应用到各种复杂画中去。

5.6K31

Lottie动画秘籍--QQ超清表情大揭秘

提高动画流畅度最直接方法就是增加帧率,即在一定时间画中增加更多图片。但这会导致资源大小激增。而过大资源会导致手机卡顿。所以为了保证手机上播放流畅,大动画往往需要抽帧。...3-1 60FPS 超高帧率 帧率即每秒传输帧数(FPS),是指每一秒传输到屏幕上画面数。一般来说,帧率越高其画面越流畅。24FPS电影已经达到人眼认为流畅要求。...近些年一些高帧率电影(《霍比特人:意外之旅》)可以达到48帧/秒,其画面震撼度和清晰度都得到大大提升。...·功能:制作时只使用下图中Lottie支持AE功能 ·表达式:Lottie对表达式支持并不全面,经常失效。...可用插件将表达式烘培成关键帧后再导出 ·模糊:Lottie不支持模糊功能,可尝试使用渐变来替代模糊效果。 未来 QQ黄脸表情一直走在国内社交平台表情前列。

1.1K40
  • 动画菜鸡自我救赎之企鹅辅导品牌页开发总结

    在做这个需求之前,我一直认为图和视频实现原理应该是差不多,所以同样效果图和视频应该大小上也差不多。但实际上,导出视频大小会比导出动图大小要小很多,后面在实现小男孩动画时候我会讲到。...相比图和视频实现方法,用lottie实现动画十分轻量,因为lottie只需要加载一个json文件,和其他必要图片就可以了。...所以这里我用到了lottie来实现,发现lottie确实能够很好地这个效果,而且文件大小也比较小,只需要479KB,如果用图或者视频,一般来说没有1M以上搞不定。 ?...首先给大家留一个思考题考考大家: 由于老师比较多,不可能每位老师都让设计切一个图,那么这个效果如何用纯css来实现(阴影可用图片)?。 ? 聪明你想到了吗?...lottie效果: ? 实际效果: ? 可以看到lottie丢失了一些倾斜度、渐变,颜色也不太对。所以果断放弃了lottie方案。 那么这里还可以用video或者图来实现。

    1.8K41

    超全面的 UI 工作流程指南(四):切图标注

    ; 输出切图应当尽可能压缩大小,以降低 APP 大小,提升用户使用时加载速度(推荐在线压缩:https://tinypng.com); 所有的变形字体把它当成 icon 来切; 切图输出格式:...效元素切图 效元素切图一般是指在 app 中加载效所需要切图元素。 gif 图切图一般分为三种: 一是只需要给到 gif 图部分即可。...Airbnb 开发了一款效神器:Lottie,这是一个将 After Effects 动画提供给任意一个 iOS,macOS,Android 还有 React Native 原生 APP 文件库。...这些动画通过一个叫 Bodymovin 开源 After Effects 插件,以 JSON 文件形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。...常用英文单词表 标注软件 现如今市场已有很多设计交互平台,:国内摹客、墨刀等,国外 Figma、invision 等,各自都有优秀特点,既满足交互需求,又能有标注切图功能,选择适合自己团队工具与开发一起协作即可

    3.4K41

    复杂帧动画之移动端video采坑实现

    在企鹅辅导品牌页中,我们需要实现一个动画如下: 页面滚动到动画区域,播放动画, 对应动画部分如下: 帧动画当前实现有以下几种方式: GIF 动画 大家比较熟悉图片格式 lottie(http:...//airbnb.io/lottie/) Airbnb 开源项目,通过解析 AE 动画为 json 数据,支持跨平台动画效果解决方案;lottie 在辅导中已经有实际应用,使用过同学都表示对其实现效果和开发速度表示称赞和推荐...,如果你还不了解 lottie, 推荐 lottie 系列学习文章(https://imweb.io/topic/5b23a745d4c96b9b1b4c4efc) APNG (Animated Portable...GIF 动画适用于处理色彩简单、效简单动画, logo 、 icon 图这样小图动画,在上面需要实现画中明显细节比较多,区域也比较大,考虑到质量 GIF 排除在外 在使用哪种方式实现该动画上...实现,右图为我我们目标实现效果 可以看到实现还是存在着差异,颜色、数字倾斜度、虚线透视都没有达到预期,于是放弃lottie 使用,但这并不否定 lottie 在实现其它动画优秀效果 APNG

    2.3K10

    复杂帧动画之移动端video采坑实现

    在企鹅辅导品牌页中,我们需要实现一个动画如下: 页面滚动到动画区域,播放动画, 对应动画部分如下: 帧动画当前实现有以下几种方式: GIF 动画 大家比较熟悉图片格式 lottie Airbnb...开源项目,通过解析 AE 动画为 json 数据,支持跨平台动画效果解决方案;lottie 在辅导中已经有实际应用,使用过同学都表示对其实现效果和开发速度表示称赞和推荐。...,需要考虑兼容; HTML video 元素 GIF 动画适用于处理色彩简单、效简单动画, logo 、 icon 图这样小图动画,在上面需要实现画中明显细节比较多,区域也比较大,考虑到质量...给到我们前端开发,在使用这段 json 数据中,我们引入了 lottie-web 脚本来解析这段 json 数据渲染成为SVG / canvas 动画,效果如下图, 左图为用 lottie 实现,右图为我我们目标实现效果...可以看到实现还是存在着差异,颜色、数字倾斜度、虚线透视都没有达到预期,于是放弃lottie 使用,但这并不否定 lottie 在实现其它动画优秀效果 APNG 在对设计师给到分段动画帧图片压缩之后

    2.4K10

    AirBnb 开源动画引擎 Lottie:采用 Core Animation 提高性能

    Lottie 4.0 中,AirBnb 放弃了使用 CADisplayLink 在主 CPU 线程上制作图形动画原始方法: 每帧一次,Lottie 将在主线程上执行代码,以推进动画进度并重新渲染其内容...这意味着动画在播放时将消耗 5–20% 以上 CPU,从而减少了用于应用程序其余部分可用 CPU 周期。...例如,Airbnb 应用程序在首次启动时显示 Lottie 动画。我们在这里进行了一项实验,发现切换到新渲染引擎可以缩短应用程序启动时间,同时还可以提高启动动画帧速和用户体验。...除了新基于核心动画(Core Animation)渲染引擎外,Lottie 4.0 还带来了一种新文件格式,它使用压缩将一个或多个 Lottie JSON 文件及其相关资源聚合到一个文件中。...你可以从 GitHub repo 或使用包管理器( CocoaPods、Carthage 或 Swift 包管理器)安装它。 作者简介: Sergio De Simone 是一名软件工程师。

    2K20

    动画:从 AE 到 Web,‘甩锅’给设计师

    因为设计师一般只给到“静态”视觉稿,而无动画演示,更不用说提供效搞( AE)了。 在这种情况下,页面的效更多是由前端开发者自由发挥。因此对效有钻研同学优势尽显。...lottie-web 是 Airbnb 团队一个用于在 Web、Android、iOS 和 React Native 渲染 AE 动画库。 可是『世界上本来就没有十全十美的东西』。...基于 AE 手工实现 Web 动画主要工作有两个: 在效稿上拿到元素参数信息, x/y/z、rotation 等 通过适当 Web 技术进行实现, CSS3/Canvas/SVG 等 如何手工取参...上所述,可在关键帧上指定不同函数,以满足关键帧间属性不同变化速率。 更强大 cubic-bezier 细心读者可能又发现:缓函数碰巧是 预定义关键字,如果是以下这种情况呢?...相对于『无效稿』反复编码尝试,该方法无疑能提高效益。当然,『手工』不能胜任复杂动画( SVG 变形动画(Morphing)),并且低效。

    3.4K00

    玩转AE丨效设计必备指南

    如今效设计也有了更多解决方案,Framer、Principle、Flinto、Protopie等,这些软件在制作交互原型时,确实有更轻量便捷优势,但效果也有一定局限性,或者要求使用者有代码基础...能够将AE中矢量图形做成效导成json文件,变成一串纯粹代码,再被Lottie渲染还原出来。...播放型效有以下几种比较常见输出格式:  Gif、Apng、Webp本质上都是将位图进行压缩和转换,而Lottie则是基于代码层面的动画渲染,PAG则结合了两者特性。...目前一般使用Apng、Lottie、和PAG就已经可以覆盖大部分输出场景,是可以优先考虑图格式。...,希望能帮助大家在日常设计工作中有所帮助或从中获得更多启发。

    1.9K43

    Canvas基础-粒子动画Part2

    粒子动起来 有了上一篇基础,我们已经可以获得粒子,并将轮廓显示在Canvas上,如果看了之前我写一些关于 Canvas动画啊,画图啊什么文章的话,其实应该已经很清楚如何去让这些粒子动起来。...要让粒子动起来无非是不断计算粒子位置,如果是线性增加的话,会比较生硬,这里使用了Tween函数,可以看一下jquery.easing.js里面的缓函数,直接拿来用就可以了,效果很多,我这里只选择了一个...16.66) 中3000表示3000毫秒,也就是整个动画耗时3秒,而16.66是因为按60FPS来算,浏览器对每一帧画面的渲染工作需要1秒 / 60 = 16.66毫秒,算出来之后再做个向上取整,就算出帧数...动画进行中时候frameNum < frameCount,通过前面的缓函数计算出当前应该到达x,y值,然后画到Canvas上并将这个点帧数加一。...这里简单用帧数和一个随机数相乘。

    1.4K70

    从 0到1,开发一个动画库(1)

    本文将从零开始,讲授如何搭建一个简单动画库,它将具备以下几个特征: 从实际动画中抽象出来,根据给定动画速度曲线,完成“由帧到值”计算过程,而实际渲染则交给开发者决定,更具拓展性 支持基本事件监听..., 、 、 、 ,及相应回调函数 支持手动式触发动画各种状态, 、 、 、 支持自定义路径动画 支持多组动画链式触发 完整项目在这里:点赞行为高尚!...目录结构 首先介绍下我们项目目录结构: 是本项目的根目录,各文件作用分别如下: index.js 项目入口文件 core.js 动画核心文件 easing.js 存放基本缓函数 引入缓函数 所谓动画...有了这种函数关系,给定任意一个时间点,我们都能计算出对应状态值。OK,那如何在画中引入缓函数呢?不说废话,直接上代码。..._ ^ 看到这里,本文就差不多结束了,下节将介绍如何在项目中加入各类事件监听及触发方式。

    2.1K80

    使用强大 AirBnb Lottie 让你 React APP 炫酷起来

    这是一个拥有大量免费和付费Lottie动画网站。 假设我们想要在我们应用程序中使用一个动画React logo(注意,你可以使用任何可用动画)。...我将从lottifiles中选择以下React图标旋转React动画。从那里,我们可以预览它,并改变一些东西,背景颜色。...npm i lottie-web 请注意,有一个替代Lottie可用,称为react-lottie,但是它在底层使用Lottie-web,可以方便地直接使用,稍后你将看到这一点。...我们需要获得对JSX/DOM元素引用,我们希望将动画放入该元素,并向其提供JSON数据。...添加 Lottie Light 版本 最后,我要提到关于Lottie最后一点是Lottie-web是一个相当大依赖性。

    2K20

    将 iOS 应用体积缩小一半秘籍:妥善运用动态框架

    其中配有共享扩展和部件扩展,均可用于显示汽车图像。 与各类现代应用一样,EmergeMotors 拥有一个专用 UI 库 EmergeUI,其中包含常用组件及资产。...", package: "lottie-ios")] ) ] ) 好了,现在咱们库“”起来了!...资产目录与 Lottie JSOn 被统一打包起来并静态链接至各个目标。对于资产密集型模块来说,这已经抵消了使用框架带来大部分好处。...但我强烈建议大家分析自己应用程序,在明确性能影响之后再做权衡。 结 苹果就是不愿意让我们简简单单、舒舒服服地搞开发。...但在一切尘埃落定之后,我们最终获得了令人惊叹结果,比如应用程序二进制文件大小缩减了 58%。欢迎大家亲自上手示例项目,体验这些秘密技术,并以类似的方式对自己应用程序进行瘦身!

    20310

    2021 | 腾讯ISUX 推文归档

    热门前十二推文 Lottie表情 | Q弹超清,萌趣翻倍 Lottie动画秘籍--QQ超清表情大揭秘 2021-2022 设计趋势ISUX报告·社交APP篇 腾讯文档-构建科学有效色彩系统 玩转AE丨效设计必备指南...| 打造会员20周年超燃盛典 营造氛围感 | QQ游戏中心体验优化 QQ群社交体验魅力 3D AR特效如何在相机中无缝应用 好机会!...,我心葵~ 天狗鹅TENGUQ设计大揭秘 PUPU ╳ LAURA联名款潮玩:一起去寻找宇宙最美的风景 甜蜜来袭!...Lottie表情 | Q弹超清,萌趣翻倍 Lottie动画秘籍--QQ超清表情大揭秘 以最淳朴表情,圆山区孩子梦想! 拜年有新招 | “Q猛虎”拜年表情包震撼上线!...| 腾讯文档系列 腾讯文档 | 数据化设计 腾讯文档-构建科学有效色彩系统 腾讯文档 - 色彩系统应用篇 探索“流畅感”——谈手势效体验设计 | 设计工具指南 极速打工人|设计效率神器合辑 玩转AE

    1.6K30

    Lottie动画原理

    导语:Lottie动画是Airbnb开源一个支持 Android、iOS 以及 ReactNative。通过AE导出JSON文件+Lottie库可快速实现动画绘制。...上图为Lottie结构图 LOTAnimationView: 承接控制动画功能,播放暂停 LOTComposition: 主要解析JSON文件内容 LOTCompositionContainer:...,形状,大小等等,也包含位图;还可能是预合成层,即对已存在某些图层进行分组,把它们放置到新合成中,作为新一个资源对象,这里layers对象结构是跟上面一级属性中layers图层集合是一样图层结构...,这在lottie画中被大量使用。...每个RunLoop周期中会自动开始一次新事务,即使你不显式使用[CATranscation begin]开始一次事务,任何在一次RunLoop运行时循环中属性改变都会被集中起来,执行默认0.25秒动画

    5.6K71

    效设计原理:从卡通动画到UI效 - 腾讯ISUX

    尽管UI设计和卡通效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨互动式工具。但是我们还是可以借鉴卡通优点,从情感和认知层面上将两者优势相结合。...2.在UI界面中使用动画几个方法 多年来,动画师们已经研究出了很多动画设计方法。这里选择一些同时符合UI和动画设计原则,同时展示了如何在UI设计中应用。...(运动模糊全部帧效果,可以通过每帧展示多个竖线来达到提高帧数效果) 运动模糊效果表明:运动不仅是一系列静止图像集合。它会给用户一个模糊线索。这种感知来源于人视觉系统工作原理。...在现实世界中,当主物体发成运动时,与其关联物体会做出跟随运动。 动画师们将这种观察使用在动画中,当动画中主体物停止后,其他部分细节依然可以运动。...让用户不要觉得他们在操作一个界面,而让他们更直接触达任务。 4.使用UI注意点 在UI界面中使用效是有益。但是UI并不是卡通。

    1.7K20

    效设计原理:从卡通动画到UI

    尽管UI设计和卡通效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨互动式工具。但是我们还是可以借鉴卡通优点,从情感和认知层面上将两者优势相结合。...2在UI界面中使用动画几个方法 多年来,动画师们已经研究出了很多动画设计方法。这里选择一些同时符合UI和动画设计原则,同时展示了如何在UI设计中应用。...(运动模糊全部帧效果,可以通过每帧展示多个竖线来达到提高帧数效果) 运动模糊效果表明:运动不仅是一系列静止图像集合。它会给用户一个模糊线索。这种感知来源于人视觉系统工作原理。...在现实世界中,当主物体发成运动时,与其关联物体会做出跟随运动。 动画师们将这种观察使用在动画中,当动画中主体物停止后,其他部分细节依然可以运动。...让用户不要觉得他们在操作一个界面,而让他们更直接触达任务。 4使用UI注意点 在UI界面中使用效是有益。但是UI并不是卡通。

    2.7K80

    动态 | 谷歌 AI 最新博文:视频模型中模拟策略学习

    AI 科技评论按,深度强化学习(RL)技术可用于从视觉输入中学习复杂任务策略,并已成功应用于经典 Atari2600 游戏中。...最近在这一领域研究表明,即使在像 Montezuma s Revenge 这样游戏所展示具有挑战性探索机制中,它也可能获得超人表现。...我们 world 模型是一个前馈卷积网络,它接受四帧数据,预测下一帧以及反馈(见上图)。然而,在 Atari 中,未来是不确定,因为只知道前面四帧数据。...在动画中,左边是模型输出,中间是事实,右边面板是两者之间像素差异。...幸运是,PPO 算法也可以从其内部数值函数中学习行动和反馈之间长期关系,因此有限长度数据对于反馈稀少游戏(高速公路)来说是足够

    47120

    不编程,拖拖鼠标图表自己动起来!来自图形学大牛陈宝权弟子,已获ACM CHI最佳论文荣誉提名

    数据和动画始终保持一致,也无需你计算实现动画背后各种复杂机制,速度、形式、缓函数等参数都已帮你安排好: 而如此快捷地实现动态图表背后,更厉害是还有一门针对可视化动画声明式语言——Canis...而且除了可以导出mp4文件应用到日常场景,如果你是开发人员——那就太好了,量身定做: 它可以导出Lottie动画JSON格式,帮你轻松实现跨iOS、Android、Web等平台使用。...从而实现对可视化动画中数据、视觉编码、时序三者关系建立,保证动画与数据一致性。 我们最开始需要导入图表(一张多张都可),格式为SVG变体dSVG(可以通过Canis预处理器直接生成)。...之后根据编码感知有效性最高通道数据属性(相比使用颜色,用位置信息所编码数据属性更容易被人发现和观察),对未选图元进行分组和筛选并反馈给用户,如下所示。 二是动画序列推荐补全。...在用户完成少量关键帧构建后(完成第一帧后),CAST依旧是会依据视觉通道感知有效性原则,根据用户已经创建关键帧中图元,对全部图元进行分组以创建后序关键帧。

    98820
    领券