search

airbnb / lottie-web

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

How to use online image resources #1244

Open wrbing728 opened 6 years ago

wrbing728 commented 6 years ago

Is there any expierence to use online images?

In my case, I need to export 2 Lottie jsons to fit both iPhone6 and iPhoneX, with the same image resources. But considering the size of json file, It is better to use online image resources instead of packing them into the json file.

Danjuanlab commented 6 years ago

I know how to achieve the effect you want in WEB, IOS should be able to copy that. First put a picture in AE, change the AE layer name of this picture file in AE to "#imagesample", then select the export picture file when exporting the animation. Then there will be in the rendered SVG animation on the webpage side. A tag is as follows <image id="imagesample"...>, then you can locate the tag through the ID selector, and then you can dynamically change the URL of the image use JS.

https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript