Lottie-web: Help regarding documentation
All 17 comments
I tried some conversion from adobe AE to lottie, and I guess the above assumption is true.
@bodymovin please have a look at.
Also, in offsetKeyframe.json, there is a mention of "i"Bezier curve interpolation in value and "o"Bezier curve interpolation out value. I couldn't find any description for these parameters. Are these two the control points in the cubic bezier curve(assuming lottie uses cubic bezier curves)?
Any help would be appreciated.
Thanks in advance! ^_^
AnishGG
on 9 Mar 2019
Based on the code in code in https://github.com/clauderic/bodymovin/blob/master/extension/jsx/utils/PropertyFactory.jsx.
or - outer radius
os - outer roundness
ir - inner radius (star only)
is - inner roundness (star only)
Each bezier point has an in and an out control point. Coordinates of control points are relative to the respective point. The out point is the control point to use when a line segment starts at that point, the in point is the one to use when the line segment finishes at that point.
Now, can anyone tell me what the Merge shape does and what the merge modes are ('mm')? I cannot find any reference to them in the JSON
Baboonanza
on 11 Mar 2019
@Baboonanza, Thanks for clarifying. But I figured that control points are given by "ti" and "to" in any lottie file.
I still didn't figure out the motive of "i"Bezier curve interpolation in value and "o"Bezier curve interpolation out value. Whenever I export any AE file to lottie "i" is fixed to [0.833, 0.833] and "o" is fixed to [0.167, 0.167]
AnishGG
on 12 Mar 2019
Well, it's a little more complicated than that. For animations there are potentially 2 curves, one for time (t) which has control points given by 'o' and 'i' and one for actual position with control points 'to' and 'ti'. The time bezier, which makes the ease in etc work, is 'normalized' (no idea if this is the correct term) in that the start point is always 0,0 and the end point 1,1. The spatial tangent is a general bezier that maps directly onto 2D space to give the final position. I'm probably not explaining this very well :)
So to get the final value for a keyframe:
- get the linear distance across the keyframe (0 -1 range of course)
- solve the tween bezier to get the modified t
- feed modified t into the spatial bezier if present or use modified t to interpolate between start and end value of the keyframe
And the values [0.833, 0.833], [0.167, 0.167] are just the values that seem to get put in to denote a striaght line, ie no tween. If you plot it on paper you'll see they sit on the line from 0,0 to 1,1.
Baboonanza
on 12 Mar 2019
@Baboonanza that is a very accurate explanation :)
Regarding Merge Paths, they are not supported yet by the web player, but I think they are by the Android player.
Wes is probably coming soon with a dependency to the paper.js library.
bodymovin
on 13 Mar 2019
@AnishGG you are right, ir and is are not correctly specified, I'll fix it soon.
bodymovin
on 13 Mar 2019
@Baboonanza thank you for such an elloborative explanation! I was stuck on this for quite some time.
I want to ask one more doubt: In shape layer file, is "it" still used?
I exported some files from adobe AE to lottie format, but instead of "it", "shapes" was used.
So that means "shapes" is the correct property?
Please correct me if I am wrong.
AnishGG
on 13 Mar 2019
'shapes' is used on the shape layer yes, but 'it' is used for the shapes within groups
Baboonanza
on 14 Mar 2019
In offsetKeyFrame.json, there is no mention of the key "n", but it is present when some animation is converted from adobe AE to lottie format.
What does "n" represent?
For example:
"n":[ "0p833_0p833_0p167_0p167" ], this was the value of n in my conversion.
Someone please clarify this.
Thanks in advance ^__^
AnishGG
on 16 Apr 2019
@AnishGG the "n" value was used on an early version for caching, but it is no longer necessary.
bodymovin
on 16 Apr 2019
Hi @bodymovin , is there any way that I can calculate a bezier curve based on the control point?
jwan3453
on 3 Jul 2019
@jwan3453 hi not sure I understand your question. Most shapes in lottie are defined as cubic bezier curves with two control points.
bodymovin
on 4 Jul 2019
Hi @bodymovin, thanks for the quick reply, I already figure out how to get the correct cubic bezier curves from json. There is new question, in Json file , the range of the attribute layers -> ks -> p -> t is [0, 100] or something else?
jwan3453
on 5 Jul 2019
If t represents time here, then according to my understanding it's range is [0, 1]
AnishGG
on 5 Jul 2019
"layers": [{
"ddd": 0,
"ind": 1,
"ty": 4,
"nm": "layer 1",
"sr": 1,
"ks": {
"o": {
"a": 1,
"k": [{
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 0,
"s": [100]
}, {
"i": {
"x": [0.833],
"y": [0.833]
},
"o": {
"x": [0.167],
"y": [0.167]
},
"t": 37,
"s": [30]
}, {
"t": 75,
"s": [100]
}],
"ix": 11
},
"r": {
"a": 1,
"k": [{
"i": {
"x": [0.408],
"y": [1]
},
"o": {
"x": [0.604],
"y": [0]
},
"t": 0,
"s": [0]
}, {
"t": 75,
"s": [198]
}],
"ix": 10
},
"p": {
"a": 1,
"k": [{
"i": {
"x": 0.387,
"y": 1
},
"o": {
"x": 0.667,
"y": 0
},
"t": 0,
"s": [114, 178, 0],
"to": [458, 4, 0],
"ti": [-452, -14, 0]
}, {
"t": 75,
"s": [846, 874, 0]
}],
"ix": 2
},
"a": {
"a": 0,
"k": [-343.333, -243.333, 0],
"ix": 1
},
"s": {
"a": 1,
"k": [{
"i": {
"x": [0.451, 0.667, 0.667],
"y": [1, 1, 1]
},
"o": {
"x": [0.794, 0.333, 0.333],
"y": [0, 0, 0]
},
"t": 0,
"s": [60, 60, 100]
}, {
"i": {
"x": [0.314, 0.667, 0.667],
"y": [1, 1, 1]
},
"o": {
"x": [0.684, 0.333, 0.333],
"y": [0, 0, 0]
},
"t": 23,
"s": [30, 30, 100]
}, {
"i": {
"x": [0.305, 0.667, 0.667],
"y": [1, 1, 1]
},
"o": {
"x": [0.604, 0.333, 0.333],
"y": [0, 0, 0]
},
"t": 43,
"s": [50, 50, 100]
}, {
"t": 58,
"s": [50, 90, 100]
}],
"ix": 6
}
},
"ao": 0,
"shapes": [{
"ty": "gr",
"it": [{
"ty": "rc",
"d": 1,
"s": {
"a": 0,
"k": [144.391, 144.391],
"ix": 2
},
"p": {
"a": 0,
"k": [0, 0],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 4
},
"nm": "rect",
"mn": "ADBE Vector Shape - Rect",
"hd": false
}, {
"ty": "fl",
"c": {
"a": 0,
"k": [0.20258029115, 0.298590626436, 0.995741421569, 1],
"ix": 4
},
"o": {
"a": 0,
"k": 100,
"ix": 5
},
"r": 1,
"bm": 0,
"nm": "fill 1",
"mn": "ADBE Vector Graphic - Fill",
"hd": false
}, {
"ty": "tr",
"p": {
"a": 0,
"k": [-345.805, -249.805],
"ix": 2
},
"a": {
"a": 0,
"k": [0, 0],
"ix": 1
},
"s": {
"a": 0,
"k": [100, 100],
"ix": 3
},
"r": {
"a": 0,
"k": 0,
"ix": 6
},
"o": {
"a": 0,
"k": 100,
"ix": 7
},
"sk": {
"a": 0,
"k": 0,
"ix": 4
},
"sa": {
"a": 0,
"k": 0,
"ix": 5
},
"nm": "transform"
}],
"nm": "rect 1",
"np": 3,
"cix": 2,
"bm": 0,
"ix": 1,
"mn": "ADBE Vector Group",
"hd": false
}],
"ip": 0,
"op": 791,
"st": 0,
"bm": 0
}],
Hi @AnishGG , I find out other threads mention that "t" may also refers to startFrame.
jwan3453
on 5 Jul 2019
yes, "t" represents frames so it's range goes from -99999 to 99999
bodymovin
on 6 Jul 2019
@jwan3453 can you please tell me how to get the correct cubic bezier curves from json ?
NiteshMalviya
on 13 Aug 2019
Related issues
processprocess
路
3Comments
samiam2017
路
3Comments
deborabm
路
3Comments
phantomboogie
路
4Comments
cpdt
路
4Comments
Most helpful comment
Well, it's a little more complicated than that. For animations there are potentially 2 curves, one for time (t) which has control points given by 'o' and 'i' and one for actual position with control points 'to' and 'ti'. The time bezier, which makes the ease in etc work, is 'normalized' (no idea if this is the correct term) in that the start point is always 0,0 and the end point 1,1. The spatial tangent is a general bezier that maps directly onto 2D space to give the final position. I'm probably not explaining this very well :)
So to get the final value for a keyframe:
And the values [0.833, 0.833], [0.167, 0.167] are just the values that seem to get put in to denote a striaght line, ie no tween. If you plot it on paper you'll see they sit on the line from 0,0 to 1,1.