Add support for text range selectors #2518
Conversation
This adds support for the [text range selector](https://lottiefiles.github.io/lottie-docs/text/#text-range-selector) type, which allows a [text style](https://lottiefiles.github.io/lottie-docs/text/#text-style) to be applied to a certain range of the text, defined by a start, end, and offset. The text range selector implementation currently has the following limitations: - Only text layers drawn using a Font are supported. Adding support for the glyph draw path may be possible, but I don't have a sample Lottie file. - Only one text range is currently supported per text layer, as the parser [drops all other entries in the array](https://github.com/airbnb/lottie-android/blob/c4cb2254eca3c70199f1de5e39e3872c8c42e473/lottie/src/main/java/com/airbnb/lottie/parser/LayerParser.java#L194-L196). - Only index-based ranges are supported - percentage-based ranges are also allowed in the spec. - Only ranges based on characters are supported. The [spec](https://lottiefiles.github.io/lottie-docs/constants/#text-based) allows characters, characters excluding spaces, words, and lines. - Other options like easing (allows styling characters that are partially inside the range), randomize, and [shape](https://lottiefiles.github.io/lottie-docs/constants/#text-shape) of the range are not currently supported. This also adds support for the opacity as an animatable text property which is applied multiplicatively with the transform opacity and the parent's alpha.
| @@ -459,7 +535,8 @@ private void drawGlyph(Path path, Paint paint, Canvas canvas) { | |||
| canvas.drawPath(path, paint); | |||
| } | |||
|
|
|||
| private void drawCharacterFromFont(String character, DocumentData documentData, Canvas canvas) { | |||
| private void drawCharacterFromFont(String character, DocumentData documentData, Canvas canvas, int indexInDocument, int parentAlpha) { | |||
| configurePaint(documentData, parentAlpha, indexInDocument); | |||
There was a problem hiding this comment.
This means we need to configure the paint on every character. I haven't looked into the performance implication or further optimization.
There was a problem hiding this comment.
This is probably okay as long as we're not allocating new paint objects (which we're not)
There was a problem hiding this comment.
Thanks for doing this! Try out this project/json file to see if you can get glyphs working. Hopefully it's a small lift
Glyphs.zip
| @@ -459,7 +535,8 @@ private void drawGlyph(Path path, Paint paint, Canvas canvas) { | |||
| canvas.drawPath(path, paint); | |||
| } | |||
|
|
|||
| private void drawCharacterFromFont(String character, DocumentData documentData, Canvas canvas) { | |||
| private void drawCharacterFromFont(String character, DocumentData documentData, Canvas canvas, int indexInDocument, int parentAlpha) { | |||
| configurePaint(documentData, parentAlpha, indexInDocument); | |||
There was a problem hiding this comment.
This is probably okay as long as we're not allocating new paint objects (which we're not)
Also adds support for ranges specified as a percentage. Note that the provided sample has easing values included, which we don't support yet.
|
@gpeal text.range.selector.glyphs.1.mp4 |
|
@gpeal I'd like to, but I don't have a reference for how the easing parameters should affect the opacity and other style properties. I was referring these LottieFiles docs but they don't provide any additional information. |
I created #2522 to track that as a potential follow up. I'll take a look if I can find some time for it |
This adds support for the text range selector type, which allows a text style to be applied to a certain range of the text, defined by a start, end, and offset.
The text range selector implementation currently has the following limitations:
This also adds support for the opacity as an animatable text property which is applied multiplicatively with the transform opacity and the parent's alpha.
Partially addresses #485.
text.range.v2.demo.mp4
text.range.demo.1.mp4