Rotating two images around y axis such that their boundaries meet

Question

I have following two images:

enter image description here

And I rotate the left image (rotation point is its left edge) around y-axis at 30 degrees and the right image (rotation point is its right edge) around y-axis at -30 degrees to get following output: enter image description here

Now I want the images to stay joined together just as they were prior to rotation but as you see a gap appears in between them so I thought I can do that by shifting the left image towards right & shifting the right image towards left till the two images meet each other. I thought the following formula should give me the correct translation value but it doesn't work and something is still missing.

translationValue = (widthOfImage - (cos(30) x widthOfImage))

I believe the above formula doesn't work because the depth of the image is not being taken into consideration. How to resolve this?

Due to nature of the problem I'm trying to solve I cannot change the rotation point of left image to be its right edge & rotation point of right image to be its left edge.

Could you please post the animation code? Are you updating `CATransform3D` to animate the rotations? — dariaa, Mar 08 '14 at 09:01
no I'm not animating, the answer is to use CATransformLayer but now I'm facing some other issue — 2cupsOfTech, Mar 08 '14 at 14:51

score 0 · Answer 1 · answered Mar 08 '14 at 04:39

0

Does the imagebox change its width as a whole or is it just the image changing, if so that's your problem. As for your translationValue might be sin(30) instead of cos.

answered Mar 08 '14 at 04:39

ikdekker

3
3

the width is same for both images, sin(30) is not the solution – 2cupsOfTech Mar 08 '14 at 04:56
Did you check whether the box in which the image is held changes size? – ikdekker Mar 08 '14 at 05:01
why would it change size? its not a size issue I'm not scaling anything – 2cupsOfTech Mar 08 '14 at 05:05
It would change size because otherwise the boxes would be against each other and the images will not appear to be. – ikdekker Mar 08 '14 at 05:06
the size doesn't change, its a perspective transform, it wouldn't make sense for the size to change – 2cupsOfTech Mar 08 '14 at 05:12

score 0 · Answer 2 · answered Mar 08 '14 at 20:11

It would probably be easier to rotate the 2 views up towards the viewer from their shared edges, while also translating them back along the Z axis so the leading edges stay at the surface of the screen.

That way the 2 views would stay linked together without any gaps or overlap.

The tricky part would be getting the timing of the the Z translation right. The change in Z of the leading edges should follow a sine curve. You might need to use a keyframe animation of the Z coordinate of your views, and create a bezier curve that closely approximates a sine curve.

score 0 · Accepted Answer · edited May 23 '17 at 12:28

0

the solution is to use CATransformLayer with sublayers if you are also animating the rotation simultaneously: you make a layer parent of a sublayer so when you rotate parent the child sticks together and also rotates with the parent, then you only rotate the child back.

see this link for a code snippet: https://stackoverflow.com/a/5539618/550393

edited May 23 '17 at 12:28

Community

1
1

answered Apr 28 '14 at 18:29

2cupsOfTech

5,953
4
34
57

Rotating two images around y axis such that their boundaries meet

3 Answers3