如何在 Lottie 动画开始播放之前消除延迟 用更简单的方法更新：

编程问答 2022-05-13

问题描述

我有这个 Lottie 动画：

https://lottiefiles.com/share/hmpf0dsc#_=_

但是在它开始之前有一个延迟。延迟感觉大约 800 - 1 秒。如何在 JSON 中删除它？

这是 JSON 的开始（不完整，因为对于 SO 来说太大了）：

{"v":"4.11.1","fr":60,"ip":0,"op":116,"w":36,"h":46,"nm":"TwitterHeart","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Dot14","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-320,"ix":10},"p":{"a":0,"k":[25,25,0],"ix":2},"a":{"a":0,"k":[0,"ix":1},"s":{"a":0,"k":[40,40,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,[0,0]],"o":[[0,"v":[[-37.5,-40.5],[-1,0.5]],"c":false},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":44,"s":[47],"e":[29]},{"i":{"x":[0.833],"t":56,"s":[29],"e":[9]},{"t":78}],"e":{"a":1,"s":[48],"e":[30]},"s":[30],"e":[10]},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim",{"ty":"st","c":{"a":1,"s":[0.631372570992,0.811764717102,0.937254905701,1],"e":[0.819607853889,0.647058844566,0.909803926945,1]},{"t":56}],"ix":4},"w":{"a":1,"s":[5],"e":[2]},"s":[2],"e":[0]},{"t":70}],"ix":5},"lc":2,"lj":1,"ml":4,"nm":"stroke 1","mn":"ADBE Vector Graphic - stroke",{"ty":"tr","k":[100,"ix":6},"ix":7},"sk":{"a":0,"sa":{"a":0,"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"mn":"ADBE Vector Group","hd":false}],"ip":44,"op":90,"st":-44,"bm":0},{"ddd":0,"ind":2,"nm":"Dot13","k":-306.6,"s":[44],"e":[19]},"s":[19],{"t":89}],"s":[45],"e":[20]},"s":[20],"e":[1]},"s":[0.658823549747,0.800000011921,0.96862745285,"e":[0.815686285496,0.654901981354,0.905882358551,"ind":3,"nm":"Dot12","k":-271.7,"s":[0.784313738346,0.588235318661,0.901960790157,"e":[0.890196084976,0.819607853889,0.580392181873,"ind":4,"nm":"Dot11","k":-258.3,0.61960786581,0.89411765337,"e":[0.921568632126,0.749019622803,0.32549020648,"s":[0.921568632126,"e":[0.549019634724,0.274509817362,0.709803938866,{"t":66}],"ind":5,"nm":"Dot10","k":-220.3,"s":[0.607843160629,0.886274516582,0.78823530674,"e":[0.792156875134,0.737254917622,0.600000023842,"ind":6,"nm":"Dot9","k":-206.9,"s":[0.61960786581,0.882352948189,0.780392169952,"s":[0.792156875134,"k":44,"e":{"a":0,"k":45,"ix":4,"nm":"Trim Paths 2","np":4,"ind":7,"nm":"Dot8","k":-168.2,"s":[0.858823537827,0.623529434204,0.68235296011,"e":[0.329411774874,0.596078455448,"ind":8,"nm":"Dot7","k":-154.8,"s":[0.890196084976,0.694117665291,"s":[0.329411774874,"ind":9,"nm":"Dot6","k":-117.1,0.815686285496,0.956862747669,"e":[0.701960802078,0.843137264252,0.658823549747,"k":29,"k":30,"ind":10,"nm":"Dot5","k":-103.7,"s":[0.721568644047,0.847058832645,0.949019610882,0.670588254929,"s":[0.701960802078,"ind":11,"nm":"Dot4","k":-69.3,"s":[0.800000011921,0.929411768913,"ind":12,"nm":"Dot3","k":-55.9,"s":[0.643137276173,0.972549021244,"ind":13,"nm":"Dot2","k":-13.4,"e":[0.631372570992,0.509803950787,"ind":14,"nm":"Dot1","e":[0.800000011921,0.521568655968,0.760784327984,

解决方法

我按照上面的链接尝试了这个。动画立即开始播放。

刷新页面时，也会直接播放。

当我说直接时，我的意思是在下载资源之后。即使在页面刷新时，也有 540kb 的数据再次下载，大约 4Mb 已被缓存。

不过，我的 Internet 连接速度非常快。如果我通过手机连接尝试此操作，则需要 6 或 7 秒才能下载并开始播放。

您遇到的延迟是否可能是在较慢的连接上下载 4Mb 所需的时间？

在这 540kb 中，416kb 是 vendor.????.js。也许允许缓存它可能会有所帮助？

,

动画的开头是一颗白色的心，它不会出现在背景上。从第 25 帧开始，您会看到动画的主要部分。

white heart on transparent background

我不确定您是否可以轻松地从 JSON 中删除它，但作为一种解决方法，您可以按如下方式播放一段动画：

window.onload = function() {
  const player = document.querySelector("lottie-player");
  player.load("https://assets5.lottiefiles.com/packages/lf20_hmpf0dsc.json");
  var lw = player.getLottie();
  lw.loop = true;
  lw.playSegments([30,116],false);
}
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js" type="module"></script>
<lottie-player loop controls mode="normal" style="width: 400px">
</lottie-player>

用更简单的方法更新：

在您的 lottie JSON 中，将 IP 设置为 30，这应该会在第 30 帧处开始动画。

lottielottie