airbnb / lottie-ios Goto Github PK
View Code? Open in Web Editor NEWAn iOS library to natively render After Effects vector animations
Home Page: http://airbnb.io/lottie/
License: Apache License 2.0
An iOS library to natively render After Effects vector animations
Home Page: http://airbnb.io/lottie/
License: Apache License 2.0
I've been trying out this aep.
In After effects:
The result is this json file: https://www.dropbox.com/s/8r807g1hcntrzt7/rocket.json?dl=0
See attached
Xcode.zip
Thanks for making this awesome tool!
We'd love to use it, but we'd need support for image-backed layers to use our existing after effects animations. From taking a quick glance through the code, it would appear that our image layers are being ignored as they map to the LALayerTypeUnknown
type. Below is the entirety of one of our simple exports with an image. Here's a link to a bodymovin image layer schema as well.
I'd be happy to take a stab at this if this is a feature you'd be interested in adding. Thanks!
{
"assets": [{
"id": "image_0",
"w": 811,
"h": 976,
"u": "images/",
"p": "img_0.png"
}, {
"id": "image_1",
"w": 1039,
"h": 1283,
"u": "images/",
"p": "img_1.png"
}],
"layers": [{
"ddd": 0,
"ind": 0,
"ty": 2,
"nm": "Link.png",
"cl": "png",
"refId": "image_0",
"ks": {
"o": {
"k": 100
},
"r": {
"k": [{
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 60,
"s": [0],
"e": [-5]
}, {
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 65,
"s": [-5],
"e": [5]
}, {
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 70,
"s": [5],
"e": [-5]
}, {
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 75,
"s": [-5],
"e": [5]
}, {
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 80,
"s": [5],
"e": [0]
}, {
"t": 85
}]
},
"p": {
"k": [1308, 572, 0]
},
"a": {
"k": [405.5, 488, 0]
},
"s": {
"k": [75, 75, 100]
}
},
"ao": 0,
"ip": 0,
"op": 252,
"st": 0,
"bm": 0,
"sr": 1
}, {
"ddd": 0,
"ind": 1,
"ty": 2,
"nm": "keys.png",
"cl": "png",
"refId": "image_1",
"ks": {
"o": {
"k": 100
},
"r": {
"k": [{
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 0,
"s": [0],
"e": [-2]
}, {
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 5,
"s": [-2],
"e": [2]
}, {
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 10,
"s": [2],
"e": [-2]
}, {
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 15,
"s": [-2],
"e": [2]
}, {
"i": {
"x": [0.667],
"y": [1]
},
"o": {
"x": [0.333],
"y": [0]
},
"n": ["0p667_1_0p333_0"],
"t": 20,
"s": [2],
"e": [0]
}, {
"t": 25
}]
},
"p": {
"k": [580, 524, 0]
},
"a": {
"k": [287.5, 641.5, 0]
},
"s": {
"k": [75, 75, 100]
}
},
"ao": 0,
"ip": 0,
"op": 251,
"st": 0,
"bm": 0,
"sr": 1
}, {
"ddd": 0,
"ind": 2,
"ty": 1,
"nm": "Yellow Solid 1",
"ks": {
"o": {
"k": 100
},
"r": {
"k": 0
},
"p": {
"k": [960, 540, 0]
},
"a": {
"k": [960, 540, 0]
},
"s": {
"k": [100, 100, 100]
}
},
"ao": 0,
"sw": 1920,
"sh": 1080,
"sc": "#ffc400",
"ip": 0,
"op": 263,
"st": 0,
"bm": 0,
"sr": 1
}],
"v": "4.5.3",
"ddd": 0,
"ip": 0,
"op": 240,
"fr": 60,
"w": 1920,
"h": 1080
}
If a layer is set as a 3d layer in after effects Lottie crashes since the rotation values are split into 3 separate values.
I have some animations which are designed to play a small "intro", then play the "main" part of the animation. The "main" part of the animation is to then be looped (to save space) either indefinitely or for a particular number of loops (specified outside of After Effects, obviously).
In my current system I have the ability to specify a frame/progress percentage in which the animation will start from when looping as well as a loop count. It would be a nice if a similar feature existed in Lottie.
I've tried using a completion callback and setting loopAnimation
to be false
to get similar behavior, but I seem to be hitting a race condition or logical error in which the animation's completion callback will be called once, but not called a second time. Setting animationProgress
in the completion callback also does not appear to do anything.
Even though it appears all of the animating happens in the domain of Core Animation, the animations can only be accessed via UIView. Would be nice to be able to instantiate animations for CALayers as well, so that they may be used in contexts which require layers.
[!] Unable to find a specification for lottie-ios
ld: warning: directory not found for option '-F/Users/jingqiyanglois/Library/Developer/Xcode/DerivedData/lottie-ios-cpbpeohptyuobhbmovrxchqlbhcp/Build/Products/Debug-iphonesimulator/lottie-ios-iOS'
ld: framework not found Lottie
clang: error: linker command failed with exit code 1 (use -v to see invocation)
I used cocoapod to install but still fail to have the framework working. Any solutions?
I'm speaking in particular to iOS. Is there currently a way for an animation to be reset before it completes?
The readme states:
In your application targets “General” tab under the “Embedded Binaries” section, drag and drop lottie-ios.framework from the Carthage/Build/iOS directory that carthage update produced.
However, this is not correct. According to Carthage, you need to
On your application targets’ “General” settings tab, in the “Linked Frameworks and Libraries” section, drag and drop each framework you want to use from the Carthage/Build folder on disk.
"Two-letter prefixes... are reserved by Apple for use in framework classes."
https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Conventions/Conventions.html
Consider changing LA -> LOT to avoid namespace collisions.
*_Platform: iOS 10.3
*_Console: *** Terminating app due to uncaught exception 'NSRangeException', reason: '-[__NSCFString replaceCharactersInRange:withString:]: Range or index out of bounds'
*** First throw call stack:
(0x183663fac 0x1820c853c 0x183663ef4 0x183601e8c 0x10007e1e8 0x10007cbf8 0x189a7a63c 0x189a4353c 0x189cb0808 0x189cb0430 0x18a31231c 0x189cb036c 0x189a431c4 0x189a42aec 0x189a410dc 0x189a3f374 0x189cc6fc4 0x1898b38a8 0x189cc6c74 0x1898bdc7c 0x1898b91c8 0x189889e9c 0x18a07f920 0x18a07a09c 0x18a07a4a8 0x1836123c8 0x183611d38 0x18360f944 0x18353f9bc 0x184fac074 0x1898ee984 0x100081028 0x18254d59c)
libc++abi.dylib: terminating with uncaught exception of type NSException
Is there a way to set the current progress and then set the end progress and then animate?
Ex:
ToValue: 0.0
FromValue: 0.5
I cloned the repo and attempted to build the project for iPhone but Xcode reported the project could not be built for my 10.1 iPhone because the deployment target is 10.2. This feels unnecessary.
I did this because building with Carthage was giving me:
Ineligible destinations for the "Lottie" scheme:
{ platform:iOS, id:dvtdevice-DVTiPhonePlaceholder-iphoneos:placeholder, name:Generic iOS Device }
{ platform:iOS Simulator, id:dvtdevice-DVTiOSDeviceSimulatorPlaceholder-iphonesimulator:placeholder, name:Generic iOS Simulator Device }
After lowering the deployment target, things worked fine.
So I'm doing a position transform on a layer and in AE it runs linearly. When I run it on device (iOS) it looks like it runs linearly until the last 80% of the animation and then it slows down.
Any reason why?
Hello guys,
Awesome Library, thanks for sharing it with us! One quick question: Is it possible to use this library with swift? And if I can, how so?
How can I use it? I want to just add some files to use it. thanks for help
let animationView = LAAnimationView.animationNamed(animationNamed: "foobar")
should really be
let animationView = LAAnimationView.animation(named: "foobar")
Just having a look at this project and it looks great! One thing that seems to be missing though is the ability to pause an animation at an amount of progress. So imagine being able to play to say 50% of the way through then automatically pause.
Why might this be handy?
Well imagine a play/pause button that we want to animate when the user taps it. So the sequence of events would be:
[user taps] -> animate from play to pause
[user taps again] -> animate from pause to play (this is not just the reverse of the first animation)
We could use one animation for that, if we had the ability to tell the framework to only play 50% of the animation, then later from 50% to completion (that second part already exists). I've attached the animation in question so that hopefully this makes more sense.
I might be missing something, but having support for things that have 2 states and going between them seems fairly common?
I've been trying to see if I can set the animation to it's end, or 'animationProgress = 1.0', in case I want to see it at it's finished state without having it go through the animation. I know I could just use a still image instead, but is this possible?
*** Terminating app due to uncaught exception 'NSRangeException', reason: '-[__NSCFString replaceCharactersInRange:withString:]: Range or index out of bounds'
Hi, thanks for the awesome project 👍
Recently the GitHub released topics I think it makes sense to add them to let more people find the framework.
Hello guys! Nicely done.
I have a question. Does lottie support transforms on composition? Something like on the screenshot:
If not, are you planning to add it in the nearest future? I could try to do it myself, in case you don't have such plans. I saw some class named LACustomChild, is it related?
Thanks!
Do text Animations expose an accessibility id? Is there a mechanism for enabling or enhancing Accessibility for these custom views/layers?
Not much more to say I guess. iOS returns the playback duration in seconds, Android in milliseconds. The general unit for playback durations is in milliseconds, so they should probably be normalized.
I've noticed that each device (iPhone 5, 6 and 6+) form factors, require each it's own aep (and it's own .json) composition reflecting the size of the targeted device for pixel perfect edge to edge screen animation (example, placing a border around the screen).
In other words, for each of the iPhone device form factor, the Compositions are:
My question is, is there a design pattern (or composition) to follow in order to generate one json file for all form factors (including Androids) ?
For non edge to edge compositions, the animations should be centered at the smallest form factor size.
/lottie-ios/lottie-ios/Classes/Private/LOTAnimationView.m:272:15: Null is assigned to a pointer which is expected to have non-null value
Static analiser is our friend.
@buba447
Awesome Library, thanks for sharing it with us!
From After Effect, I generated JSON File with the help of https://github.com/bodymovin/bodymovin#bodymovin, It gave me two files one is data.json file and second is img.png file.
Then due to issue of Cocoapods, I included these two files in Example Provided by this library.
In this project, I changed in LottieRootViewController,
- (void)viewDidLoad {
[super viewDidLoad];
...........
self.lottieLogo = [LAAnimationView animationNamed:@"data copy"]; //was LottieLogo1 self.lottieLogo.contentMode = UIViewContentModeScaleAspectFill;
[self.view addSubview:self.lottieLogo];
But, didn't working.
Provide some proper guidance, how actually this works?
Here is two files:
data copy.txt
change its extension from data copy.txt -> data copy.json
and below is .png file,
It is not working with AVSynchronizedLayer. I am adding LOTAnimationView layer to AVSynchronizedLayer and setting begin time to CACurrentMediaTime(). But nothing happens. If I will add LOTAnimationView layer to any other CALayer then it works fine. Any suggestions for that?
The methods added in UIColor+Expanded and CAAnimationGroup+LAAnimatableGroup should be prefixed to avoid name collisions.
Avoid Category Method Name Clashes
https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/CustomizingExistingClasses/CustomizingExistingClasses.html#//apple_ref/doc/uid/TP40011210-CH6-SW4
This is related to #16
Tried with the attached json file (in zip) that has a super simple text animation, but no no luck... What might be reason?
When AE animation uses a lot of mask, there's some bug on memory management.
I want to export this amazing animation into my video file with AVFoundation.
let animationView = LAAnimationView.animationNamed("hamburger")
let parentLayer: CALayer = CALayer()
let videoLayer: CALayer = CALayer()
videoLayer.frame = CGRect(x: 0, y: 0, width: renderSize.width, height: renderSize.height)
parentLayer.frame = CGRect(x: 0, y: 0, width: renderSize.width, height: renderSize.height)
parentLayer.addSublayer(videoLayer)
parentLayer.addSublayer(animationView.layer)
composition.animationTool = AVVideoCompositionCoreAnimationTool(postProcessingAsVideoLayer: videoLayer, in: parentLayer)
but the animation does not shown in the composed video. I thought the animation begin time is not correct. It should be AVCoreAnimationBeginTimeAtZero
can you add this feature in this amazing animation library ?
Add the ability to use Xcode playgrounds.
thx
my animator need to operate some .png img ,build a new folder "images" and put .png file in it .
json like this:"
{
"assets": [
{
"id": "image_0",
"w": 960,
"h": 540,
"u": "images/",
"p": "img_0.png"
}
],
...
} "
but I has run app ,can't see anything without empty
Looks like a recent update added folders with spaces. Not all development environments support that. You might want to consider camel-casing instead.
Made a simple animation with a square and it's not working at all, see attached files.
Using AE CC 2017
I added the json file to the iOS project and ran it on my device.
Works & looks just fine in the html doc.
I was using Facebook Keyframes and have recently been testing lottie. I've encountered a few issues with exports I specifically adapted to be used in Keyframes that render correctly in bodymovin and keyframes, but not in lottie. After some trouble shooting I was able to fix the problem by un-separating the dimensions for the position transforms on layers that had previously been separated.
Separating position transform dimensions is often a significant part of my workflow and it would be useful to maintain this functionality.
I followed the guide to get the Lottie Framework with Carthage, But I get the message indicating "GitHub API request failed: DoesNotExist" on the terminal,I have been searching the solution from network and I am failed. Please tell me how I can solve this problem! Thank you very much!
The current version pushed to the Cocoapods trunk is 1.0.0 which is not inline with the latest version 1.0.3.
how to solve? thanks
Tried to create a simple animation showing that something is being calculated:
This seems to work perfectly fine through bodymovin, but when I transfer it to Lottie and play it through XCode I lose the transparency where the buttons are.
So I am wondering how I should maintain the transparency seen in the first gif when using Lottie?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.