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

Animate hole opacity #27

Open
dcorbin opened this issue Nov 21, 2023 · 6 comments
Open

Animate hole opacity #27

dcorbin opened this issue Nov 21, 2023 · 6 comments

Comments

@dcorbin
Copy link

dcorbin commented Nov 21, 2023

I would like an option to be able to animate a hole's opacity/transparency.

@stephenkopylov
Copy link
Member

Hi @dcorbin!
If I understood you correctly you could try to put any animated view (for example using reanimated) with 100% height/width inside the <RNHoleView> node and animate it's opacity

@dcorbin
Copy link
Author

dcorbin commented Nov 23, 2023

Thanks. I'll give that a try.

@dcorbin
Copy link
Author

dcorbin commented Nov 23, 2023

Hi @dcorbin! If I understood you correctly you could try to put any animated view (for example using reanimated) with 100% height/width inside the <RNHoleView> node and animate it's opacity

This had no effect. It's always possible I have used Reanimated wrong, but 1) I am using to animate other components opacity that appear above the RNHoleView, and 2) shows it changing the opacity value being used.

Further thinking on your response, and I wonder if you misunderstood my goal:
My RNHoleView has this style. ```
dimmer: {
backgroundColor: 'rgba(0, 0, 0, 0.7)',
},


Where I punch a whole in it of course, the hole is appears to have opacity 0 (I see completely through it).   What I really want it to animate the opacity where the hole is punched through, going 0 -> 0.7, move the hole, and the animate it again 0.7 -> 0.

I suspect this involves changes in the native code.

@stephenkopylov
Copy link
Member

@dcorbin frankly I still don't get what actually you want to animate

Okay see - in most common use case for this lib we have three things:

  1. Overlay (here it's blue color with 0.5 opacity
  2. Content under the hole
  3. Hole rect (it's just a geometry/mask without any color/opacity in it)

Here's a little sketch explaining list above:
Screenshot 2023-11-23 at 23 11 36

Opacity of which element you want to animate? Overlay or content under the hole?

@dcorbin
Copy link
Author

dcorbin commented Nov 23, 2023

Part 3. I want the hole #3 to start with similar look to #1, change it to look as it does in the picture. And then reverse that, though I suspect If I can do the first. Is that clearer, or I can try to create video?

@stephenkopylov
Copy link
Member

@dcorbin much clearer thanks!
Give me some time - I'll try to figure out if it possible to achieve using current technic of "cutting" geometry from the view or maybe it's possible to make some kind of workaround

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

No branches or pull requests

2 participants