问题标签 [bodymovin]

我正在通过 Lottie for React Native 在我的页面中使用用于 bodymovin 动画的 sample.json 图像文件。

我正在获取图像，但图像未完全检索，图像的某些部分丢失，并且在图像的某些侧面，图像上粘贴了绿色。

但我通过在线 json 图像查看器检查了 sample.json。但是来自源的图像没有问题

这是问题https://i.stack.imgur.com/yFZfg.jpg

这是原始图片https://i.stack.imgur.com/4sBzg.jpg

所以这是我的代码

我也安装了lottie npm。

所以这是我的问题请帮助我克服这个提前谢谢

我有一个关于 bodymovin & react 的问题（或者实际上也是普通/香草 html&js）。假设图形/动作设计师给了我一个搜索域打开的动画。喜欢这个。然后我想将这个动画集成到我的网站中，这样当用户点击搜索栏时，就会播放这个动画。

我该怎么做？我只有一个 bodymovin JSON 或 svg 文件，可能是 gif。我确实知道如何在我的网站上简单明了地显示此动画。但我真的不明白底层功能（实际的 HTML/JS/CSS 搜索栏组件）如何与动画联系在一起？

我将非常感谢这里的一些总体方向。

我正在尝试使用 lottie 为 After Effects 中创建的 SVG 动画制作动画。我使用 bodymovin 扩展来导出 JSON 数据文件。但是，我也注意到导出包含一些 PNG 图像。我也收到控制台错误，提示无法找到 PNG。

为什么我在 AE 中使用 SVG（AI 文件）时会导出 PNG。下面是我的代码和错误。

索引.ts

但我收到以下错误，无法找到图像。为什么 bodymovin 导出/寻找 pngs？我需要SVG。

Chrome 控制台错误（抱歉不能嵌入，直到 10 代表）

我有一堆动画矢量图形文件，我想将它们转换为 bodymovin（我假设我需要先将它们转换为后效并使用 bodymovin 扩展名）。

我为 swf、fla、svg（使用 svg 中的 animate 元素）、snap 和 sprite.js html5 格式的文件制作动画。我需要保留动画（重新创建它们不是一种选择）

这可能吗？有任何想法吗？

我已经将我的一个动画 swf 直接导入到 after effects 并导出到 mp4 但它不会导出到 bodymovin（我认为 swf 和矢量图形非常不同）

我在将动画从 Adob​​e After Effects 导入 Xcode 和 Web 时遇到了一些问题。

我已经制作了一个角色并使用 Duik 插件对其进行了操纵。我制作了我想进入 xcode 的动画，并使用 bodymovin 将其渲染为 JSON。我在这里有动画的图像：

然后我将渲染的 JSON 文件导入到我的项目中。我使用 Lottie-ios 框架（https://github.com/airbnb/lottie-ios）。在我的 viewDidLoad() 中，我使用此代码来显示动画：

但正如你在下面看到的，结果很漂亮......奇怪......

当我渲染后效动画时，我还创建了一个演示文件。在演示网站上，它更接近动画。但仍然不存在。

谁能告诉我我做错了什么？因为我想不通:-(

我使用 AfterEffects 的 bodymovin 扩展来创建动画并将其导出为与 Web 兼容的 JSON。我试着按照这个演练来弄清楚如何将它包含在一个组件中：https ://gist.github.com/prettyhandsome/caa7386dcda76fde28cf5d2a07a12082#file-devmyndshapes-jsx

但是，我没有运气。是否有一个很好的、逐步的在线资源来说明如何将 JSON 作为图像包含在 React 组件中？这是我失败的尝试：

我想知道如何只运行一次 Lottie 动画，因为它默认循环。这是我要修改的代码的链接：https ://docs.expo.io/versions/latest/sdk/lottie.html

我目前正在使用整页 js 和 lottie 动画构建一个网站。现在我试图在用户滚动到带有动画的部分时触发动画。这是我尝试过的：（请注意，我对 js 很陌生）

（在正文部分的末尾->）

我分别使用两个简单的 addEventListener mouseenter 和 mouseleave 函数来播放和停止动画（Bodymovin/SVG 动画，尽管我怀疑这无关紧要）。

因此，以下工作正常：

（HTML 再简单不过了：相关部分只是一个由脚本填充的空 div 占位符 - 即<div id="animationDiv"></div>.

我可以将它放在与运行动画代码的文件相同的文件中，或者我可以将它放在单独的“触发器”文件中，并将两个文件（以及处理所需的其他其他文件）都加载到站点页脚中。

当我需要能够为给定页面上可能出现或不出现的多个类似动画中的任何一个设置触发器时，就会出现问题。

如果页面上只有两个可动画元素之一，则两组触发器中的一个将引发错误。如果两个此类触发器中的第一个不存在，则不会处理第二个，这意味着动画将失败。或者至少在我看来这就是正在发生的事情。

因此，为了清楚起见，如果我为同一页面添加以下两个触发器，并且以下两个元素中的第一个存在，那么动画将在 mouseenter 上播放。如果只有第二个存在，它的动画将不会被触发，显然是因为第一个抛出的错误。

目前我可以通过创建多个触发器文件来解决这个问题，每个动画一个，并将它们设置为仅在我知道可动画元素将存在时才加载，但是当我使用多个动画时，这种方法会变得越来越低效页面，在其内容可能被更改的页面上。

我已经查看了 try/catch 方法以及事件委托方法，但到目前为止，如果适当的话，它们对于处理这个简单的问题似乎有点复杂。

是否有一种有效且灵活的标准方法来防止或正确处理未找到元素的错误，从而仍然可以处理后续功能？还是我错过了其他东西或以某种方式误读了我遇到的错误和功能失败？

为什么我选择了我所做的答案（加上工作代码）

我很容易就可以通过 Baoo 做出简单、直接响应的答案。

我无法通过 Patrick Roberts 和 Crazy Train 给出以下答案，尽管毫无疑问，我未开发的 js 技能完全是错误的。当我有时间，或者当我在更复杂的实现中遇到下一个问题时（可能很快！），我会再看看他们的解决方案，看看我是否可以让它们工作或者我是否可以制定一个更好的问题，需要解决完全成熟的编码示例。

最后，为了让那些可能正在寻找有关 Bodymovin 动画的答案并且其 js 甚至比我的更弱的人清楚，以下是工作代码，所有代码都添加到同一个文件中，其中包含更大的 Bodymovin 动画集构造，让我无需创建单独的触发器文件，并防止 TypeErrors 和功能受损。

在典型的底层 HTML 中（它是由考虑其他条件的 PHP 函数生成的，因此每个按钮都不相同），目前看起来像这样 - 尽管我将削减数据属性和类，因为我'我目前也没有使用。如果有人在那里看到重要或有用的东西，我会提供它。

显然，可以——而且可能应该——写出更简洁和灵活的答案。关于这一点，在单个条件中正确组合播放和停止侦听器显然是第一步，但我太喜欢 js 了，甚至在第一次或第二次尝试时都无法做到这一点。也许以后/下一次！

再次感谢所有提供答案的人。我不会要求您尝试将工作解决方案压缩到您建议的框架中 - 但我也不会要求您不要...

我是一名动画师，不是一个编码员，但学习速度很快......我一直在尝试使用位图图像制作我想在网络和移动设备上部署的角色动画的 After Effects Bodymovin 扩展。

结果非常惊人，你可以在这里查看我正在进行的工作：https ://codepen.io/Hamsta/project/editor/XMKQzr

动画截图

我想添加一些简单的交互性——现在，只是为了能够添加一个按钮，将角色的面部和球衣与存储在服务器上的其他角色交换。

在 JSON 文件 (data.json) 的开头，位图似乎都被赋予了从“image_0”到“image_24”的 id，例如：

我的问题是 - 我可以使用 Javascript 和 CSS 在 JSON 文件中定位这些 id 来交换图像吗？或者我可以提取这些 id 并将它们放在一个单独的 CSS 文件中，然后我可以定位它？有没有办法给动画添加更多的交互性，比如控制角色的方向？非常感谢任何帮助！

HG