Rotated text not rendered correctly

[JamieJuliusSundaySky]

The attached zip contains:

• JSON input
• Image of expected output
• Image of actual output

The composition contains two text layers "AB" and "CD". One is point text and one is paragraph text. They both have their Rotation property animated. The expected result is that each text sequence rotates around the anchor point, which is at the bottom left of each text sequence. The actual result is that each glyph is being rotated individually. This happens with both point text and paragraph text alike. ABCDRotate.zip

[JamieJuliusSundaySky]

Note that in the example above the text is rendered via the "useTextGlyphs" route. When going through the "Font" route all is well as the rotation is applied to the canvas as a whole and not to the individual paths:

if (!lottieDrawable.useTextGlyphs()) {
  canvas.setMatrix(parentMatrix);
}

[liukaichi]

Happens with me too. Any workarounds?

Edit: Actually, I just ended up converting the text to shapes, and now it works perfectly!

[azchohfi]

This JSON is not even working anymore. That's because on your file, "sw" is 0.00999999977648 but we are reading it as an int. @gpeal, should this be read as a double? The only usage of this variable is already being multiplied by the scale so it is returning a float anyway.

[azchohfi]

Digging the source, I've found that Lottie Web uses only the first shape from the character it renders (when rendering glyphs): https://github.com/airbnb/lottie-web/blob/master/player/js/elements/svgElements/SVGTextElement.js#L127 I don't know why, but some files have more than one shape, like this one: https://github.com/airbnb/lottie-android/blob/master/LottieSample/src/main/assets/lottiefiles/cancel_button.json They render like this: Maybe I should open a new issue for this...

[gpeal]

@azchohfi Update your bodymovin plugin

[axitasavani]

Which BodyMovin Plugin Version used to make animation For Lottie? @gpeal

[gpeal]

@axitasavani Use whatever the latest version is. The comment above is from a version that is many years old.

[Pavel87]

The attached zip contains:

• JSON input
• Image of expected output
• Image of actual output

The composition contains two text layers "AB" and "CD". One is point text and one is paragraph text. They both have their Rotation property animated. The expected result is that each text sequence rotates around the anchor point, which is at the bottom left of each text sequence. The actual result is that each glyph is being rotated individually. This happens with both point text and paragraph text alike. ABCDRotate.zip

I know this has been few years but what is the solution to this issue? @JamieJuliusSundaySky

[Pavel87]

Ok got the solution... like said above we have to avoid rendering text as glyphs but rather we need to render as font:

if (!lottieDrawable.useTextGlyphs()) { canvas.setMatrix(parentMatrix); }

If we just set the text delegate then the rotation is working as expected.

binding.lottie.setTextDelegate(TextDelegate(binding.lottie))