Author of the iOS side of things here. Feel Free to ask any questions!
Will this be available for swift?
It can already be used in swift :)
Introducing Lottie: Airbnb's tool for adding animations to native apps
31–40 of 101 posts
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#32Author of the Android side of things here. Feel Free to ask any questions!
Are the frames drawn to a bitmap first or straight to a canvas? Can a single animation object display different parts of itself in different stages of that animation, or would a duplicate animation object be required?
If there are no masks or mattes, the animation is drawn directly to the canvas and no bitmap allocations are necessary.
If there is a matte, an 8 bit bitmap will be created and if there is a mask, a 32 bit bitmap will be created and drawn to.
An animation can only be at one stage at a time but you can easily create multiple animations. If you want to have several copies of the same animation, there is a composition caching option that will prevent you from having to deserialize and parse the composition again.
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#33I'm sort of surprised that Adobe isn't building these sorts of features into CC and that large corps like Airbnb are having to roll their own! Seems like a big market to ignore.
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#34Author of the Android side of things here. Feel Free to ask any questions!
Thanks for the nifty tool and Making it so small to avoid bulking up APK's.
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#35Author of the iOS side of things here. Feel Free to ask any questions!
Off topic, but why is the iOS app so big? It's currently 130MB, which is almost 3x larger than the Android app and 10x larger than what I'd expect. Are you guys planning on slimming the app down? Is that 130MB mostly libraries you depend on, or is it mostly fonts, images and other assets? Thanks!
Actually this is perfectly ON-TOPIC :)
Some of this come from a mixture of architectures, and the fact we are using Swift+Objc, or just large asset files. Its something we are actively working on fixing. One of the things we did to make it better was build Lottie! Now we can replace PNG sequences and Gifs that can be several megabytes with simple JSON animation files which measure in the low kilobytes. One such example is the diamond animation found on our listing pages. To include this in the project before Lottie we had to package a PNG sequence for each screen resolution(@1x @2x @3x) with alpha these sequences would add around 4-5 megabytes to our app for a single, small, animation. With Lottie we package a single JSON file which measures around 2 kilobytes!
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#36Any plan for a web React version? Or are CSS + JS in a good enough state where a new tool isn't necessary?
I plan on adding a React API for the bodymovin library in addition the react native library. They will likely have identical interfaces.
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#37Earlier quoted context omitted.
Great question. Right now playing the animation with the imperative API in React Native will be driven entirely on the main thread, but the declarative API with `Animated` will not be (yet). I'm very interested in building the proper hooks natively to allow for usage with `useNativeDriver: true`. We are perfectly situated for this too, considering the author of the iOS side was also the engineer who introduced offloa…
What are you building with RN at airbnb? What has been your experience? If you were starting a mobile company now, would you start with RN ?
> What are you building with RN at airbnb?
Various flows in the Airbnb app are built with React Native. Our recently launched "Experiences" platform is built mostly with React Native, and there are many flows in the app that are built with React Native. Overall it's probably about 10-20% of the app right now. The decision to use or not use React Native for a new feature is a function of what the team building the feature is familiar with, and whether or not we think we can deliver a good user experience with the technology or not. The answers to those questions are quickly evolving though as we build up more infrastructure around React Native, and as the familiarity with the platform grows.
> What has been your experience?
Generally positive, but the difficulty of integrating React Native into an existing mobile app with large existing native code bases should not be understated. It's not plug and play. I'm giving a talk about this in detail at React Conf in March. Make sure to check it out!
> If you were starting a mobile company now, would you start with RN ?
Yes.
Keep in mind that I was the main proponent of React Native being experimented with and adopted at Airbnb. As a result, I have some bias and other people at Airbnb might have different feelings / experiences.
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#38Earlier quoted context omitted.
Great question. Right now playing the animation with the imperative API in React Native will be driven entirely on the main thread, but the declarative API with `Animated` will not be (yet). I'm very interested in building the proper hooks natively to allow for usage with `useNativeDriver: true`. We are perfectly situated for this too, considering the author of the iOS side was also the engineer who introduced offloa…
Is your navigation lib taking advantage of this? Just wondering, seeing as how React Navigation uses the Animated API
It doesn't yet, but I hope to work in integrating these two very very soon. We have to figure out what this will look like on Android, as the TransitionCoordinator on iOS doesn't have an exact equivalent on Android.
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#39I wonder why they chose svg rendering over canvas for the react-native version.
Re: Introducing Lottie: Airbnb's tool for adding animations to native apps
#40I wonder why they chose svg rendering over canvas for the react-native version.
I'm not sure what you mean by this? The react-native version does nothing but wrap the ios/android libraries (which are CoreAnimation and Canvas based, respectively)