1

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

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

动画截图

我想添加一些简单的交互性——现在，只是为了能够添加一个按钮，将角色的面部和球衣与存储在服务器上的其他角色交换。

在 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 文件中，然后我可以定位它？有没有办法给动画添加更多的交互性，比如控制角色的方向？非常感谢任何帮助！

HG

4

2 回答 2

1

所以我在自己的项目中取得了一些进展。我只是在后效中的任何形状图层或对象的名称前添加了“#”。因此，如果您的对象名为“image_0”，请尝试将其重命名为“#image_0”。似乎它可以被javascript或CSS识别为id名称。

于 2018-07-05T23:25:01.520 回答
0

请检查示例（ svg 渲染器）：

var lottieAnimation = lottie.loadAnimation({
  container: document.getElementById('container'), // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

lottieAnimation.addEventListener('DOMLoaded', function(e) { 

    console.log('DOMLoaded fired'); 

    var el1 = lottieAnimation.renderer.elements[1];

    el1.baseElement.onclick = function(){

       console.log("Element name = '" + el1.data.nm + "' was clicked");
    }

    var el2 = lottieAnimation.renderer.elements[2];

    el2.baseElement.onclick = function(){

       console.log("Element name = '" + el2.data.nm + "' was clicked");
    }

});
于 2018-12-05T12:59:02.430 回答