Is there any way to control the speed of the page turn animation in my UIPageViewController? Specifically, slow the animation down when someone swipes really fast. Slow and medium swipes look great but when you swipe fast, the page turn animation looks more like a horizontal slide transition than an actual page turn.
self.pageController = [[UIPageViewController alloc]
initWithTransitionStyle:UIPageViewControllerTransitionStylePageCurl
navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal
options: options];
Thanks!
The only time I have ever seen the duration of the page turning controlled is by using cocos2d http://www.cocos2d-iphone.org/about
"cocos2d for iPhone is a framework for building 2D games, demos, and other graphical/interactive applications. It is based on the cocos2d design: it uses the same concepts, but instead of using python it uses objective-c."
CartoonSmart http://www.cartoonsmart.com/ makes use of it in a Starter Kit for eBooks where they set a transitionWithDuration option, a snippet of which is shown below.
-(void) doAfterChangingPages {
[[BookData sharedData] turnPage];
CCTransitionPageTurn* transition = [CCTransitionPageTurn transitionWithDuration:2 scene:[ThePage scene] backwards:NO];
[[CCDirector sharedDirector] replaceScene:transition];
}
There is not actually a swipe gesture, although it will seem that there is, simply a touch gesture in a certain area on the outside edge of the page causes the transition. The speed is a constant so that no matter how slow or fast a gesture is performed, the page always turns at the speed as set by the option.
Related
I have successfully implemented a working UIScrollView layer on top of Cocos2d using this fantastic tutorial:
http://bitbattalion.com/2011/09/uikit-uiscrollview-and-cocos2d/
However, the scroll view sporadically becomes sluggish and choppy, including almost always upon loading the scene. When it happens, the scrolling and is no longer is able to be flicked up or down with any sort of variable velocity. It also loses all of it's bounce and just stay partially of screen until the next touch is registered.
The weird thing is though, that if I simply pull down my Notification Center, it fixes the scroll view every time. The scrolling all of a sudden becomes perfectly fluid and the edges bounce beautifully into place.
What is happening here?
Instruments may help to tackle the problem. Run using the CoreAnimation Tool so you can get a good handle on where you might be experiencing the drop in frame rate. You'll need to have your device connected to run the CoreAnimation tool.
This tutorial is also available at http://mobileoverlord.com/instruments-optimizing-core-animation/
Select Profile from the build scheme.
Select the CoreAnimation Profiling Tool
When the tool is running scroll around in your scroll view and keep an eye on frame rate. 60 is great.
If you need to dial in on it any more you can turn on Color Blended Layers from the Debug Options in the Instruments Panel View(Menu) -> Instruments
Without Color Blended Layers (Left)
With Color Blended Layers (Right)
The basic rule of thumb here is, the more red you see the less optimized the view is for the animation. Although, you don't want to remove all red either, %50 is about right.
I'm developing an application for iPad.
I want to make nice animations so that I can beautify my application.
For example, there are 4 main buttons/images in a view.
When tapping on one of them, a few more buttons/images will branch out.
It's like the 'parent button' will branch out to few 'child buttons'.
How are these kind of animations done?
Are there any good references or code snippets to refer to?
Thanks.
A good stating point would be the Core Animation demo's here:
https://github.com/neror/CA360
Run them in the iOS Simulator and checkout the code that creates the magic.
UIView animations would also be suitable for your example, and are a little easier to implement. There is a nice tutorial here:
http://www.raywenderlich.com/2454/how-to-use-uiview-animation-tutorial
Search on the term "Core Animation iOS" on your favorite search engine. You'll find information from Apple's Developer Central site, particularly the Core Animation Guide and Cookbook.
There are actually 2 main methods.
One is to use Core Animation, if it contains your desired path and animation.
The other is to use an animation game loop, where the app periodically calls a routine to redraw the view every frame time. An NSTimer or CADisplayLink can periodically (say at 24 or 30 or 60 Hz) call a routine doing a setNeedsDisplay, which then causes the view's drawRect to be called, etc. The some other periodic code can change some state (moving some X Y button positions, etc.) during or between each frame to provide the appearance of movement or other animation effect, when the view is redrawn. Or OpenGL can be used to redraw some animated 3D world as things move. You can even have each frame change in response to user input. This is the most flexible way to animate, and allows you to customize animations in ways that are impossible for Core Animation, but it uses more power and can be so CPU intensive as to be a lot slower than Core Animation as well.
I am developing a game for iPhone and I came across a question whether this can be done using UIAnimation or I have to switch to OpenGL.
If you see the picture above, you can realize there is a rectangle (it will have background image) having many holes in it. User is supposed to touch on holes and initiate the animation. The holes are actually on the image and are not some view. Do you know any article or tutorial I need to read in order to understand this can be done using UIAnimation?
It's more like chess. When you tap a hole, there is a view placed and moved at z-axis and then when you press the other hole, the view is moved to that hole and so on.
I believe it can be done with UIViews too. The holes can be made by using an image with "transparent" holes in it. You can place this UIView on top of a background image(if required). When touches are detected, you can animate another view on top of this view using addSubview:. You can keep this other view outside the screen bounds initially so that the animation seems like a sliding animation.
yes UIView is also an option in your case. if you feel that you will use high quality lots of graphic and will do lots of animation stuff at once on the screen, openGL will be the best or perhaps the gane you are making is a 2d game so you must consider COCOS2D "http://www.cocos2d-iphone.org/" for kick starting your game you'll surely get many effects and other glittering stuff with it. and bes of all it is openGL based..!! Performance will be too high for you..!!
Best of luck..!!
In my app, I drew a graph using Core Graphics (inside a view, inside a view). Not a graphing calc app though, it graphs patient data and marks it every six months, and it is larger than the screen, so the user needs to have some way to move around. I was wondering if there is an easy way to implement pinch to zoom, or to flick with momentum. I was planning on just using UITouch to get notified when these actions were performed, but it doesnt really give you a lot of information. For example, all you get with the pinch to zoom is the ratio that they have zoomed, and all you get with the flick is the direction that they have flicked. So, I was just going to implement basic flicks without momentum, and simple pinch to zoom without being able to move around too.
But I figured I would ask here first, to see if anyone has a better idea about how to do this (easily).
EDIT: I found lots of places that tell you how to do this with photos, but none with core graphics or something like that, thanks.
I ended up using a UIScrollView, which implements pinch to zoom, and flick automatically (well, almost).
I've thought that a great addition to an iphone app would be the ability to have the OS X Dock implemented in the iphone. My idea is to have like 5 regular menu that can be chosen in my app and when you swipe your finger across the menu the individual icons would magnify and when you chose an option the icon would bounce while you waited.
I personally would love this in my apps, but I'm wondering if it could be done. Be it be too cpu intensive? Any idea if this could be done in Core Graphics or would you need OpenGL ES?
Thanks to all that respond.
5 is the exact number of icons that fit perfectly into a UITabBarController, providing an easy way to switch between views that conforms to the Apple iPhone Human Interface Guidelines, and will be very familiar to iPhone users.
Here's a video showing how to create an App with a UITabBarController:
http://www.screentoaster.com/watch/stVUpUQEVLQVteRl1eXFxf/iphonedev_101_uitabbarcontroller
If you still feel you really need to have something that looks like the OS X Dock, I'd recommend using Core Animation.
Create a custom view, and in the init code, add a CALayer for each dock icon. Implement the touchesMoved event to detect finger position, and modify the bounds and position properties for your icon layers to move/resize them. You'll have to fine tune your algorithm for adjusting icon sizes and the animation mode you use to try and match the behavior in OS X, but I believe it's just a linear distortion based on the distance from the cursor (or finger in this case).
Implement code to reset the icons to their default position, and launch whatever action you want for your icons in touchesEnded.
To bounce the icons, you could try animating the position using a CABasicAnimation with the kCAMediaTimingFunctionEaseInEaseOut timing function, and repeating and autoreverse enabled.
The Core Animation framework should work fine for the sorts of animations you're discussing (bouncing, scaling). I think it'll be a lot easier than OpenGL.
Here is a code snippet which should animate moving an icon to the y coordinate 148 over a 0.2 second duration:
[UIView beginAnimations: #"iconBounce" context: NULL];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(iconBounceAnimationDidStop:finished:context:)];
CGRect iconPosition = iconImageView.frame;
iconPosition.origin.y = 148; //bounce up
iconImageView.frame = iconPosition;
[UIView setAnimationDuration: 0.2];
[UIView commitAnimations];
The selector iconBounceAnimationDidStop:finished:context: represents a method which will be called when the animation completes. You can write that method so that it will move the icon back down to a starting position to complete the bounce.
I would probably use OpenGL for that kind of graphic processing. Texture mapping/scaling is done very efficiently in OpenGL.
That said, the problem with your idea is that this is going to be "an app to open other apps".
It's entirely doable with Core Animation, but you're going to get into a user interaction issue. On the Mac, there's a distinction between mouse drag and a click. But on the iPhone we only have the finger and we're used to direct interaction, meaning we tap up and down and it's selected. In this other mode, you're saying tap-drag-lift (to enlarge icon) may do something different than tap-lift (select). Also, when you drag your finger across the icon strip, the current (enlarged) icon is always the one directly under your finger and not visible, so you'll have to adjust for that.
Even though it's doable, you may want to think through the user experience. Even though it sounds sort of cool, my guess is that it'll take a lot of tweaking to get it to look and feel just right in a mouseless direct-interaction environment. I'd be surprised if Apple didn't already try it out and decide against it.