airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.42k stars 2.86k forks source link

Dynamic image #2994

Closed fgraux closed 1 year ago

fgraux commented 1 year ago

environment: html5 app (NodeJS Expressjs jquery socketio)

Browser and Browser Version: Last Chrome or chromium current version After Effects last 2023 version

I made a template in AE composed of images, texts and shapes.

Everything works fine except that I want be able to update dynamically images, as I do with text. But I couldnt, and didn't find a lot of infos for such a common idea...

Here is my code to start the anim : Where did I lost myself please ? setTimeout(function () { var animElementsLength = anim.renderer.elements.length; for (let i = 0; i < animElementsLength; i++) { var animElement = anim.renderer.elements[i]; if ( animElement.hasOwnProperty('data') && animElement.data.hasOwnProperty('cl') && content && content.hasOwnProperty(animElement.data.cl) ) { var cl = animElement.data.cl; try { animElement.canResizeFont(true); // Let lottie resize text to fit the text box animElement.updateDocumentData({ t: content[cl] ? content[cl].text || content[cl] : '' }, 0); } catch (err) {} } } var animAssetsLength = anim.assets.length; for (let i = 0; i < animAssetsLength; i++) { var imgEl = anim.assets[i]; if ( imgEl.hasOwnProperty('id') && content && content.hasOwnProperty(imgEl.id) ) { var img = img try { anim.updateBitmap(img, content[img]) } catch (err) {} } } anim.playSegments([animSettings.play.in, animSettings.play.out], true); }, 150);

fgraux commented 1 year ago

I Find out another way to update image sources : giving those a class name in AE, and then in my update script : $(document).find('.Team1').find('image').attr('href',newvalue)