Audioburst Search

Airbnb discussed on Software Engineering Daily


React set of tools that it's animates react components her something like that so they actually we actually worked with one of the one of the creator creature jersey and be right so the story is actually it started with a guy called her non teresi that we've worked with who's not related to airbnb he created the body movin even plug in for after effects and he also created a web player for it so basically you could use the body moving plug into export a lot of the animations from after effects like which was mentioning into a jason file but you lose a lot of stuff along the way obviously it converts to to vector so not all imagery comes across not all of the after effects plug ins are usable you sort of have to know what you can and can't use and then and it gives you this this real time movie clip basically that's that's not not a movie though it's data and that can be played back by a web player that that he created her non created this this this run time for the web airbnb as far or as i know the story goes he could probably tell you better than approached him and said hey we want to take this product is it make it into something called lottie will we'll build the other run times we'll build the will build like an android runtime for it we'll build an i o s run time for it so that basically essentially players for players that that will play back this jason file on on android and all that and i think actually you had someone on your podcast gabriel recently who i think he worked on the android wine line if i remember correctly and so i believe they also have a runtime yeah that's the one suggests ron time with components for react and i'm sure all the other major UI libraries libraries but yeah so basically the idea of the lottery system is you could make something in after facts which is the most commonly used video editing tool animation production tool and you could use this body moving tool to export it to jason file and the jason file while needs to be interpreted by whatever platform is running the animation so whether retirement android or IOS or web or like like react in the web you need a run time to actually execute or process and and render the that big java script file that you've generated unrated from from aftereffects exactly so that is one model of bringing animations to the web or bring animations to your mobile applications and i've seen the lahti animations they look really nice but having a refresher just now of the of that tool chain that's kind of a kluge tool chain like you know it's still using after facts it's still producing these artifact that sounds very difficult to build a a graceful handoff off process with and it also sounds i'm not sure how interactive those animations are unique unique directional yup that that's right that's exactly after-effects affects itself isn't built for interactivity it's built for video so so you're working well first of all you're you're working in three different tools and the you know the the intend pipeline is not owned by one vision it's all these different third party tools that are added on to create the final output so so so things definitely get lost along the way not everything is perfect you know your animation there's some trial and error you have to do an after effect to see what's actually going to export correctly and work as expected but the biggest one of the biggest issues we see with that pipeline is that like i was saying after-effects is made for videos traditionally it's for after-effects affects so you know for for video editing and post production so the tool itself is not interactive first of all everything has to pre rendered when you hit the space bar to watch something it's not actually playing in real time but that also means that while it's playing you can't dynamically manipulate anything you can't for example create video game character that has a run animation a swim swim animation a jump animation and shoot animation and then mix those things together so that while the character is running it can also aim and shoot but maybe in another instance using the same run animation it's jumping or it's looking around in after-effects to do that you basically have to create all those different states and and then create all the different permutations of those mixed together and you can't tell it to mix those things at runtime in affects you just can't do that so already for a lot of video game developers that require a lot of animation it's not an ideal tool but then lottie itself i believe if i remember quickly only supports one animation so you export a single animation and if you want to add any interactivity to that you you as the engineer now need to go and look into that file jason on file and manipulate that always code which you can do but the tool isn't isn't ideal for that as an example also also the animation mixing is obvious one that you know just because you the designer can actually create these multiple animations and preview them in the file themselves and after effects themselves the editor you're not gonna be able to what am i trying to say here let me step back so lottie plays back really well a single animation that's that's like like just a single video is great a single one time animation but then if you're trying to say grab a players hand or something like that in the game and make them sort of aim up down you have to do that all with code whereas we think in our tool we've built it to be built for interactivities so you you can actually create a bone chain in for your characters arm and then put a controller at the end of that arm and the designer in the tool can actually manipulate that and see what what it's going to behave like and then expose that controller to the engineer that just says okay i'm going to grab this at runtime and move it and because of how the designer honor set up that arm to work you know the inverse kinetics and the bone system is going to respect all of that and not break anyway that's just one example of of something that affects you you can find add ons and plug ins do bones and stuff like that but it's just not made for time and that stuff isn't going to translate to to lottie well i think from the from the perspective as an even better example that maybe can clarify kind of the difference between is the ability to mix states if you imagine and we actually she have a blog and a couple different posts about this so if you want to see it in detail you can look for it it's called liquid download or we have this example which is a download process that basically has an indeterminate and determinate state at the same time so if you imagine something that's spinning on your screen indeterminately but then it also shows progress by maybe if it's a circle it could fill up as the download proceeds if you had to design that after facts you'd have to make two separate animations and then you couldn't preview mixing them together and with laudi there are tricks that developers clever developers can get around to make dot com work by for example looking at one portion of the time line nine applying that and then maybe applying the second part of the time line at a different time but it only works if you guarantee that those those key frames don't touch the same things while gal with a tool that's made for runtime animation and the ability to blend animations together it should actually based on input from the designer blend those key frames on top op of existing key frames before applying them to the final result which means that you can see a result that is a combination of multiple states of multiple animations and that's something that's very very hard to do with something that's just not built for real time apache.

Coming up next

Airbnb discussed on Software Engineering Daily

Software Engineering Daily 4 months ago

Authorities suspect white supremacists and far-left extremists are behind violence at protests

Dave Ramsey 1 hr ago

Trump signs executive order aimed at removing legal protections for social media companies

Chapo Trap House 18 hrs ago

US authorities say killing of federal security officer during protest in Oakland, California, was domestic terrorism

WTOP 24 Hour News 2 hrs ago

Pentagon puts elite military police units on standby as Donald Trump prepares to deploy the Army to the streets

WBBM Programming 6 hrs ago

‘Boston Stands Together Against Injustice’: Mayor Walsh Hosts Virtual Prayer Vigil

WBZ Midday News 7 hrs ago

Newsom Allows In-Person Dining, Barbershops, Hair Salons To Reopen In Los Angeles County

Rosie on the House 7 hrs ago

'50/50 chance' rescheduled launch blasts off

The Loveland Report 7 hrs ago

Big-bank execs condemn racism after George Floyd death

Bloomberg Business of Sports 8 hrs ago

Man With Box Cutter Shot, Killed by Philadelphia Officer, Police Say

KYW 24 Hour News 8 hrs ago

Supreme Court rejects challenge to limits on church services

KNX Weekend News and Traffic 8 hrs ago