问题标签 [bodymovin]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
117 浏览

after-effects - 在 After Effects 中将表达式简化为值

我正在使用解释器模板 ( Pixity Land ) 使用 After Effects 创建一些短动画,并使用 Bodymovin/lottie 之类的工具来渲染 HTML5 Canvas/SVG 动画。

不幸的是, Bodymovin在 Pixity Land 中使用的表达式存在问题,并且渲染的动画会跳动。我对 After Effects 没有太多经验,我宁愿不必重新编写表达式。

我想知道是否有一种方法可以将表达式简化为值。有什么建议么?

0 投票
3 回答
1979 浏览

javascript - jQuery - Bodymovin JSON 未加载

和lottie 动画应该在切换时从to运行slider,然后再返回 to ;喜欢动画。shuffle0 1000box

但是,您可以看到slider动画在最后一帧中消失了,并且shuffle动画似乎只完成了动画的一部分,然后就停止了。

如何让动画以slider与它们从 0 -> 100 运行shuffle的方式相同的方式box运行,然后再返回?

请注意,sliderbox有额外的代码,一次只能有一个打开状态。

0 投票
1 回答
47 浏览

javascript - jQuery - 切换两个按钮的活动状态

我有两个带有bodymovin动画的按钮,我想彼此交互,这样如果一个按钮具有open状态并且单击另一个按钮,则该open按钮变为closed并且动画再次运行,就好像再次单击以模拟关闭状态一样.

因此,例如,如果我单击#box它接收open状态(并且动画运行以打开。现在,如果我单击#slider应该#box丢失open状态并且动画运行回closed.

同样的情况同样适用于滑块。

0 投票
1 回答
596 浏览

javascript - net::ERR_FAILED 加载本地 .json 文件时?

我正在使用 bodyworks 和 lottie 加载自定义 SVG 动画,并且由于某种原因它会引发 GET 错误。该文件的路径是正确的,因为当我将它复制并粘贴到浏览器中时它加载它很好,所以我不确定出了什么问题?

该文件最初位于嵌套文件夹中,但我认为这可能是一些错误的原因,所以我移动了它,但它仍然无法加载它。任何帮助,将不胜感激

0 投票
1 回答
131 浏览

animation - 为什么 bodymovin 结果动画看起来比源帧更拉伸

我正在制作一些产品的动画,它会倾听你的声音并做出相应的反应,但是,我想将我的动画上传到我的 webflow 项目

我的动画分辨率是 1080x720,但是我将关键帧导出为 PNG 图像(如 webflow 教程推荐)然后我将这些图像导入到一个新的 After Effects 项目中,然后我导出动画(我想说我完全按照本教程的每个步骤进行操作)但是当我在 LottieFiles 预览器中测试我的结果 json 时出现了问题,动画看起来很紧张(我无法解释,所以我上传了 2 张图片来显示问题)

原始帧是bodymovin序列中使用的png图像

json输出帧是base64图像(动画的第一帧)存储在bodymovin动画结果data.json中

上面两张图片分辨率相同,但看起来不同,我想知道为什么以及如何解决它

提前致谢

链接到我遵循的原始 webflow 教程

0 投票
1 回答
385 浏览

ios - Lottie 动画在 iOS 中缺少部分,但在 html 和 Android 中完美运行

我在 After Effects 中制作了带有移动旗帜和波浪的船动画,并使用 Bodymovin 将其导出为 JSON。我对标志和波浪使用了波浪扭曲效果,但由于 Lottie 不支持该效果,我使用自动跟踪修复了它,现在动画在 HTML 中按预期工作。问题是,我需要它在 iOS 上工作,但在 iOS 上运行时,动画中缺少标志的红色部分和小波浪。我什至尝试在 Android 应用程序中运行它,并且一切正常。有没有人遇到过这样的事情?

我附上了我想要制作动画的图片、文件结构以及JSON 文件。

这是我想要实现的动画 这是我的AE项目的文件结构

0 投票
0 回答
39 浏览

web - SVG 被异常裁剪

我正在构建一个包含多个 SVG 动画的页面,并且我注意到有些被异常裁剪,但只有当页面中也有某些其他 SVG 时。当我将某些 SVG 设置为display: none或删除时,裁剪消失。

该页面由rockcontent 建立在一个名为Ion Interactive 的平台上。

SVG 是使用称为 bodymovin 或 lottie 的东西从 AfterEffects 导出的。

0 投票
1 回答
839 浏览

json - 无法将 animation.json 文件加载到我的颤振项目中

我使用 bodymovin 从 Aftereffect 导出了 animation.json 文件,但无法将其加载到我的颤振项目中。

我关注了这篇中篇文章,但在将文件路径放入 pubspec.yaml 文件的资产中之后,我也无法渲染动画。

我试图将我的代码简化为:

这是错误消息:

0 投票
0 回答
493 浏览

javascript - 如何使用 json 文件在网站上播放音频?

我目前正在尝试使用现在支持音频文件的插件 Bodymovin 播放从 After Effects 导出的 JSON 动画。

问题是它只是播放那个动画而不是播放音频。首先,我认为是 Bodymovin 没有正确导出带有声音的文件,但后来我找到了一个带有正确播放声音的动画的 codepen 示例。在这个 codepen 中,他们链接了一个存储在网络中的 json 文档,它正在按应有的方式播放。

为了测试问题是否与我的 json 文件有关,我下载了 codepen 站点,转到存储 json 动画文件的站点并将所有代码复制到记事本并将其保存为 json。然后,我没有使用链接作为路径,而是使用了我创建的本地 json 文件并且动画播放完美(我正在谈论来自 codepen 的动画,所以它证明文件正在工作)但它不播放音频。所以基本上,当它存储在网络上时,完全相同的 json 代码正在播放音频,但当它是使用 Windows 记事本创建的本地文件时则不会。

我真的不明白 json 是如何工作的,因为 Bodymovin 会自动为我创建它,我只需要将它链接到我的网站,但我认为它与记事本创建的 json 文件有关,它没有音频编解码器或类似的东西那。

这是codepen的链接:https ://codepen.io/airnan/pen/gOrwBqm

在 js 文件的第 11 行,您可以看到动画的链接,然后我打开它复制所有内容并将其粘贴到记事本中,通过链接可以正常工作(动画 + 音频),使用记事本文件它只是播放动画而不是音频。

谁能帮我?提前致谢。

0 投票
0 回答
118 浏览

javascript - Post Loop 中的 Lottie 按钮动画

我有一个带有文本的动态帖子循环,我想在其中放置一个抽奖动画按钮。循环中的每个帖子都有一个动态数据属性data-post_id。单击该按钮时,将向该特定按钮添加一个类,再次单击该按钮时,将其删除。

我的问题是,如果我使用data-post_idlottielocation参数的值,什么都不会显示,如果我使用按钮类作为location参数,lottie 按钮只会出现在循环中的第一个帖子中。

我究竟做错了什么?

这是我到目前为止得到的: