问题标签 [bodymovin]

我正在使用带有 vue 和 lottie 的 webpack 来播放一些 SVG 动画。

当直接在组件中使用“@/assets/animations/images/img_3.png”时，我可以看到图像作为编码的 img src 加载 - 这意味着 @ 解析为我的 'src' 目录。

但是，当导入 JSON 文件（bodymovin JSON 动画文件）并使用完全相同的“@/assets/animations/images/img_3.png”时，图像会在没有解析路径的情况下加载：

我的 webpack 配置如下：

我什至尝试过使用相对路径但没有运气，图像永远不会作为编码的 src 加载。

我的目录结构：

• 源代码
  • 资产
    • 动画
    • 图片
      • XXX.png
  • 成分
    • 动画SVG
      • test_animation.vue

我有一个 iOS 应用程序，可以显示和播放 Lottie 动画。我成功使用的动画来自 www.lottiefiles.com 那里的所有动画都有效。

我在 After Effects 中创建了自己的动画并使用 BodyMovin 导出，然后尝试显示它，但没有显示任何内容。

Xcode 抱怨图像丢失，但它从未要求（也没有）从 www.lottiefiles.com 下载的 JSON 动画的图像，并且应用程序仍在播放它们。

我添加了图像，但仍然没有显示任何内容，并且仍然抱怨图像丢失。

我尝试了 BodyMovin 的不同设置，例如：“原始资产名称 - 使用原始项目名称导出资产”和“包含在 JSON 中 - 包含以 json 编码的光栅化图像”。这些都没有解决问题。

我尝试了另一个由其他人创建的 AE 合成，但也没有用。

我使用 BodyMovin' 创建了一个 demo.html 以查看动画是否以 html 显示，它确实如此，所以我知道动画有效。

来自 www.lottiefiles.com 的 JSON 文件似乎可以在应用程序中使用，但我从 After Effects 渲染的 JSON 文件不会。

我正在尝试使用 Bodymovin 在浏览器上渲染后效动画。我已经尝试过文档中的示例，但它不起作用。它不显示动画。我正在尝试文档中的示例

所以我试图破坏我的反应应用程序中的动画但如果我使用任何事件监听器它不会破坏我得到错误我不知道为什么，这里是代码

我对 React 很陌生，但我想设置

BODYMOVIN_EXPRESSION_SUPPORT在 Webpack 的用 Gatsby v1 定义插件。我按照下面的链接，但我不明白我到底想做什么......

https://github.com/QubitProducts/react-bodymovin

https://www.gatsbyjs.org/docs/environment-variables/

我将文件命名.env.development为 src 文件夹。该文件中的内容如下。

文件夹结构是

我注意到有一行说

在 bodymovin 库中，我想我只需要改变它。我可以直接在库中进行修改，但我认为这不是解决这个问题的最佳方法。有人知道如何正确设置吗？

提前致谢！

What I'm looking for here is a method to refer to a bound method from within that method for the purpose of removing an eventlistener from within the event listener.

I'd like to create a single method to handle the same action over a few different events.

I've got a function that handles rotating the elements called rotateActiveItem. It looks at a list of list items and activates one at a time.

In my constructor I'd like to set up a few, potentially many, events that trigger rotateLoadingCopy.

Each of these are added to the animation's events:

And then the event checks for duration, executes the rotation, and then should remove itself from the eventListeners.

At first I thought maybe I could bind the bound method onto another method, but that's a rabbit hole of bound functions.

Then I thought arguments.callee would do this, but I'm in strict mode it its deprecated in strict mode.

我正在建立一个充满 SVG 插图的网站，其中包含使用Bodymovin动画的动画组件。

但是背景有时也会以动画形式显示运动（跑步者 SVG 的手臂和腿在移动，背景 SVG 从右到左移动显示进度）。

我是否试图将 Bodymovin 的使用限制在角色的复杂动画中，以便我可以将 CSS transform3d 动画用于简单的背景运动？

我正在努力使动画流畅，同时在每个人的浏览器上都很容易！

我通常会安装 GSAP 并用它制作动画，但这意味着为背景添加第二个 JS 动画库，因为客户端有一个生成 Bodymovin 动画的设计师。

任何的建议都受欢迎。谢谢

是否可以在fabricjs画布中加载Lottie动画

我尝试了以下示例

我无法在织物 js 画布中添加动画。如果有人克服了这个问题，请对此发表评论

好的，所以我刚开始使用 bodymovin 并想知道是否有办法让我延迟动画。

我的网页淡入，所以在动画淡入期间正在发生，这不是我想要的。因此，如果我可以将其延迟 2 秒，那就太好了。

这是我的代码：

我曾尝试使用 setTimeout，但我无法让它工作。

我使用后效创建了以下动画： https ://imgur.com/G7bPnNc

有一个用于设置沿 z 轴移动的后效按钮： https ://imgur.com/a/dq2occo

我相信是这种方法：

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ

但是，我生成的 html5 导出仅将我在后效中设置的不透明度应用于 png 并忽略 translateZ：

https://imgur.com/UjOWpbn

在我找到的以下文档中，我没有看到任何关于 3d 或翻译 Z 的信息：

https://airbnb.io/lottie/supported-features.html

如何将 translateZ() 添加到导出动画中的 png 中？