Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for text range selectors #2518

Merged
merged 2 commits into from
Jul 24, 2024

Conversation

allenchen1154
Copy link
Contributor

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:

  • 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.
  • Only index-based ranges are supported - percentage-based ranges are also allowed in the spec.
  • Only ranges based on characters are supported. The spec allows characters, characters excluding spaces, words, and lines.
  • Other options like easing (allows styling characters that are partially inside the range), randomize, and 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.

Partially addresses #485.

text.range.v2.demo.mp4
text.range.demo.1.mp4

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.
@allenchen1154 allenchen1154 requested a review from gpeal July 19, 2024 23:30
Copy link

Snapshot Tests
API 23: Report Diff
API 31: Report Diff

@@ -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);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This means we need to configure the paint on every character. I haven't looked into the performance implication or further optimization.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is probably okay as long as we're not allocating new paint objects (which we're not)

Copy link
Collaborator

@gpeal gpeal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
@allenchen1154
Copy link
Contributor Author

allenchen1154 commented Jul 24, 2024

@gpeal
Added support for glyph-based text layers and percentage-based ranges. The sample looks a bit off because easing isn't supported - I believe the opacity should ideally fade out as each character leaves the range, but I couldn't find a clear spec on how to implement it. I would leave that for a follow-up.

text.range.selector.glyphs.1.mp4

Copy link

Snapshot Tests
API 23: Report Diff
API 31: Report Diff

Copy link
Collaborator

@gpeal gpeal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great! Do you know how much extra work it would take to support easing/percentages? We can land this as-is but it would be great to add if possible!

@allenchen1154
Copy link
Contributor Author

@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.

@gpeal
Copy link
Collaborator

gpeal commented Jul 24, 2024

@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

@gpeal gpeal merged commit 71c1622 into airbnb:master Jul 24, 2024
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants