时间戳

首页 > 解决方案 > 如何实时修改 Lottie 对象不会导致 Safari 上的图像弹出？

javascript - 如何实时修改 Lottie 对象不会导致 Safari 上的图像弹出？

问题描述

我们使用 Lottie 来显示我们的应用程序在用户手机上的外观预览，并且我们允许用户修改组成它的颜色以根据自己的喜好对其进行自定义。

为了实时修改这些颜色，我们使用正则表达式来挑选 JSON 文件中的颜色并将它们替换为新选择的颜色。这工作正常，在 Chrome 上非常流畅。然而，由于某种原因，这在 Safari 上并不好，并导致图像对象（JSON 中唯一的一个，我怀疑如果有更多它们的行为都会相似）弹出和弹出。

以下是 GIF 示例（代表不足以直接发布）：

铬（工作）

Safari（弹出式插件）

所以我们将 Lottie 与 React 一起使用，我想也许可以在更新 DOM 之前预渲染颜色的变化，但我没有发现太多改变执行顺序以获得这种效果的方法。我还发现曾经有一个参数字面上称为“prerender”，可以作为选项传递，但显然，自 2017 年以来已“弃用”。

我也尝试过不同的渲染方法（有 3 种：HTML、SVG、Canvas），但都没有奏效。下面是我们传递给 Lottie 对象的当前选项列表。

const option = {
    renderer: "svg",
    animationData: animationData,
    prerender: true,
    loop: true,
    autoplay: true,
    rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
    }
};

我还发现，更改任何可能导致 Lottie 对象关联的 DOM 的任何部分重新渲染的状态，也会导致图像弹出。我目前认为这可能只是 Lottie 和 Safari 的问题，没有修复，没有废弃 Lottie 并使用不同的方法在浏览器中预览应用程序。

有什么想法可能导致这种情况，或者有任何解决方案来解决它吗？

标签： javascriptjsonreactjssafarilottie

解决方案

推荐阅读