Question

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

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

我想添加一些简单的交互性-现在，只需添加一个按钮即可将角色的面孔和球衣与存储在服务器上的其他角色交换。

在JSON文件（data.json）的开头，似乎所有位图的ID都从“ image_0”到“ image_24”，例如：

[{"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

Answer 1

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

Answer 2

请检查示例（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");
    }

});

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

2 个答案: