Lottie-ios: subview frames are not correct
Check these before submitting:
- [x] Updated to the latest (2.1.3) version of Lottie
- [x] The issue doesnt involve and Unsupported Feature
- [x] This issue isnt related to another open issue
This issue is a
- [x] Non-Crashing (Visual or otherwise) Bug
- [ ] Crashing Bug
- [ ] Feature Request
- [ ] Regression (Something that once worked doesnt work anymore)
What Platform are you on?
- [x] iOS (Specify Platform Version)
- [ ] MacOS (Specify Platform Version)
Expected Behavior
The subview should be added to the layer in the right position. The current behavior is that the subview is added to (0,0) of the superview.
Actual Behavior
Code Example
let animationView = LOTAnimationView(name: "android_text_test")
let textLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 375, height: 80))
textLabel.text = "Hello World"
textLabel.font = UIFont.systemFont(ofSize: 13)
animationView.addSubview(textLabel, toLayerNamed: "parent", applyTransform: false)
animationView.frame = self.view.bounds
self.view.addSubview(animationView)
animationView.loopAnimation = true
animationView.play()
Animation JSON
json
{
"v":"4.10.1",
"fr":29.9700012207031,
"ip":0,
"op":75.0000030548126,
"w":375,
"h":667,
"nm":"Comp 1",
"ddd":0,
"assets":[
{
"id":"image_0",
"w":226,
"h":136,
"u":"images/",
"p":"stars_pair.png"
}
],
"fonts":{
"list":[
{
"origin":0,
"fPath":"",
"fClass":"",
"fFamily":"Roboto",
"fWeight":"",
"fStyle":"Bold",
"fName":"Roboto-Bold",
"ascent":75
}
]
},
"layers":[
{
"ddd":0,
"ind":1,
"ty":2,
"nm":"stars_pair.png",
"cl":"png",
"refId":"image_0",
"sr":1,
"ks":{
"o":{
"a":0,
"k":100,
"ix":11
},
"r":{
"a":0,
"k":0,
"ix":10
},
"p":{
"a":1,
"k":[
{
"i":{
"x":0.833,
"y":0.833
},
"o":{
"x":0.167,
"y":0.167
},
"n":"0p833_0p833_0p167_0p167",
"t":15,
"s":[
187,
738,
0
],
"e":[
187,
662,
0
],
"to":[
0,
-12.6666669845581,
0
],
"ti":[
0,
12.6666669845581,
0
]
},
{
"t":25.0000010182709
}
],
"ix":2
},
"a":{
"a":0,
"k":[
113,
68,
0
],
"ix":1
},
"s":{
"a":0,
"k":[
100,
100,
100
],
"ix":6
}
},
"ao":0,
"ip":0,
"op":90.0000036657751,
"st":0,
"bm":0
},
{
"ddd":0,
"ind":2,
"ty":4,
"nm":"Shape Layer 1",
"sr":1,
"ks":{
"o":{
"a":0,
"k":0,
"ix":11
},
"r":{
"a":0,
"k":0,
"ix":10
},
"p":{
"a":1,
"k":[
{
"i":{
"x":0.667,
"y":1
},
"o":{
"x":0.333,
"y":0
},
"n":"0p667_1_0p333_0",
"t":15,
"s":[
110,
375,
0
],
"e":[
110,
355,
0
],
"to":[
0,
-3.33333325386047,
0
],
"ti":[
0,
3.33333325386047,
0
]
},
{
"t":25.0000010182709
}
],
"ix":2
},
"a":{
"a":0,
"k":[
-186,
-72,
0
],
"ix":1
},
"s":{
"a":0,
"k":[
100,
100,
100
],
"ix":6
}
},
"ao":0,
"shapes":[
{
"ty":"gr",
"it":[
{
"ty":"rc",
"d":1,
"s":{
"a":0,
"k":[
153.976,
30
],
"ix":2
},
"p":{
"a":0,
"k":[
0,
0
],
"ix":3
},
"r":{
"a":0,
"k":0,
"ix":4
},
"nm":"Rectangle Path 1",
"mn":"ADBE Vector Shape - Rect",
"hd":false
},
{
"ty":"st",
"c":{
"a":0,
"k":[
0.615685975318,
0.615685975318,
0.615685975318,
1
],
"ix":3
},
"o":{
"a":0,
"k":100,
"ix":4
},
"w":{
"a":0,
"k":0,
"ix":5
},
"lc":1,
"lj":1,
"ml":4,
"nm":"Stroke 1",
"mn":"ADBE Vector Graphic - Stroke",
"hd":false
},
{
"ty":"fl",
"c":{
"a":0,
"k":[
1,
0,
0,
1
],
"ix":4
},
"o":{
"a":0,
"k":100,
"ix":5
},
"r":1,
"nm":"Fill 1",
"mn":"ADBE Vector Graphic - Fill",
"hd":false
},
{
"ty":"tr",
"p":{
"a":0,
"k":[
-109,
-57
],
"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":"Rectangle 1",
"np":3,
"cix":2,
"ix":1,
"mn":"ADBE Vector Group",
"hd":false
}
],
"ip":0,
"op":90.0000036657751,
"st":0,
"bm":0
},
{
"ddd":0,
"ind":3,
"ty":5,
"nm":"Hello World",
"parent":2,
"sr":1,
"ks":{
"o":{
"a":1,
"k":[
{
"i":{
"x":[
0.667
],
"y":[
1
]
},
"o":{
"x":[
0.333
],
"y":[
0
]
},
"n":[
"0p667_1_0p333_0"
],
"t":15,
"s":[
0
],
"e":[
100
]
},
{
"t":25.0000010182709
}
],
"ix":11
},
"r":{
"a":0,
"k":0,
"ix":10
},
"p":{
"a":1,
"k":[
{
"i":{
"x":0.667,
"y":1
},
"o":{
"x":0.333,
"y":0
},
"n":"0p667_1_0p333_0",
"t":15,
"s":[
-296,
-72,
0
],
"e":[
-296,
-92,
0
],
"to":[
0,
-3.33333325386047,
0
],
"ti":[
0,
3.33333325386047,
0
]
},
{
"t":25.0000010182709
}
],
"ix":2
},
"a":{
"a":0,
"k":[
-109,
21,
0
],
"ix":1
},
"s":{
"a":0,
"k":[
100,
100,
100
],
"ix":6
}
},
"ao":0,
"t":{
"d":{
"k":[
{
"s":{
"sz":[
378,
36
],
"ps":[
-189,
21
],
"s":40,
"f":"Roboto-Bold",
"t":"Hello World",
"j":2,
"tr":0,
"lh":48,
"ls":0,
"fc":[
0.08,
0.14,
0.21
]
},
"t":0
}
]
},
"p":{
},
"m":{
"g":1,
"a":{
"a":0,
"k":[
0,
0
],
"ix":2
}
},
"a":[
]
},
"ip":0,
"op":90.0000036657751,
"st":0,
"bm":0
}
]
}
RishabhTayal
All 8 comments
animationView.addSubview(textLabel, toLayerNamed: "parent", applyTransform: false) should be
animationView.addSubview(textLabel, toLayerNamed: "parent", applyTransform: true)
When applyTransform is false the textlabel is only masked by the layername.
buba447
on 28 Sep 2017
@buba447 I am sorry, I am infact using animationView.addSubview(textLabel, toLayerNamed: "parent", applyTransform: true). I changed it to false to see if it changes anything. Same issue with true flag.
RishabhTayal
on 28 Sep 2017
Any update on this?
RishabhTayal
on 28 Sep 2017
@buba447 Don't mean to bug you. But do you have any update on this?
RishabhTayal
on 27 Nov 2017
@RishabhTayal Sorry I havent had a chance to look into this further! I plan on spending a few days working on these lottie bugs after next week! I will keep you updated. Sorry again thank you for your patience!
buba447
on 27 Nov 2017
@buba447 Thanks for responding. This has been issue for me for almost all of my json files and for all of the layers. It would be really helpful if you could just clarify if this issue could be in json/AEP file or in the SDK. If it's in json or AEP then we can start looking at our end first.
RishabhTayal
on 28 Nov 2017
@buba447 Looks like I was able to find out in which specific case this issue is happening but I am still unclear to why it's happening and what can be done to show the right position.
I had an image in the AEP layer. The image was setup as shape layer. This was causing the wrong position. When we switched from shape layer to image layer, the position was showing correctly.
But now the issue still remains for the text because Lottie doesn't support dynamic text layer yet that's why we HAVE to have the text as shape layer.
Does this make sense? I am not the designer so I might be using some wrong terminology.
Could you please point us in the right direction to as what should be the fix for text(shape) layer position?
RishabhTayal
on 4 Dec 2017
Lottie has been completely rewritten in Swift as of 3.0 (https://github.com/airbnb/lottie-ios/pull/777)
I am closing all issues prior to this release to reduce the noise. If you continue to run into this issues or any issue with Lottie 3.0 please open a new ticket
For continued support of Lottie Objective-c please point to this branch: https://github.com/airbnb/lottie-ios/tree/lottie/objectiveC
buba447
on 17 Mar 2019
Related issues
albertoNovo
路
3Comments
petoye
路
3Comments
webdale
路
5Comments
CentrumGuy
路
4Comments
zhangjunmax
路
3Comments