问题标签 [bodymovin]

我们已将使用 Adob​​e After Effects Bodymovin 插件创建的 SVG/JS 动画从一个 Wordpress 站点移动到另一个站点。在旧网站（很遗憾，我无法向您展示）上，动画完美无缺。在新站点上，根据浏览器窗口的大小，动画包含似乎是由动画掩码中的某种舍入错误引起的故障。

在地球的一个或多个边缘，您偶尔会（取决于视口宽度）看到滚动背景图形的一个像素宽位出现。见图片。

我已经在 CodePen 中隔离了动画。无论视口设置为什么大小，它在这里都可以正常工作。

然而，当我介绍这样一点点 CSS 时......

...进入父 DIV 的样式，故障开始发生。见这里。

在原始动画中，面具比地球的边缘延伸得更远，所以我怀疑面具现在刚刚到达地球边缘的事实是某种 Bodymovin 优化。

鉴于这不会在旧网站上发生，我怀疑有某种 CSS 或 Bodymovin 中的设置可以阻止这种情况发生。

Wordpress 网站是用 Divi 构建的，动画位于嵌套在许多其他 DIV 中的 DIV 中（即，一个模块位于一列中，位于一个部分中的一行中），并且这些 DIV 中的大多数都将宽度设置为各种百分比. 所以我认为解决方案不在于简化 CSS。

有没有人遇到过这样的问题？或者有可能有助于消除它的建议？

我还在 Bodymovin GitHub 页面中创建了一个问题，但那里的响应时间似乎差别很大。

react-bodymovin 非常适合我的 reactjs 应用程序，但是当迁移到 nextjs 时，它不起作用。我收到以下错误：

Justa导入库bodymovin，会导致以上所有

如果我按以下方式禁用，它可以工作

我是 After Effect CC 2018 的新手，我的作品由 3 个动画视频和 1 个纹理组成。然后，我使用 bodymovin 扩展将其导出为 JSON。然后，我将json上传到lottiefiles.com进行预览，但只有纹理显示，视频动画没有。谁能给我建议？

我是 Lottie 的新手，已经完成了一些教程和测试，并且对将 After Effects 动画与 HTML5 动画混合在一起的想法着迷。谢谢 AB&B 精灵！

我们即将开发一个在线互动项目，我们将在其中介绍客户的时装系列。

问题是，我们将不得不使用光栅 PNG 图像，而不是 AE 矢量，因为客户有专门的图像水绘指南。

请看一下这个（最接近的）图像示例 ->时尚女性水彩画

我们将有不同的模型（男性和女性）站在空闲位置。就像，呼吸，移动一点，就像他们还活着一样。我们计划将他们的身体部位和衣服放在光栅 PNG 图像中，使用 AE 进行动画处理，并使用 Lottie Bodymovin 导出。

然后，我们希望有 [BUTTONS] 可以帮助用户更换这些模特的衣服，比如尝试新的时尚风格、颜色、印章等。将使用有限的预设范围的 PNG 衣服，以掩盖新的收藏。

在运行时单击按钮时，Lottie 如何更改此类预设图像？可能吗？该应用程序将托管在在线服务器上，并在特定事件的浏览器上播放，因此这次无需考虑 android 或 ios。

我想要一些参考资料，我对 LottieAnimationView 和 setImageAssetDelegate 有点迷茫，我不知道如何实现 - 如果这些都是正确的解决方案。

感谢你们！

我一直在搜索多个论坛以寻找解决此问题的方法-我正在尝试编写多个乐天动画以在每个动画进入 HTML 网页上的浏览器窗口时播放。有没有人有一个可行的解决方案？

我已经尝试过使用 Waypoint.js 的解决方案，但不幸的是，我无法使用这种方法播放多个动画。如果有人知道让 Lottie 和 Waypoint 一起玩得很好的方法，我将不胜感激任何建议。

我对任何脚本建议持开放态度，即使它们要求我加载依赖项以使其工作。任何帮助将不胜感激。另外，我应该注意，我是 Lottie 的新手，我是一名动画师，所以请留下详细的解释，因为我是 javascript 的初学者。

该文档同时具有事件和事件监听器。我可以让 EventListeners 触发，但事件没有足够的文档让我开始。有什么区别以及如何使用？谢谢你。

https://github.com/airbnb/lottie-web#events

事件（不工作，如何使用？）

// 来自文档

• 完成
• onLoopComplete
• onEnterFrame
• onSegmentStart

您还可以将 addEventListener 与以下事件一起使用：

• 完全的
• 循环完成
• 进入帧
• 段开始
• config_ready（初始配置完成时）
• data_ready（当动画的所有部分都已加载时）
• data_failed（部分动画无法加载时）
• 加载图像（当所有图像加载成功或错误时）
• DOMLoaded（当元素被添加到 DOM 时）
• 破坏

// 结束文档

从标准的 addEventListener 用法来看，这有效......

尽管“完整”不会触发。

但是要尝试 onEnterFrame 之类的事件中的内容？

我对使用 Lottie 真的很陌生，所以可以使用一些帮助。

只是想要一种方法来看看如何使用事件

在 Android 中，我想将 bodymovin 动画导出为 mp4。

我有这样的动画文件Lottie Files。现在我正在寻找可以将此动画导出为 mp4 的代码

我试过的代码：

我正在更新使用 Ionic v1 制作的现有项目，我必须在其中添加 Lottie 动画。

我在 Github 上找到了一个类似的线程 - https://github.com/yannbf/ionic-lottie/issues/1

我试图在我的 index.html 中添加 bodymovin 脚本，并从控制器调用该函数，但没有任何反应。我没有收到任何错误，所以我不确定这里有什么问题。

这是我正在使用的脚本 - https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.2/lottie.js

这是我用来调用 lottie 函数的代码

有没有人有一个可行的解决方案或知道我可能错在哪里。

我感谢所有的帮助！

我有一个动画我想用于具有以下基本状态的翻转效果：

1. resting：在第 0 帧和第 55 帧之间连续循环
2. 鼠标输入：播放第 56 到 78 帧，然后在第 78 帧暂停
3. 鼠标移出：播放第 79-95 帧，然后返回休息

除了静止状态下的连续循环外，我几乎让它工作。循环只播放一次，然后静止不动。我的代码如下：

代码笔： https ://codepen.io/anon/pen/pBXKeN

我尝试将循环设置为 true，但这会导致所有 3 个状态都循环，这不是 mouseenter 和 mouseleave 效果的预期效果。有没有办法让一个部分循环？

如果它使事情变得更简单，我也很高兴切换到 jQuery。

刚接触编码，试图看看标签是什么/如果标签可以使这个代码工作

所以我是一个有基本理解的初学者，更多的是图形/设计师而不是基于代码的。我找到了WEDOO的一个 codepen，它正是我需要的，我想尝试交换我的“animationData”，看看我是否可以让它工作，然后根据我的测试需要对其进行修改（将按钮代码分配给各种SVG 的对象）。我似乎找不到正确的“标签”或确定它是否引用外部脚本......我想它只需要正确的信息才能运行......对吗？

提前致谢！

我在 JSON 文件中的 BodyMovin 输出：

认为我需要用JSON 文件中的代码替换var animation应该是的信息是否有意义？targetAnim到目前为止，把var animationData休息的事情和什么都不做（视觉上）。