iOS 360 degree rotation animation on iPad

[leftblank]

Hi,

I'm currently looking into some options for a project involving an iPad application. I plan to have a full screen animation of a scene, in which an object can be rotated 360 degrees around its axis using swipe gestures. The object would speed up and slow down in proportion to the speed of the gesture, and would carry on moving but decelerate when the user releases their finger from the screen.

I would ideally like to use very high quality imagery (2048 x 1536). Would the best course of action be to render it as a MP4 video and have the gesture recognisers control the playback position? I prototyped this using a stock video clip and the tracking on the video was very laggy.. ideally the movement would be very fluid and smooth.

I also considered rendering out the frames as separate high resolution images, but there would be a good few seconds worth of footage to load into memory, and storing it all in RAM isn't really an option.

Does anybody have any advice on how this might be best achieved?

 

[larswik]

I just picked up a book to start learning about OpenGL ES for the ios. I too am looking at creating objects that I can spin on the screen. They will not be frames to a movie but the concept is similar.

 

[samdev]

Hi,

I'm currently looking into some options for a project involving an iPad application. I plan to have a full screen animation of a scene, in which an object can be rotated 360 degrees around its axis using swipe gestures. The object would speed up and slow down in proportion to the speed of the gesture, and would carry on moving but decelerate when the user releases their finger from the screen.

I would ideally like to use very high quality imagery (2048 x 1536). Would the best course of action be to render it as a MP4 video and have the gesture recognisers control the playback position? I prototyped this using a stock video clip and the tracking on the video was very laggy.. ideally the movement would be very fluid and smooth.

I also considered rendering out the frames as separate high resolution images, but there would be a good few seconds worth of footage to load into memory, and storing it all in RAM isn't really an option.

Does anybody have any advice on how this might be best achieved?

If you're just swiping a movie back and forth, then I would think you would have to use two movies,
for smooth forward and backward playing. Movie frames aren't encoded to run backwards, to my knowledge.
Like one frame is a complete frame, and the next couple of frames are just deltas based off the
last complete frame. So, there's probably extra decoding work being done when running movies backwards.

 

[PhoneyDeveloper]

You probably need images of smaller dimensions. 600x600 or 800x800. You'll want to investigate different number of degrees between images. Every 4, 6, 8 or 10 degrees between images should be looked at.

Having 360 fullscreen images will be slow.

I have an app that includes something like this. Something like a globe that spins by itself using timer animation or it can be manipulated with a swipe or pinch to zoom. The numbers I mention above are based on my implementation of that app.

 

[Duncan C]

Hi,

I'm currently looking into some options for a project involving an iPad application. I plan to have a full screen animation of a scene, in which an object can be rotated 360 degrees around its axis using swipe gestures. The object would speed up and slow down in proportion to the speed of the gesture, and would carry on moving but decelerate when the user releases their finger from the screen.

I would ideally like to use very high quality imagery (2048 x 1536). Would the best course of action be to render it as a MP4 video and have the gesture recognisers control the playback position? I prototyped this using a stock video clip and the tracking on the video was very laggy.. ideally the movement would be very fluid and smooth.

I also considered rendering out the frames as separate high resolution images, but there would be a good few seconds worth of footage to load into memory, and storing it all in RAM isn't really an option.

Does anybody have any advice on how this might be best achieved?

Gak! No. Anything that involves many frames of high-res graphics is going to be slow and use gobs of memory.

Core Animation is perfect for this. Set up an image view and then use a UIView animation method to change the view's transform. Assuming you have an image view called myImageView, your code might look something like this:

- (void) rotateImageView;
  static CGFloat rotation = 0;
  [UIView animateWithDuration: .125
    delay: 0
    options: UIViewAnimationOptionCurveLinear
    animations: 
    ^{
      rotation += M_PI/4;
      myImageView.transform = CGAffineTransformMakeRotation(rotation);
    }
    completion:
   ^{
      [self rotateImageView];
    }
];

That code is written to rotate the image continuously. It's just intended to give you an idea of how you can do smooth animation.

Real animation code would calculate a new rotation angle based on the user's gestures and then rotate the image view to match the new rotation. You might not even need animation, and could instead just change the rotation transform to the new value as the user drags.

BTW, there is no reason to use images bigger than the screen, and very good reasons not to do so. For non-retina iPads, you should not use images bigger than 1024/768 pixels. You can have retina versions of those images that are 2048/1536 pixels, but those should be optional high-res versions who's filename have the "@2x" suffix on their names.

Those image sizes are really only required if you're totally filling the screen, with no status bar, navigation bar, tab bar, or what-have-you taking up screen space.

There is a sample project on Github called something like singleFingerGestureRecognizer that shows how to rotate image views using a 1 finger gesture that spins the image around it's axis. That would be a very good starting point for you, I suspect. I think it's called KTOneFingerRotationGestureRecognizer

 

[jnoxx]

I do the same in my CSS Tribute app, you can spin around 3D models. But I used an OBJLoader, which I adjusted by adding swipe recognisers to spin the model around..
I've also done stuff like you said for an application around food, which everytime you want to check a 360 view of the food or fruit or whatever, it'll download 20 images, which you will switch around when swiping, it's smooth, and user barely notices anyhting, only the decelerating etc is on another level.. I do have something for that, but only for 2D animation, and also from topview, like SPin the bottle or a Spin the wheel to win something.. That's a component called ANSpinWheel, which can be found on github opensource, https://github.com/unixpickle/SpinWheel