Lottie-ios: Animation with Text alignment problem

Created on 1 Oct 2019 · 5Comments · Source: airbnb/lottie-ios

Check these before submitting:

[x] The issue doesn't involve an Unsupported Feature
[x] This issue isn't related to another open issue

This issue is a:

[x] Non-Crashing Bug (Visual or otherwise)
[ ] Crashing Bug
[ ] Feature Request
[ ] Regression (Something that once worked, but doesn't work anymore)

Which Version of Lottie are you using?

Lottie 3.0

What Platform are you on?

[ ] MacOS
[x] iOS

What Language are you in?

[x] Swift
[ ] Objective-C

Expected Behavior

Снимок экрана 2019-10-01 в 16 15 26

Actual Behavior

Снимок экрана 2019-10-01 в 16 14 21

Code Example

 let lipsAnimation = Animation.named("data_no_glyph")
 animationView.contentMode = .scaleAspectFit
 animationView.animation = lipsAnimation
 animationView.play()

Animation JSON

bubble_animation_example.zip

Here's related issues, which were closed:

https://github.com/airbnb/lottie-ios/issues/886
https://github.com/airbnb/lottie-ios/issues/905

bug

Source

seidju

👀1

All 5 comments

{"ty":"mm","mm":1,"nm":"Merge Paths 1","hd":false}

armin1143 on 4 Nov 2019

Added to my todo

buba447 on 25 Nov 2019

👀3

Noted this issue as well, here's an animation JSON which also demonstrates it.

Text Insert: is off the screen (sits on top of screen instead of bottom).

{
   "v":"5.5.8",
   "fr":30,
   "ip":0,
   "op":450,
   "w":1920,
   "h":1080,
   "nm":"01_Intro_Insert_02",
   "ddd":0,
   "assets":[

   ],
   "fonts":{
      "list":[
         {
            "origin":0,
            "fPath":"",
            "fClass":"",
            "fFamily":"Canela",
            "fWeight":"",
            "fStyle":"Regular",
            "fName":"Canela-Regular",
            "ascent":71.8994140625
         }
      ]
   },
   "layers":[
      {
         "ddd":0,
         "ind":1,
         "ty":5,
         "nm":"My art is about bringing out the personality of my subjects, an",
         "sr":1,
         "ks":{
            "o":{
               "a":0,
               "k":100,
               "ix":11
            },
            "r":{
               "a":0,
               "k":0,
               "ix":10
            },
            "p":{
               "a":0,
               "k":[
                  79,
                  611.722,
                  0
               ],
               "ix":2
            },
            "a":{
               "a":0,
               "k":[
                  0,
                  0,
                  0
               ],
               "ix":1
            },
            "s":{
               "a":0,
               "k":[
                  100,
                  100,
                  100
               ],
               "ix":6
            }
         },
         "ao":0,
         "t":{
            "d":{
               "k":[
                  {
                     "s":{
                        "sz":[
                           1217.109375,
                           979.173889160156
                        ],
                        "ps":[
                           0,
                           0
                        ],
                        "s":70,
                        "f":"Canela-Regular",
                        "t":"<TEXT0>",
                        "j":0,
                        "tr":10,
                        "lh":82,
                        "ls":0,
                        "fc":[
                           1,
                           1,
                           1
                        ]
                     },
                     "t":0
                  }
               ]
            },
            "p":{

            },
            "m":{
               "g":1,
               "a":{
                  "a":0,
                  "k":[
                     0,
                     0
                  ],
                  "ix":2
               }
            },
            "a":[
               {
                  "nm":"Animator 1",
                  "s":{
                     "t":0,
                     "xe":{
                        "a":0,
                        "k":0,
                        "ix":7
                     },
                     "ne":{
                        "a":0,
                        "k":0,
                        "ix":8
                     },
                     "a":{
                        "a":0,
                        "k":100,
                        "ix":4
                     },
                     "b":1,
                     "rn":0,
                     "sh":1,
                     "r":1
                  },
                  "a":{
                     "a":{
                        "a":0,
                        "k":[
                           0,
                           0,
                           0
                        ],
                        "ix":1
                     },
                     "p":{
                        "a":0,
                        "k":[
                           0,
                           -30,
                           0
                        ],
                        "ix":2
                     },
                     "s":{
                        "a":0,
                        "k":[
                           100,
                           100,
                           100
                        ],
                        "ix":3
                     },
                     "sk":{
                        "a":0,
                        "k":0,
                        "ix":4
                     },
                     "sa":{
                        "a":0,
                        "k":0,
                        "ix":5
                     },
                     "r":{
                        "a":0,
                        "k":0,
                        "ix":8
                     },
                     "o":{
                        "a":0,
                        "k":0,
                        "ix":9
                     }
                  }
               },
               {
                  "nm":"Animator 2",
                  "s":{
                     "t":0,
                     "xe":{
                        "a":0,
                        "k":100,
                        "ix":7
                     },
                     "ne":{
                        "a":0,
                        "k":0,
                        "ix":8
                     },
                     "a":{
                        "a":0,
                        "k":100,
                        "ix":4
                     },
                     "b":1,
                     "rn":0,
                     "sh":3,
                     "o":{
                        "a":1,
                        "k":[
                           {
                              "i":{
                                 "x":[
                                    0.415
                                 ],
                                 "y":[
                                    1
                                 ]
                              },
                              "o":{
                                 "x":[
                                    0.317
                                 ],
                                 "y":[
                                    0
                                 ]
                              },
                              "t":20,
                              "s":[
                                 -100
                              ]
                           },
                           {
                              "t":101,
                              "s":[
                                 40
                              ]
                           }
                        ],
                        "ix":3
                     },
                     "r":1
                  },
                  "a":{
                     "a":{
                        "a":0,
                        "k":[
                           0,
                           0,
                           0
                        ],
                        "ix":1
                     },
                     "p":{
                        "a":0,
                        "k":[
                           0,
                           30,
                           0
                        ],
                        "ix":2
                     },
                     "s":{
                        "a":0,
                        "k":[
                           100,
                           100,
                           100
                        ],
                        "ix":3
                     },
                     "sk":{
                        "a":0,
                        "k":0,
                        "ix":4
                     },
                     "sa":{
                        "a":0,
                        "k":0,
                        "ix":5
                     },
                     "r":{
                        "a":0,
                        "k":0,
                        "ix":8
                     },
                     "o":{
                        "a":0,
                        "k":0,
                        "ix":9
                     }
                  }
               },
               {
                  "nm":"Animator 3",
                  "s":{
                     "t":0,
                     "xe":{
                        "a":0,
                        "k":100,
                        "ix":7
                     },
                     "ne":{
                        "a":0,
                        "k":0,
                        "ix":8
                     },
                     "a":{
                        "a":0,
                        "k":100,
                        "ix":4
                     },
                     "b":1,
                     "rn":0,
                     "sh":3,
                     "o":{
                        "a":1,
                        "k":[
                           {
                              "i":{
                                 "x":[
                                    0.415
                                 ],
                                 "y":[
                                    1
                                 ]
                              },
                              "o":{
                                 "x":[
                                    0.317
                                 ],
                                 "y":[
                                    0
                                 ]
                              },
                              "t":20,
                              "s":[
                                 -100
                              ]
                           },
                           {
                              "t":101,
                              "s":[
                                 40
                              ]
                           }
                        ],
                        "ix":3
                     },
                     "r":1
                  },
                  "a":{
                     "a":{
                        "a":0,
                        "k":[
                           0,
                           0,
                           0
                        ],
                        "ix":1
                     },
                     "p":{
                        "a":0,
                        "k":[
                           0,
                           0,
                           0
                        ],
                        "ix":2
                     },
                     "s":{
                        "a":0,
                        "k":[
                           100,
                           100,
                           100
                        ],
                        "ix":3
                     },
                     "sk":{
                        "a":0,
                        "k":0,
                        "ix":4
                     },
                     "sa":{
                        "a":0,
                        "k":0,
                        "ix":5
                     },
                     "r":{
                        "a":0,
                        "k":0,
                        "ix":8
                     },
                     "o":{
                        "a":0,
                        "k":100,
                        "ix":9
                     }
                  }
               }
            ]
         },
         "ip":20,
         "op":450,
         "st":20,
         "bm":0
      }
   ],
   "markers":[

   ]
}