备案控制台
学习
实践
活动
专区
工具
TVP
文章/答案/技术大牛
写文章

深度剖析Lottie动画原理

动画原理 工作以来，处理过css、js、canvas、骨骼动画，这些背后的原理都是通过把每一帧（瞬间）的静止图像组合起来，以一定频率（速率）播放这些图像形成动画。 （图一） 上面的数据的翻译：0~30帧 scale属性值从20 -> 12，30~60帧 scale属性值从12 ->20，完成动画。上面动画之所以一直动，是lottie库可以设置loop循环播放。 其实lottie是用了requestAnimationFrame----在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（正常情况下能达到60fps）去渲染每一帧。 一开始我的思考，用60fps去渲染能保证动画更流畅，但是问题来了。假设动画只有30帧，制作的时候整个动画总时间1s。但是用60fps去渲染，用0.5s就完成整个动画播放。 所以下面说一下lottie的处理方式： 假设json数据如图一，整个动画就是一共60帧，播放速度是30fps/s。2个关键帧 0 ->30->60。

2.6K31

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

iOS高质量的动画实现解决方案——Lottie     真心的认为Lottie是一款十分优秀且实用的动画开发库，不只对于iOS和android原生开发者来说其让复杂动画的实现几乎没有成本，对于设计师来说 本篇博客主要以iOS平台为例，简单介绍和总结Lottie动画库的使用方式。 一、几个有用链接 Lottie官网：https://airbnb.design/lottie/。 LottieFiles是一个在线的测试Lottie动画的网站，并且其上面也提供了许多常用的Lottie动画组件。 三、对Lottie库的应用解析     首先LOTAnimationView类是显示Lottie动画的视图类，从源代码中看它是继承自LOTView，不要慌，这个LOTView并不是什么稀奇古怪的类，它其实就是为了代码统一 构造出LOTAnimationView实例后，需要调用方法进行动画的播放，下面列出了LOTAnimationView中的常用属性与方法： //获取动画是否正在播放 @property (nonatomic

1.7K20
  • 广告
    关闭

    1元体验视频云点播

    云点播为您提供媒资管理+短视频SDK+小程序插件+超级播放器等丰富的产品能力，1元起快速体验长短视频一体化方案，购买点播流量包即赠28天短视频 License 基础版 使用权+1年视频播放 License 使用权

    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    UWP 创建动画的极简方式 — LottieUWP

    一个椭圆，通过 StoryBoard 中 TranslateX 和 TranslateY 的设置，在 RepeatBehavior 为 Forever 的情况下，重复做位移动画。 LottieUWP 概述 Lottie 是 Airbnb 研发团队研发并开源的一套创建和播放动画的方案，可以非常方面的在全平台实现高质量的动画，支持 Android, iOS, Web, UWP。 设计师在 AE (After Effects) 中设计动画，通过 AE 中的 BodyMovin 插件导出为一个 JSON 文件，Lottie SDK 可以直接读取这个 JSON 文件，并通过简单代码控制播放动画 Lottie 官方地址：https://airbnb.design/lottie/，来看几个 Lottie 官方的动画示例： ? 除此之外，还可以针对 LottieAnimationView 的 AnimatorUpdate event 进行监听和处理，比如在动画更新时，显示当前进度，或更新播放进度条的进度值。

    59770

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

    初始的时候显示9位老师的小头像，当鼠标hover上去的时候，显示老师的大头像及老师的信息，可以看到老师的头像放大之后，会将周围的老师头像挤开，有一种弹性的效果。 AI教学动画 ? video 动画效果也可以通过视频来实现，采用视频的方式，甚至还能调节动画播放的进度，不像动图一样只能自动播放。 而且video元素默认是不显示控制条的，这对于播放动画来说简直是完美的。 一开始我让设计同学将路的动画和隧道的动画一起导出，后面发现lottie播放路动画的时候，路变成了黑色的，可能是lottie对于透明度的支持也不是很好。 右边的tab是跟着隧道一起运动的，lottie可以监听进入每一帧的事件，在每一帧里，可以根据隧道当前播放的位置，确定右边tab的位置。 教研团队代表动画 ? 确定每个大头像的位置： 如下图所示，两个方框分别表示第一个和最后一个老师的大头像，分别以这两个中心为起点和终点进行连线，中间再8等分得到另外7个大头像的中心点。这样便确定了每个大头像的位置了。

    50541

    lottie系列文章(二)：lottie最佳实践

    是否自动播放 path: animateJsonPath, // 动画json文件路径 }); lottie-web常用方法 lottie-web提供了很多的控制动画播放的方法，下面是一些常用的方法 animation.play(); // 播放该动画，从目前停止的帧开始播放 animation.stop(); // 停止播放该动画，回到第0帧 animation.pause(); // 暂停该动画 ); // 设置播放速度，speed为1表示正常速度 animation.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放 animation.destroy 在制作AE动画时，将图层命名为#svgId格式，前端加载该动画后，相应的图层的id会被设置为svgId，可以通过dom方法获取该元素并做相应的操作； 在制作AE动画时，将图层命名为.svgClass格式 ，前端加载该动画后，相应的图层的class会被设置为svgClass，可以通过dom方法获取这些元素并做相应的操作； 动画json文件制作及导出规范 使用该方案制作动画时，有些动画效果lottie-web

    2.3K31

    lottie系列文章(一)：lottie介绍

    lottie优点 Lottie方法方案是由设计师出动画，导出为json，给前端播放。 lottie不足 使用Lottie方案有以下不足之处： lottie-web文件本身仍然比较大，lottie.js大小为513k，轻量版压缩后也有144k，经过gzip后，大小为39k。 lottie动画其实可以理解为svg动画/canvas动画，不能给已存在的html添加动画效果； 动画json文件的导出，目前是将AE里面的参数一一导出成json内容，如果设计师建了很多的图层，可能仍然有 play: 播放动画 stop: 停止播放动画 pause: 暂停动画 goToAndStop: 跳到某一帧动画，并停止 setDirection: 设置播放方向 setSpeed: 设置播放速度 才外 ，lottie-web也提供了一系列的事件，例如： onComplete: 动画播放完成触发 onLoopComplete: 当前循环播放完成触发 onEnterFrame: 播放一帧动画的时候触发 onSegmentStart

    2.4K32

    Android Lottie 中秋月饼变明月动画特效

    和尚在 Android 端进行动画处理时主要用的是 Android 自带的三种动画形式，今天和尚简单尝试通过 Airbnb Lottie 展示一个中秋月饼变明月的小动画； Lottie Lottie 暂停 & 继续 & 取消 和尚通过 playAnimation() 使动画进行播放；而 Lottie 也提供了 pauseAnimation() 暂停动画；resumeAnimation() 暂停后继续播放以及 Lottie 的 json 文件是一个很神奇很复杂的天书，今天和尚简单介绍一下其中属性对应关系； 整体结构包括如下几个部分：v 为对应 bodymovin 动画版本；fr 为帧率；ip / op 分别对应起始/结束关键帧；w / h 为动画宽高；assets 为资源信息，包括 Drawable 等；layers 为图层信息； asstes 中 w / h 为资源宽高；u / p 分别对应资源路径和名称 ；其中的 layers 也为图层信息；layers 中的 ks 为动画的主要信息； 和尚理解 Lottie 整体是利用属性动画控制进度，通过进度变更更改 layers 中触发 LottieAnimationView

    46910

    Lottie在手，动画我有：iosAndroidWeb三端复杂帧动画解决方案

    本文编辑于OS X系统，之前出现过windows下看不到部分图片的情况，如有请大家告知 为什么需要Lottie 在相对复杂的移动端应用中，我们可能会需要使用到复杂的帧动画。 如果这样，设计师就能完全独立自主，而开发者只要像“引用一张图片”那样去用这个动画就好了呀。 对，Lottie这个工具做的就是这件事。 Lottie动画简介 Lottie是一个用于Web和iOS（Android）的移动库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备上呈现它们。 缺点（web端）如下所示： 自动播放问题:很多平台，如微信，许多安卓浏览器，是禁止自动播放的，那么这时，你的“动画”就变成了一张“静态图”了 许多手机浏览器，如oppo和华为，是有“播放置顶” 使用的坑点 就像我刚才说的,Lottie只支持AE的基本功能，不支持表达式，特效，mask蒙版等功能，这些功能要是用了，要么是你的JSON数据导出失败，要么你最后在Web端上显示不出来，或者显示和预期不一样

    2.1K20

    Lottie内存泄漏问题的定位与分析

    它可以解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画，允许应用程序像使用静态图像一样轻松使用动画。 使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。 (3). 简单的实现、控制动画的播放，开发效率大大提高。 (4). 可动态配置下发，实时替换动画效果。 LottieComposition(json->数据对象) Lottie使用LottieComposition来作为After Effects的数据对象，即把Json文件映射为到LottieComposition 加载动画是异步的，加载完成才会进入播放状态。如果compositionLayer == null 的时候，会加入到task里，没开始播放。 ? 播放开始了running= true; ? onDetachedFromWindow停止动画 detach 处理时，先判断是不是播放状态，如果是播放状态running == true，才会去 cancel。

    3K30

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

    原因在于表情动画多为APNG和GIF格式，其本质上是一连串的位图。那么其流畅度就取决于两方面，动画资源本身的流畅度和手机设备的播放流畅度。 这就导致了手机上显示的动画效果会比实际效果卡顿。 似乎动画资源的流畅度和手机播放的流畅度之间有着不可调和的矛盾。那么鱼和熊掌有办法兼得吗？ Part 2 他山之石：Lottie格式 x 表情动画 想要同时拥有流畅动画资源和手机播放性能，就必须颠覆基于位图的APNG和GIF的表情格式。此时我们发现Lottie动画十分符合我们的需求。 另外通过相同锚点的位移来生成的动画可以产生更流畅的过渡，不会像位图播放那样出现跳变。 | 夸张手法让表情更好玩：夸张即采用不符合现实的手法来为动画增加张力，带来诙谐的效果。 | 动画要首尾相连：QQ表情是不断循环播放，所以动画的首尾循环的动画会更加自然流畅。

    65040

    从设计师和开发的角度使用 lottie

    简单的说，lottie 动画制作的流程是，通过 Bodymovin 扩展将 AE 动画导出为 json 数据，然后再将这个 json 渲染在客户端或者 web 端。 Demo 设计师视角 准备 在 AE 中为 lottie 创作动画，你需要以下准备 Adobe After Effects Bodymovin AE 插件 Lottiefiles preview () 相关 api 名称 参数 描述 stop 无 停止动画 play 无 播放动画 pause 无 暂停 setSpeed Number 设置播放速度，1 表示1倍速度，0.5 表示 0.5倍速度 setDirection Number 正反向播放，1 表示 正向，-1 表示反向 goToAndStop Number, [Boolean] 跳到某一帧或某一秒停止，第二个参数 iFrame 为是否基于帧模式还是时间，默认为 , [Boolean] 播放片段，参数1为数组，两个元素为开始帧和结束帧；参数2为，是否立即播放片段，还是等之前的动画播放完成 destroy 无 销毁 事件 onComplete onLoopComplete

    73021

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

    在企鹅辅导品牌页中，我们需要实现一个动画如下： 页面滚动到动画区域，播放动画, 对应动画部分如下： 帧动画当前的实现有以下几种方式： GIF 动画 大家比较熟悉的图片格式 lottie(http: //airbnb.io/lottie/) Airbnb 开源项目，通过解析 AE 动画为 json 数据，支持跨平台的动画效果解决方案；lottie 在辅导中已经有实际应用，使用过的同学都表示对其实现效果和开发速度表示称赞和推荐 将动画导出 json 给到我们前端开发，在使用这段 json 数据中，我们引入了 lottie-web 脚本来解析这段 json 数据渲染成为SVG / canvas 动画，效果如下图， 左图为用 lottie 实现，右图为我我们的目标实现效果 可以看到实现还是存在着差异，颜色、数字倾斜度、虚线的透视都没有达到预期，于是放弃lottie 的使用，但这并不否定 lottie 在实现其它动画的优秀效果 APNG ，只要不加 controls 属性，一般是不会显示控制条的，这样就看不出来是一个视频了，当然有些安卓机器的浏览器的确处于一种失控状态，后面会提到 ○|￣|_ IOS 视频自动全屏播放 查阅资料，video

    32110

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

    Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。能够实时渲染 After Effects 动画特效。 Lottie for React Lottie提供了一种完全不同的方式来创建令人印象深刻的动画，它使用流行的Adobe After Effects程序生成的动画，这些动画以JSON文件的形式导入和导出。 动画的默认呈现方式是SVG，带有renderer属性。这有最多的特性，但HTML选项可以有更好的性能，并支持3D层。 默认情况下动画会无限循环或重复，因为loop被设置为true。 您可以通过将其设置为false来关闭此行为。 动画的自动播放设置默认为true，这意味着动画会在加载时自动播放。 如果你想有条件地运行动画，你可以通过使用一个状态变量将它设置为true或false(如果你想只在动画可见时播放动画)。

    39720

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

    在企鹅辅导品牌页中，我们需要实现一个动画如下： 页面滚动到动画区域，播放动画, 对应动画部分如下： 帧动画当前的实现有以下几种方式： GIF 动画 大家比较熟悉的图片格式 lottie Airbnb 开源项目，通过解析 AE 动画为 json 数据，支持跨平台的动画效果解决方案；lottie 在辅导中已经有实际应用，使用过的同学都表示对其实现效果和开发速度表示称赞和推荐。 给到我们前端开发，在使用这段 json 数据中，我们引入了 lottie-web 脚本来解析这段 json 数据渲染成为SVG / canvas 动画，效果如下图， 左图为用 lottie 实现，右图为我我们的目标实现效果 可以看到实现还是存在着差异，颜色、数字倾斜度、虚线的透视都没有达到预期，于是放弃lottie 的使用，但这并不否定 lottie 在实现其它动画的优秀效果 APNG 在对设计师给到的分段的动画帧图片压缩之后 在 video 标签中，只要不加 controls 属性，一般是不会显示控制条的，这样就看不出来是一个视频了，当然有些安卓机器的浏览器的确处于一种失控状态，后面会提到 ○|￣|_ IOS 视频自动全屏播放

    87510

    面向前端的 Lottie & AE 动画手把手入门教学

    其实对于普通的动效和简单动画, 使用原生代码实现已经足够, Lottie 是为了复杂动画而生的, 下面来看几个 Lottie 实现的几个动画例子: ? 要使用 Lottie, 需要在借助 Bodymovin 插件将动画工程文件从 AE 中导出成 JSON。Lottie 分别为每个平台实现了一套 Player, 只需载入JSON动画文件就可播放。 因此我们需要给我们的动画设置曲线, 让其符合真实世界的物理规律。 点击图层面板的右上角, 显示曲线面板, 如图: ? 曲线面板的X轴是时间, Y轴是属性值, 最低点为0, 最高点为设置的最大值, 曲线的便是属性的变化, 曲线的斜率便是加速度的值。 /index.html, 打开浏览器, 将会看到我们的动画, 是不是非常酷~ 除了能够播放和暂停, Lottie 还为我们提供了更加精细的动画控制方法和事件钩子, 有兴趣的小伙伴参考: GitHub

    95450

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

    Lottie 是一个用于 iOS 和 Android 的库，可以实时渲染 After Effects 动画。 在 Lottie 4.0 中，AirBnb 放弃了使用 CADisplayLink 在主 CPU 线程上制作图形动画的原始方法： 每帧一次，Lottie 将在主线程上执行代码，以推进动画的进度并重新渲染其内容 这意味着动画在播放时将消耗 5–20% 以上的 CPU，从而减少了用于应用程序其余部分的可用 CPU 周期。 例如，Airbnb 应用程序在首次启动时显示 Lottie 动画。我们在这里进行了一项实验，发现切换到新的渲染引擎可以缩短应用程序的总启动时间，同时还可以提高启动动画的帧速和用户体验。 c69eeb94f0023cde7bc0bf80a） 虚拟角色赛道的新“闯入者”：3D 引擎 Cocos 和它的新故事 （https://www.infoq.cn/article/jEs0tEhfmkjbQ1LGPkbI） 声明：本文为

    21720

    【Flutter 专题】134 图解动画小插曲之 SVGA 动画

    和尚之前尝试了 Flare 和 Lottie 动画，实现效果都很高效；今天和尚尝试另一种思路 SVGA 动画；SVGA 是一种同时兼容 iOS / Android / Flutter / Web 应用播放 SVGA 2.1 SVGASimpleImage 加载动画 svgaplayer_flutter 支持播放本地动画和网络线上动画，与 Image 加载本地和网络图片类似；SVGA 提供了封装好 ； reset 动画重置； forward 动画播放，和尚建议若动画从头开始播放先调用 reset 使动画重置，防止其他操作影响动画起始位置； stop 动画停止，与 Lottie 动画不同，SVGAAnimationController 没有提供对应的暂停方法，和尚将 stop 理解为暂停和停止，若继续播放则调用 forward 即可； reverse 动画反转，即反向播放动画； repeat 动画重复； fling 使用临界阻尼弹簧和初始速度驱动动画 ，这个思路跟 GIF 很像，但是通过配置使得动画过程中图片都可以得到复用； 而 Lottie 动画是逐层绘制，将所有的动画拆成多个层级,每个层级 layer 都有一个动画配置，播放时解析多 0

    62740

    大杀器Bodymovin和Lottie：把AE动画转换成HTML5AndroidiOS原生动画

    Airbnb出了移动端的动画库Lottie，可以和一个名叫Bodymovin的AE插件结合起来，把在AE上做好的动画导出为json文件，然后以Android/iOS原生动画的形式在移动设备上渲染播放。 这个AE插件可以把AE上做好的合成（Composition，类似于Pr里的剪辑序列）导出成带有矢量动画信息的json文件，并可以在以下平台播放： Web页面，以svg/canvas/html+js的形式 下面就分步骤总结下Bodymovin的安装和使用，以及导出的动画如何在Web页面上播放。 1. 如果电脑上没有AE的话，需要安装AE CC2014或更高版本。以AE CC2017为例： ? 接下来我们新建一个网页来播放这段动画。 确实如此，用过Bodymovin之后，不难看出它的灵活性的确很高，而且json形式的动画也远比js写出来的动画更适合跨平台。实在叹服，为Bodymovin点10086个赞。

    2.5K22
    点击加载更多

    关注

    腾讯云开发者公众号
    将获得
    10元无门槛代金券
    洞察腾讯核心技术
    剖析业界实践案例
    腾讯云开发者公众号二维码

    相关产品

    • 互动白板

      互动白板

      腾讯云互动白板（TIW）提供一整套完备的多人在线互动白板服务，打破线上教学师生信息传递障碍，具备比线下板书更丰富、直观、多样的功能，能够显著提升线上教学质量……

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2023 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 |京公网安备号11010802020287

      扫码关注腾讯云开发者

      领取腾讯云代金券