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 文件，或者使用浏览器的开发者工具查看是否有相关的错误信息。
相关·内容
3回答
我正在编写一个应用程序的过程中，并希望有一个lottie动画作为我的闪屏，因为我正在学习java，因为我编码这个应用程序，我做了一个测试应用程序，看看事情是如何工作的。我发现几乎所有的lottie动画都只显示为静止图像，并不播放/循环动画。我遵循了 lottiefiles网站指南 还有我在上面找到的信息 其他问题 但我还是没能让动画播放起来。下面就是我添加的内容:我的应用的Gradle依赖
浏览 314提问于2021-02-28得票数 0
回答已采纳
我在我的PWA应用上用lottie播放器做动画贴纸。现在，在运行时，当我更改lottie player的src属性时，它不会重新加载新的动画。<lottie-player src=${state.url} background="transparent" speed="1" style="width: 100%; height: 100%;" loop autoplay></lott
浏览 11提问于2021-08-12得票数 1
回答已采纳
我已经用新的意图在android上实现了Lottie动画飞溅屏幕，在iOS中有同样的方法吗？我知道LaunchScreen.storyboard无法做到这一点，但是有没有办法用Lottie动画在屏幕上生成一个新的UIViewController显示，在动画播放时，我将在后台任务中准备Xamarin应用程序，动画结束时调用LoadApplication( App )。或者，当你在iOS上启动你的应用程序时，有没有其他方法可以开始播放乐天
浏览 2提问于2021-12-11得票数 2
回答已采纳
我找到了这个Lottie Play/Pause button，但我不知道如何显示播放状态，当我的音频播放器暂停时，显示暂停状态，并在播放器播放时重复播放均衡器动画(参见lottie预览)。我也没有任何关于控制动画效果的知识。
浏览 20提问于2020-01-09得票数 2
回答已采纳
1回答
所以我有一个lottie动画，这正是我需要的动画，但是它只能自动播放或悬停播放，或者有视频控制。我希望发送按钮是一个按钮，因为现在它只是我在after effects中制作的lottie动画的一部分。我在Adobe after effects中制作了lottie<em
浏览 65提问于2021-02-27得票数 0
我想在我的Flutter应用程序中使用Lottie Animation作为微交互。我想这个动画播放时，用户点击它。在阅读了Lottie包的文档后，我知道了如何添加动画以及如何显示它。但我还不明白如何使用手势检测器onTap属性启动动画并只播放一次。我尝试过使用动画控制器的forward()方法，但似乎不起作用： GestureDetector( _controller.for
浏览 19提问于2021-01-06得票数 0
回答已采纳
我一直在搜索多个论坛，寻找这个问题的解决方案-我正在尝试编码多个lottie动画，当每个动画进入HTML网页上的浏览器窗口时播放。有没有人有可行的解决方案？我已经尝试了使用Waypoint.js的解决方案，但不幸的是，我无法使用该方法播放超过一个动画。如果有人知道如何让Lottie和Waypoint很好地合作，我将不胜感激。此外，我应该注意到，我是一个全新的Lottie，我是一个动画师，所以请留下详细的解释，因为我是
浏览 125提问于2019-03-13得票数 0
我有这个Lottie动画： https://lottiefiles.com/share/hmpf0dsc#_=_ 但是在它开始之前有一个延迟。延迟感觉在800 -1秒左右。如何在JSON中删除它？
浏览 19提问于2021-04-14得票数 0
if (BtnRecord.BackgroundColor == Color.Coral) blue_record_lottie.Loop= true; blue_record_lottie.Play((blue_record_lottie.ToString());
blue_record_
浏览 36提问于2020-01-29得票数 1
回答已采纳
2回答
我想通过点击按钮来控制gif动画，也就是说，如果我按下了'click me‘按钮，动画就会开始，再按一次动画就会停止。
浏览 26提问于2018-09-11得票数 5
我有一个带有WebView的应用程序，当用户接近可滚动区域的底部时，通过Ajax发布的帖子列表很长，所以我会显示单词“long .”它旁边的一个动画GIF通过Ajax站点创建。问题是，这个Gif有时在Androind 2.3.5/2.3.6的设备中显示为静止图像，而在其他设备中，它的动画速度非常快，而在其他设备中，它的速度非常慢。例如Galaxy和OS: 2.3.6 (它显示为静止图像)。
Galaxy I9003操作系统:
浏览 1提问于2012-12-28得票数 0
回答已采纳
我在Xamarin.Forms，中创建了一个控件，允许我显示带有ContentView和Lottie动画的可重用错误视图。我的视图包含：Lottie动画，2 Labels (标题和描述)和“重试”Button。Lotie动画设置如下，因为我希望动画只显示一次： x:Name="networkErrorAnimationView"
Animation=
浏览 6提问于2020-11-09得票数 1
我正在使用在pub.dev上显示Lottie文件。动画只播放一次，即使在“重复”设置为真后也不会重复。请告诉我我错过了什么。谢谢 'assets/lottiefiles/40912-new-year-loop-background.json',
浏览 3提问于2022-01-14得票数 0
我只是想了解如何从组件访问lottie响应返回参数。在他们已经设置的示例组件中，有一个返回的列表。 import groovyWalkAnimation from ".
浏览 8提问于2022-01-06得票数 1
3回答
我使用包装在屏幕上显示动画。下面是我代码的一部分： <Button title="Play LottiePlay video"
浏览 2提问于2018-04-04得票数 6
回答已采纳
在正常情况下，我会使用UIView动画，但不幸的是，随着时间的推移，试图插值的对象值im并不适用于普通动画。在我的特殊情况下，im使用了Lottie动画，并试图通过UIView动画改变动画的进度，但是动画没有随着时间的推移改变进度的值，而是跳到了最后的值。lottieAnim.animationProgress = 0
lottieAnim.animationProgress
浏览 3提问于2020-05-04得票数 1
回答已采纳
2回答
中间的杯子是一个乐天动画，可以找到。我正在使用下面的软件包来显示lottie动画(它似乎是标准的) height: 120, repeat: false),
我想要实现的是当点击加号按钮时，lottie文件将播放一次迭代。当单击减号按钮
浏览 6提问于2021-05-11得票数 0
回答已采纳
我有一个Lottie动画，它使用react-lottie ()呈现。import animationData from '.options={myOptions} width={1000} height={500} /> )动画显示和播放都很好。问题是，当调整浏览器的大小时
浏览 37提问于2021-03-15得票数 1
回答已采纳
我想将这三种状态的WiFi图像序列(连接、连接、连接)替换为包含以下三个状态的Lottie动画：
当它是空闲的时，它应该显示来自WiFi Lottie 的静止帧--按下按钮:它播放从框架x到框架y的WiFiLottie动画。当它连接<code>E 211</code>时:它显示了WiFi Lottie动画中的静止帧。
浏览 2提问于2020-08-06得票数 1
回答已采纳
例如，我创建了一个React组件，其功能相当于媒体播放器上的播放按钮。我使用LottieJS和bodymovin来制作SVG按钮的动画。如果歌曲正在播放，按钮会显示暂停符号。如果歌曲停止播放，则会显示播放符号。这是我的PlayButton组件...import Lottie from 'react-lottie';
imp
浏览 3提问于2018-03-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
