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 inverted matte layers #1712

Merged
merged 3 commits into from
Aug 10, 2022
Merged

Conversation

calda
Copy link
Member

@calda calda commented Aug 10, 2022

This PR adds support for inverted matte layers to the Core Animation rendering engine. Fixes #1655.

Last time I looked in to this I couldn't figure out how to create an inverted mask from an arbitrary CALayer. All of the discussion online (example) said to render the layers into an image and then use Core Image to apply the inverted mask. This is how the Main Thread rendering engine works, which is a source of performance issues. That approach doesn't work for the Core Animation engine, since it requires manually re-rendering the image every frame.

We recently added support for blend modes (#1585), which seemed promising for something like this. The documentation for these is woefully inadequate, it even says "This property is not supported on layers in iOS" which is just no longer the case. I tried a bunch of the blend modes listed on this page and found that xor does exactly what we need here 🎉

Before (non-inverted masks) After (inverted masks!)
Simulator Screen Shot - iPhone 12 Pro Max - 2022-08-10 at 10 24 54 Simulator Screen Shot - iPhone 12 Pro Max - 2022-08-10 at 10 24 30
Simulator Screen Shot - iPhone 12 Pro Max - 2022-08-10 at 10 25 02 Simulator Screen Shot - iPhone 12 Pro Max - 2022-08-10 at 10 25 20

@calda calda force-pushed the cal--inverted-matte-layers branch from 11917d3 to 794025a Compare August 10, 2022 18:28
Copy link
Collaborator

@erichoracek erichoracek left a comment

Choose a reason for hiding this comment

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

Nice!

Comment on lines +121 to +125
// We can invert the mask layer by having a large solid black layer with the
// given mask layer subtracted out using the `xor` blend mode. When applied to the
// layer being masked, this creates an inverted mask where only areas _outside_
// of the mask layer are visible.
// https://developer.apple.com/documentation/coregraphics/cgblendmode/xor
Copy link
Collaborator

Choose a reason for hiding this comment

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

Very cool!

@calda calda merged commit 1e4419e into master Aug 10, 2022
@calda calda deleted the cal--inverted-matte-layers branch August 10, 2022 18:51
@centralmotion
Copy link

This is awesome, can't wait to try it out. Thanks for all the hard work!

calda added a commit that referenced this pull request Nov 28, 2022
calda added a commit that referenced this pull request Dec 1, 2022
MoroziOS pushed a commit to MoroziOS/tmg-lottie-ios that referenced this pull request May 22, 2024
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.

Core Animation rendering engine doesn't support MatteType.invert
3 participants