javascript - 我可以添加交互性 (JS/CSS) 来影响 Bodymovin/Lottie 动画中的元素吗？

Question

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

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

snapshot of animation

我想添加一些简单的交互性 - 现在，只是为了能够添加一个按钮，将 Angular 色的面孔和 Jersey 与服务器上存储的其他内容交换。

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

[{"id":"image_0","w":60,"h":59,"u":"images/","p":"hand1_afl-players-combo.png"},{"id":"image_1","w":34,"h":96,"u":"images/","p":"forearm_afl-players-combo.png"},{"id":"image_2","w":88,"h":98,"u":"images/","p":"arm_afl-players-combo.png"},{"id":"image_3","w":102,"h":43,"u":"images/","p":"boot_afl-players-combo.png"},{"id":"image_4","w":19,"h":25,"u":"images/","p":"knee_afl-players-combo.png"},{"id":"image_5","w":49,"h":96,"u":"images/","p":"sock_royals_afl-players-combo.png"},{"id":"image_6","w":49,"h":111,"u":"images/","p":"calf_afl-players-combo.png"},{"id":"image_7","w":82,"h":84,"u":"images/","p":"shorts_royals_afl-players-combo.png"},{"id":"image_8","w":71,"h":127,"u":"images/","p":"thigh_afl-players-combo.png"},{"id":"image_9","w":350,"h":378,"u":"images/","p":"Screen_Shot_2018-06-15_at_3.17.03_pm.png"},{"id":"image_10","w":92,"h":106,"u":"images/","p":"bum_royals_afl-players-combo.png"},{"id":"image_11","w":87,"h":181,"u":"images/","p":"singlet_royals_afl-players-combo.png"},{"id":"image_12","w":61,"h":76,"u":"images/","p":"armpit_afl-players-combo.png"},{"id":"image_13","w":54,"h":81,"u":"images/","p":"neck_afl-players-combo.png"},{"id":"image_14","w":64,"h":67,"u":"images/","p":"left_hand1_afl-players-combo.png"},{"id":"image_15","w":150,"h":91,"u":"images/","p":"afl_ball.png"},{"id":"image_16","w":49,"h":96,"u":"images/","p":"sock_falcons_afl-players-combo.png"},{"id":"image_17","w":82,"h":84,"u":"images/","p":"shorts_falcons_afl-players-combo.png"},{"id":"image_18","w":352,"h":409,"u":"images/","p":"dave.png"},{"id":"image_19","w":517,"h":517,"u":"images/","p":"mark.png"},{"id":"image_20","w":92,"h":106,"u":"images/","p":"bum_falcons_afl-players-combo.png"},{"id":"image_21","w":87,"h":181,"u":"images/","p":"singlet_falcons_afl-players-combo.png"},{"id":"image_22","w":225,"h":225,"u":"images/","p":"grass__0-00-07-16_.png"},{"id":"image_23","w":1725,"h":100,"u":"images/","p":"sponsors1.png"},{"id":"image_24","w":1200,"h":674,"u":"images/","p":"stadium3.png"}

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

Mercurial

Answer 1

于是我自己的元素有了一些进展。我只是在 After Effects 中的任何形状图层或对象的名称前添加了“#”。因此，如果您的对象名为“image_0”，请尝试将其重命名为“#image_0”。看来它可以被javascript或CSS识别为id名称。