开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Lottie动画显示为静止图像，但不播放

Lottie 是一个开源库，它允许设计师在 Adobe After Effects (AE) 中创建动画，并通过插件 Bodymovin 导出为 JSON 格式，然后在 Web、iOS 和 Android 应用中以轻量级的方式呈现这些动画。

基础概念

Lottie 动画是基于 SVG、Canvas 或 WebGL 渲染的，它将 AE 动画导出为 JSON 文件，包含动画的所有必要信息，客户端库会解析这些信息并渲染出动画效果。

可能的原因及解决方法

文件损坏或不完整：
- 确保导出的 JSON 文件没有损坏，并且包含所有必要的动画帧和数据。
- 重新导出动画文件，确保使用最新版本的 Bodymovin 插件。

不支持的动画特性：
- 某些 AE 动画特性可能不被 Lottie 支持。检查动画中是否使用了 Lottie 不支持的效果或插件。
- 简化动画，移除不支持的特性，或者寻找替代方案。
性能问题：
- 如果动画非常复杂，可能会导致性能问题，尤其是在移动设备上。确保设备的性能足够渲染动画。
- 优化动画，减少复杂度，或者分段加载动画。
初始化问题：
- 确保在页面加载完成后正确初始化 Lottie 动画。
- 检查是否有 JavaScript 错误阻止了动画的初始化。
版本兼容性问题：
- 确保使用的 Lottie 库版本与导出的 JSON 文件兼容。
- 更新 Lottie 库到最新版本。

示例代码

以下是一个简单的 HTML 和 JavaScript 示例，展示如何使用 Lottie 加载和播放动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lottie Animation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.13/lottie.min.js"></script>
</head>
<body>
    <div id="lottie"></div>
    <script>
        var animation = lottie.loadAnimation({
            container: document.getElementById('lottie'), // the dom element that will contain the animation
            renderer: 'svg', // the renderer to use for the animation
            loop: true, // whether or not to loop the animation
            autoplay: true, // whether or not to automatically start playing the animation
            path: 'path/to/your/animation.json' // the path to the animation json
        });
    </script>
</body>
</html>

参考链接

如果以上方法都不能解决问题，可能需要进一步检查网络请求是否成功加载了 JSON 文件，或者使用浏览器的开发者工具查看是否有相关的错误信息。

相关搜索:Lottie动画未显示为iOS 原因:尝试播放lottie动画时 android:播放Lottie动画片段 Lottie动画根本不显示如何在React Native中重新播放Lottie动画如何使用OnTapGesture事件播放我的lottie动画？点击不同容器时播放相同的lottie动画在HTML网页上滚动播放Lottie / Bodymovin动画如何在Lottie动画开始播放前消除延迟如何在react native中使用uri播放Lottie动画？Lottie本地动画不在网页上显示 Swift lottie动画不能播放一些在android上播放的json文件如何在React Native中播放Lottie动画(.json文件)的片段如何在所有设备上全屏显示lottie动画？如何使用Lottie和Javascript在动画后显示页面在lottie动画中显示初始加载的特定帧如何在颤动中播放特定持续时间的lottie动画在颤动中显示动画gif，但不动画为什么我的lottie动画不能以Xamarin格式显示？某些帧未在React-Native ios Lottie动画中显示如何在颤动中显示完成Lottie动画后的按钮

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

深度剖析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。

5.8K3 1

说lottie谁是lottie?

设计师可以通过 AE 的 Bodymovin 插件将动画导出为 json 文件，然后通过 Lottie 实现动画效果，确保动画的还原度。...lottie实现的动画效果： jcode lottie-web lottie-web 支持多种特性，提供复杂的动画控制和监听功能。...animation.play 播放该动画，从目前停止的帧开始播放 stop 停止播放该动画，回到第 0 帧 pause 暂停该动画，在当前帧停止并保持 goToAndStop animation.goToAndStop...);直接播放 0-5 帧和 10-18 帧 setSpeed animation.setSpeed(speed);设置播放速度，speed 为 1 表示正常速度 setDirection animation.setDirection...方法也会触发 DOMLoaded 动画相关的 dom 已经被添加到 html 后触发 destroy 将在动画删除时触发 Lottie 动画性能对比 Lottie 和 Gif 动画，数据显示

4032 0

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 进行监听和处理，比如在动画更新时，显示当前进度，或更新播放进度条的进度值。

1.5K7 0

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

3.4K2 0

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

5.5K3 1

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

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

1.8K4 1

HTML多行代码搞定微信8.0的炸裂特效！CC++怎么能输「建议收藏」

设计师在 After Effects 中，利用 Bodymovin 插件把动画导出为 JSON 格式之后，开发者就能够通过相应平台的 SDK 进行播放。...创建一个 lottie 的容器，使用 span 元素，因为 lottie 动画的播放器需要挂载到一个具体的 html 元素中。...设置表情动画的宽高为 40px。使用 lottie 加载动画，并设置循环播放为 false，自动播放为 true，来让表情发送时自动播放动画，且只播放一次。...加载 lottie 动画，不循环、自动播放。由于原动画速度过快，这里调用 lottie 实例的 setSpeed() 方法，把速度设置为 0.3 倍速。...，执行时间为 0.8s，动画执行函数为 ease-in-out。

2.1K2 0

EasyDSS使用OBS推流成功，但不显示播放按钮是什么原因？

EasyDSS支持一站式的上传、转码、直播、回放、嵌入、分享功能，具有多屏播放、自由组合、接口丰富等特点。...平台可以为用户提供专业、稳定的直播推流、转码、分发和播放服务，全面满足超低延迟、超高画质、超大并发访问量的要求。...有用户反馈，使用OBS工具推流到EasyDSS直播间，在录像回看中可以看到OBS推过来的视频，但是在直播间却没有显示播放的按钮，于是请求我们协助排查。...4）更改流媒体内核8083端口为28083，然后重启EasyDSS平台，再次查看发现OBS推流已经在直播间出现播放按钮了;5）如图所示，观看正常，接口返回也正常了。

3140 0

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

4.6K3 2

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。

7.1K3 0

Lottie-页面动画100%硬核还原

导出为json格式），并且能让原生 App 像使用静态素材一样使用这些动画，完美实现动画效果。...下面是Lottie提供的官方效果图。类似下面这种一段动画的播放，非常适合使用Lottie来做。 Lottie流程我们先来看下整个流程简图。...path：动画对象的相对路径。（animationData 和 path 是互斥的） loop：默认值为true。...) data_ready（所有动画数据加载完成） DOMLoaded（元素已添加到DOM节点） destroy 可使用addEventListener监听事件 // 动画播放完成触发 anm.addEventListener...('complete', anmLoaded); // 当前循环播放完成触发 anm.addEventListener('loopComplete', anmComplete); // 播放一帧动画的时候触发

1.1K4 0

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

1.2K1 0

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

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

1.1K4 0

复杂帧动画之移动端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

2.3K1 0

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

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

3.6K2 0

使用强大的 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(如果你想只在动画可见时播放动画)。

2K2 0

从设计师和开发的角度使用 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

3.3K2 1

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

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

3K5 0

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）声明：本文为

2K2 0

【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

1.4K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭