问题标签 [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 投票
2 回答
4133 浏览

javascript - Bodymovin 只悬停播放一次动画

让我的动画在悬停时触发播放。我一切正常,但是当我尝试再次悬停播放时,似乎没有任何效果。

有什么想法我写错了吗?

0 投票
2 回答
1489 浏览

javascript - Bodymovin 按需循环播放片段

我有几个图标,它们有一个介绍动画 [0,20],它们在其中被绘制,当您将鼠标悬停在图标上时,还有一个循环动画 [21, 100]。将 loop 设置为 true 将使我的所有段循环,这不是我想要的,我只需要其中一个段循环。无论如何都要这样做?

这是我如何设置代码的示例:

最终答案编辑:

我的实现受到了正确答案的启发,但与正确答案有点不同,所以我认为值得一提。我基本上将相同的动画加载到彼此重叠的两个元素中。这两个 DOM 元素通过 CSS 切换为默认和悬停模式。唯一的区别是我操纵数据对象并将循环更改为 true 以获得悬停效果!所以我发现没有必要回到我的动画师那里并要求他们将动画分割成不同的文件。

0 投票
1 回答
1263 浏览

json - 带有后效的空 JSON 导出 + Lottie 的 bodymovin

我在 After Effects 中有一个基本动画,安装了 bodymovin(没有任何错误),并且想导出为 Lottie 动画。但是导出时我得到的只是一个空的 JSON 文件

当然,我确实在导出过程中选择了我的作文,而且我只有一个作文。

我检查了提示和指南,以及支持的功能,但我没有发现我不应该做的任何奇怪的事情。

这是我的动画截图: 后效基本动画

有任何想法吗?

干杯

0 投票
1 回答
344 浏览

javascript - 使用 bodymovin JSON 更改 SVG 上的视图框值

处理 bodymovin 的新手。有没有办法在将导出的 SVG 解析到浏览器后更改其视图框,或者通过使用 Javascript,或者通过编辑 data.json?基本上我希望视图框的最终输出为“50 0 400 400”。我可以通过更改 data.json 中的“w”和“h”属性来更改最后两个值。

0 投票
1 回答
1423 浏览

javascript - Angular4 中的 bodymovin,修复未定义的 appendChild

我在我的项目中使用 bodymovin 脚本。即使我的一些动画 SVG 在浏览器中呈现,我仍然收到此错误

根据这个答案,我想我应该在页面上的所有内容加载后运行 bodymovin 脚本。我已经更新了代码,考虑到了新的建议

索引.html

app.component.ts

app.component.html

动画.js

0 投票
0 回答
675 浏览

canvas - After Effects bodymovin 进入 PIXI.js

在这个后效示例中,它显示了renderer: 'pixi'我想知道这是否会使用 pixi js 渲染器技术或者它会创建一个用于制作动画的 pixi js 画布的选项。

还想知道是否可以将效果动画加载到 pixi js 中?

0 投票
0 回答
295 浏览

javascript - 为什么我的 Bodymovin.js loopComplete 事件在动画完成之前触发?

我正在尝试使图标在单击时具有动画效果。我希望动画在重新启动之前完成。

我首先通过选择元素来构建我的图标,然后使用它们的 id 通过路径选项加载动画数据:

然后循环图标对象并调用 animationStart 方法以及添加到每个图标容器的单击处理程序:

startAnimation 方法尝试附加一个事件处理程序以在 loopComplete 事件发生时触发。

但是,这似乎会立即触发,我想知道如何在动画之后触发它,这样我才能在它完成之前开始新的动画。

我在这里做了一个简化的测试用例:https ://codepen.io/paulyabsley/project/editor/ALEWnK

bodymovin.js 的文档:https ://github.com/bodymovin/bodymovin

0 投票
1 回答
124 浏览

javascript - Bodymovin 展示更狂野的动画

我们用 Body Movin 制作了一些动画,效果都很好。我们现在遇到的问题是,Body Movin 动画的动画与它应该动画的内容相比实在是太疯狂了。

原创动画: 摇晃

Bodymovin动画: 摇晃失败

你可以在这里测试和玩耍: https ://codepen.io/albertdp/project/editor/AmbRgM

我用它在演示中的方式来称呼它。

如果您遇到同样的问题,请告诉我。

0 投票
1 回答
660 浏览

node.js - JSON 动画导出为 Video mpeg

我有一个在 AfterEffects 中创建的 json 动画,用 BodyMovin 导出。 https://github.com/bodymovin/bodymovin

有没有办法获取这个 json 文件并以编程方式将其转换为视频?基本上,我正在尝试创建一个 JibJab 风格的视频,用户可以在其中输入他们的脸部照片,我们的应用程序将获取该脸部并将其放置在动画上。我需要将该动画转换为可以保存到用户手机中的视频文件。也许用ffmpeg?

0 投票
1 回答
313 浏览

android - 我可以在不以编程方式调用 setProgress() 的情况下开始几帧并循环其余帧吗?

我想制作一个动画,例如显示从非常小的尺寸到正常尺寸的东西,然后重复(循环)一组帧。

仅使用 AE + Bodymovin 就可以实现吗?

我知道我可以将帧设置为 0 到 100,然后在 101 到 300 帧之间循环,但是如果有某种方法可以在 json 文件中指定它会很好。