2

I am attempting to make a rectangle in an svg rotate in place (so around its middle), however this has proven more difficult than I thought. The rectangle instead moves in a weird pattern. This is probably because the rotate origin is wrong however I have not found a way to fix this myself.

I have created an expo for this to demonstrate the problem: https://snack.expo.io/SJqTgyu0N

I would like to keep the style/transition on the rect itself and not move it to the AnimatedG component.

ApplePearPerson
  • 4,209
  • 4
  • 21
  • 36
  • And what exact animation are you attempting to do? – Jose Vf Jun 07 '19 at 14:31
  • Sound like indeed the problem is the rotation origin which is based on the (0,0) point of the viewport. (top, left) – hugomosh Jun 07 '19 at 15:06
  • @JoseVf I would likethe rect to rotate in place (so around its own middle). – ApplePearPerson Jun 11 '19 at 08:54
  • @ApplePearPerson What's the reason you don't want to apply the transition to the AnimatedG component? I achieved the desired behavior applying the transition to that component (https://snack.expo.io/HkMGDXa0E) – Jose Vf Jun 11 '19 at 13:10
  • @JoseVf My ultimate goal would be to have for example 10 rects next to each other all rotate in place. I can achieve this with 1 in web so I was hoping to keep a similar SVG style in native. So if the transition were on the then either all 10 rects would transform around the same origin or i'd need to create an per rect. Would it matter much if I create one per rect? – ApplePearPerson Jun 11 '19 at 13:15
  • @ApplePearPerson That could be the easiest solution right now, and you can create a component instead of copy-pasting the same code everywhere. Trying to rotate the Rect produces a really weird behavior. If you rather I can provide an answer with that solution (one AnimatedG per Rect). – Jose Vf Jun 11 '19 at 15:29
  • @JoseVf no thats alright I think I can manage that from your expo. If you put it as an answer I'll accept it. – ApplePearPerson Jun 12 '19 at 06:32

0 Answers0