Могу ли я добавить интерактивность (JS / CSS) для воздействия на элементы в анимации Bodymovin / Lottie?

Я аниматор, не очень разбираюсь в кодировке, но быстро учусь ... Я экспериментировал с расширением After Effects Bodymovin, используя растровые изображения для создания анимаций персонажей, которые я хочу развернуть в Интернете и на мобильных устройствах.

Результаты впечатляют, вы можете просмотреть мою текущую работу здесь: https://codepen.io/Hamsta/project/editor/XMKQzr

снимок анимации

Я хочу добавить простую интерактивность - пока просто для того, чтобы иметь возможность добавить кнопку, которая меняет местами лица и майки персонажей с другими, хранящимися на сервере.

В начале файла JSON (data.json) кажется, что все растровые изображения имеют идентификаторы от «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"}

Мой вопрос: могу ли я настроить таргетинг на эти идентификаторы в файле JSON с помощью Javascript и CSS, чтобы поменять местами изображения? Или я могу извлечь эти идентификаторы и поместить их в отдельный файл CSS, на который затем можно настроить таргетинг? Есть ли способ сделать анимацию еще более интерактивной, например, управлять направлением персонажа? Любая помощь очень ценится!

HG


javascript json css lottie bodymovin
person hamsta    schedule 25.06.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Так что я добился некоторого прогресса в собственном проекте. Я просто добавил "#" перед именем любого слоя формы или объекта в After Effects. Итак, если ваш объект назван «image_0», попробуйте переименовать его в «# image_0». Кажется, что затем его можно распознать как имя идентификатора с помощью javascript или CSS.

person julio    schedule 05.07.2018
comment
Действительно? Я получал расценки на неделю работы, чтобы это произошло. Я должен попробовать это, спасибо за подсказку, я попробую сегодня вечером. - person hamsta; 07.07.2018
comment
Хулио, я пробовал твой взлом, но у меня не получалось заставить его работать. Мой javascript довольно слабый, поэтому я пытался изменить изображение с помощью CSS. У вас есть ссылка на рабочий проект, в котором используется этот трюк? - person hamsta; 14.07.2018

arrow_upward
0
arrow_downward

Пожалуйста, посмотрите пример (рендерер 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");
    }

});
person Konstantin Eletskiy    schedule 05.12.2018