1

I have been trying to achieve the animation in this link: http://www.visa.com/rio2016/na-en/#!gallery on an iPad. Try opening this link on and iPad and you'll see.

Basically, its a wrapped(360 degree/Infinite) horizontal list. If the user moves in circle the list on the device should follow the movement.

I know that JS uses webkitCompassHeading to calculate the compass readings.

I tried using the accelerometer but the issue is the deceleration factor is quite small. Lets say I am am moving in right circular motion, list scrolls backwards or from right to left, everything is fine. I stop and start moving in reverse, the deceleration is there but for a very short time. So for the reverse movement, only 1 or 2 carousel items gets scrolled forward or left to right and again since the accelerometer picked the +ve acceleration, the list starts moving in backwards or from right to left direction.

Tried it with magnetometer, by storing the last angle of rotation and seeing if the new one has changed by 6 or 7 degrees but the values are too shaky.

nr5
  • 4,228
  • 8
  • 42
  • 82
  • Have you tried 3rd party SDKs ? Like https://github.com/robbykraft/Panorama Or http://stackoverflow.com/questions/3763978/360-panorama-libraries-for-ios – NeverHopeless Sep 19 '16 at 12:49
  • Yes I saw it, but this solves half of my problem for revolving background. But since its openGL and my knowledge is not that sound on openGL to wrap my scrolling list around it, so I didn't go for it. Although I have used the magnitude of device's magnetic field to achieve something really close. Here is the link: https://github.com/userException/TestCarousel . The issue is the magnitude only goes from 0 to 3.40 in a 180 degree movement and goes back to 0 from there. Please have a look if I am missing something – nr5 Sep 19 '16 at 18:20

0 Answers0