Animated viewBox - transform scale is blury #1451
Comments
|
Same with me. @harveyconnor , were you ever able to do that? |
|
@guiccbr nope I could never get it to work. The support for this repo is dead. |
|
@harveyconnor , I got something working that was a good alternative to me. Instead of using the transform prop, I used the style prop on a Style also works for |
|
Hi @guiccbr could you please share a repo with us that replicates what you have created :) |
|
I was able to resolve this by simply changing width height within SVG to 100%, wrap the SVG around the Animated.View and use useAnimatedStyle to change width and height. This way I get the smooth zoom effect on svg whereas transform scale results in pixelated zoom. My problem is I am unabe to do same with custom exiting animation, width and height manipulation not seems to be working there and transform seems to be the only option, is it? |
# Summary This PR resolves an issue raised in #1451. Currently, when a mask is used, we render the element as a bitmap (or platform equivalent), but the bitmap's size does not update accordingly with transformations. With these changes, the problem is addressed as follows: * **Android**: We utilize the original canvas layers to render the mask and element with the appropriate blending mode. * **iOS**: We create an offscreen context with the size multiplied by the screen scale and apply the original UIGraphics CTM (current transformation matrix) to the offscreen context. This ensures that the same transformations are applied as on the original context. Additionally, there is a significant performance improvement on Android as we are not creating three new Bitmaps and three new Canvases. ## Test Plan There are many ways for testing these changes, but the required ones are: * `TestsExample` app -> `Test1451.tsx` * `Example` app -> Mask section * `FabricExample` app -> Mask section ## Compatibility | OS | Implemented | | ------- | :---------: | | Android | ✅ | | iOS | ✅ | ## Preview <img width="337" alt="image" src="https://github.com/software-mansion/react-native-svg/assets/39670088/93dbae85-edbd-452a-84b0-9a50107b1361"> <img width="337" alt="image" src="https://github.com/software-mansion/react-native-svg/assets/39670088/07838dff-cb2d-4072-a2fc-5c16a76f6c33">
Hi! Thank you! |
Question
My issue is that whenever I animate my svg with a transform function it ends up being blury when I zoom in. The best alternative to this option would be to zoom in via the viewbox which will also offering a panning function.
I'm wondering if anyone has been successful in animating the viewBox?
The closest thing I've gotten to is adding an event listener on the animated value however that doesn't update the viewBox with the new scale adjustments.
Please any suggestions or recommendations are welcome! Thanks!
The text was updated successfully, but these errors were encountered: