|
|
|
|
Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. ZIP from the repo. See a basic implementation here. See examples on codepen. A Panel will open with a Compositions tab listing all of your Project Compositions. Select the composition you want to export. Select a Destination Folder. Data: an Object with the exported animation data. Check this wiki page for an explanation for each setting. 1 is normal speed. Frame: defines if first argument is a time based value or a frame based (default false). Frame: defines if first argument is a time based value or a frame based (default false). 1 is forward, -1 is reverse. Can contain 2 numeric values that will be used as first and last frame of the animation. Or can contain a sequence of arrays each with 2 numeric values.
Flag: boolean. If set to false, it will wait until the current segment is complete. If true, it will update values immediately. SubFrames: If false, it will respect the original AE fps. If true, it will update on every requestAnimationFrame with intermediate values. Frames: If true, returns duration in frames, if false, in seconds. ToAndStop(value, isFrame, name) -- Moves an animation with the specified name playback to the defined time. If name is omitted, moves all animation instances. Animation() -- Explained above. Destroys an animation with the specified name. If name is omitted, destroys all animation instances. The DOM element will be emptied. Animation() -- you can register an element directly with registerAnimation. 1 to improve player performance. In some animations as low as 2 won't show any difference. LocationHref() -- Sets the relative location from where svg elements with ids are referenced. It's useful when you experience mask issues in Safari. Another way to load animations is adding specific attributes to a dom element.
You have to include a div and set it's class to "lottie". If you do it before page load, it will automatically search for all tags with the class "lottie". Or you can call lottie.searchAnimations() after page load and it will search all elements with the class "lottie". Create a div that will contain the animation. You can preview or take an svg snapshot of the animation to use as poster. After you render your animation, you can take a snapshot of any frame in the animation and save it to your disk. If you have any images or AI layers that you haven't converted to shapes (I recommend that you convert them, so they get exported as vectors, right click each layer and do: "Create shapes from Vector Layers"), they will be saved to an images folder relative to the destination json folder. Beware not to overwrite an existing folder on that same location.
This is real time rendering. More optimizations are on their way, but try not to use huge shapes in AE only to mask a small part of it. Too many nodes will also affect performance. If you have any animations that don't work or want me to export them, don't hesitate to write. I'm really interested in seeing what kind of problems the plugin has. It supports masks and inverted masks. Maybe other modes will come but it has a huge performance hit. The script supports shapes, rectangles, ellipses and stars. Expressions. Check the wiki page for more info. No negative layer stretching! No idea why, but stretching a layer messes with all the data. See examples on codepen. I recommend doing it if you use it for a project. For missing mask in Safari browser, please call lottie.setLocationHref(locationHref) before animation is generated. It usually caused by usage of base tag in html. This project exists thanks to all the people who contribute. Become a financial contributor and help us sustain our community. Support this project with your organization. Your logo will show up here with a link to your website.
|
|
