So I came from a Flash background where I can animate in timeline. I've completed the Beginning iPhone Development book and just realized that I still don't know how to get an animation in. I'm guessing I need to import png sequences?
Can anyone point me to an appropriate place to learn more about this topic? I want to make a game and my game objects need to animate.
Thanks in advance!!
The simplest type of animation, moving things around and fading in and out, can be done with a few static methods of UIVIew. You can affect the center, bounds, transform matrix and alpha level of one or more views.
[UIView beginAnimations:nil context:nil];
[fadingOutView setAlpha:0.0];
[slidingView setCenter:CGPointZero];
[shrinkingView setFrame:CGRectZero];
[fadingInView setAlpha:1.0];
[spinningView setTransform:CGAffineTransformMakeRotation( M_PI )];
[UIView commitAnimations];
Animations start with the current state of the view and interpolate to the state assigned between begin and commit animation. So if fadingInView already had an alpha of 1.0 (the default) there would be no change.
If you are unfamiliar with static methods [UIView method]; means call method on the class not an instance.
Using other UIView static methods you can control several details of the animation. Every UIView has a CALayer that also has a few properties that can be animated, the most interesting of which is the 3D transform property.
If the basic animation is not sufficient for you needs, you can either look into CAAnimation and related classes, or look to a third party animation library.
I think the best place to start learning is in your code, since you are just transitioning from Flash. Look at the very bottom of UIView.h to see the animation methods. Make a few views and move them around.
Take a look at cocos2d for iPhone. It has a good framework for handling sprites, animation (frame based and motion) as well as a lot of other stuff.
http://www.cocos2d-iphone.org
You can of course do all off this on your own with core graphics and core animation, but an API like cocos2d takes care of a lot of the nitty gritty details for you.
The Beginning iPhone Development book does not talk much about animation. You may read more about animation from Apple documentation, and play with some samples from Apple, such as the Touches.
Related
I want to fade-out a view as it is scrolling inside a parent UIScrollview. When the fade-out animation begins, the scroll view stops scrolling. It jumps to the correct position when the fade is complete.
My fade-out is achieved with animateWithDuration and block objects, triggered upon a page-change I detect in scrollViewWillBeginDragging.
Does anyone know how to make them both happen simultaneously? Just to be clear, I am not 'animating' the UIScrollView scrolling - rather it is happening via user interaction of swiping.
EDIT:
Here is the code I'm using to fade the UIView. This code is in a UIViewController derived class, which is the delegate for a UIScrollView. When the user starts dragging his finger, I want to fade out the subView. But when the user starts draggin a finger, the subview fades and the scrolling stops. After the subView has completely faded out, the the scroll view will then snap to the location where the user's finger is.
-(void)scrollViewWillBeginDragging:(UIScrollView*)scrollView
{
[UIView animateWithDuration:0.5
animations:^
{
self.subView.alpha = 0.0f;
}
completion:^(BOOL finished) { }];
}
A little late, but if you want to keep using blocks, you can use:
animateWithDuration:delay:options:animation:complete:
add "UIViewAnimationOptionAllowUserInteraction" to options to allow interaction while scrolling.
I'm sure that you will still have the lag problem. Here's the best way I can explain it. Please forgive me in advance since I'm probably using the wrong terms. All animations must run on the main thread. When you call an animation, iOS first *P*rocesses then it *R*enders before it generates *F*rames. It looks like this.
PPPPRRRRFFFFFFFFFFFFFFFFFF
But since ScrollViews don't know how long your animation is going to be or when it will end, it has to perform the animation like this.
PRFPRFPRFPRFPRFPRFPRFPRF
My theory is that the lag you are experiencing has to do with these two calls colliding on the main thread at the same time. I'm not sure how you would solve this problem other than with a faster chip. I've that you could push one animation to the CPU and one to the GPU, but I'm not that advanced at programming yet.
very interesting ... I've checked this out, and yes, i have the same effect ... Well, it seems that the animateWithDuration somehow blocks the main thread ... which is not logical, and the documentation doesn't say anything about it either ..
However there is an easy workaround, something similar to this: (i've set the animation duration to 3 so i can see that it's working while i'm moving my scroll view :) ...)
[UIView beginAnimations:#"FadeAnimations" context:nil];
[UIView setAnimationDuration:3];
self.subview.alpha = 0.0f;
[UIView commitAnimations];
I would suggest, since the opacity is based on the user's finger's movements in the UIScrollView, using the delegate method scrollViewDidScroll:. The scrollView passed as a parameter can be used to check the contentOffset which is simply a CGPoint indicating how far into the content view of the UIScrollView the user has scrolled. Something like this can be used to relate the scroll position to the opacity of a given view in a paginated UIScrollView:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// The case where I used this, the x-coordinate was relevant. You may be concerned with the y-coordinate--I'm not sure
CGFloat percent = ((int)(scrollView.contentOffset.x) % (int)(scrollView.frame.size.width)) / scrollView.frame.size.width;
if (percent > 0.0 && percent < 1.0) { // Of course, you can specify your own range of alpha values
relevantView.alpha = percent; // You could also create a mathematical function that maps contentOffset to opacity in a different way than this
}
}
According to information that is still not supposed to be widely released, all iOS 4.x versions completely block user interaction while the animation is in progress.
Isn't it interesting, though, that you're UITouches are obviously still registered during the animation? Hmm... maybe that HINTS that something NEW is coming in a yet-to-be-released version!
I.e., If you can, read the iOS 5 Beta documentation on UIView class methods.
I've no experience in making something move in my app. And I observed this effect in Flickit Pro. The Tap for details view will shake for one or two second and then stop. It looks cute and very user-friendly.
So how can I make effects like this? A gif that is moving? Or some other methods with the help of Cocoa Touch?
Thanks in advance.
Di
A high-level way would be [UIView beginAnimations: context:] (where both parameters can be NULL in this simple case). Then you can just change the properties that want to change of the view that should be animated, add some other "effects" like ease-in/out, etc. pp. When you are done with this, you just call [UIView commitAnimations] and it will animate everything for you.
However, in the case that you need more freedom, look into the CAAnimation class (its inside the QuartzCore framework).
Also: Look into the documentation for both ways (UIView / CAAnimation) and look into session 424 and 425 of the 2010 WWDC.
There are already some answers on stackoverflow on this:
Shake visual effect on iPhone (NOT shaking the device)
UIView shake animation
how to create iphone's wobbling icon effect?
and here is a link that does it on mac:
http://www.cimgf.com/2008/02/27/core-animation-tutorial-window-shake-effect/
I hope these are enough links to help.
I have a UIView with a bunch of subviews, all positioned using layoutSubviews. When the view is resized, the relative positions all change. I'd like these re-calculations to happen during an animated resize (using +[UIView beginAnimations:] calls). This doesn't seem to be happening. Any ideas?
Assumption: You want to have multiple animation steps (i.e. position doesn't change linearly with frame size).
This isn't possible with a single "standard" UIView animations. Why? The frame/bounds is only set once.
Core Animation has three "layer trees":
The model tree is where your app thinks things are.
The presentation tree is approximately what's being displayed on screen.
The render tree is approximately what Core Animation is compositing.
UIView is a (somewhat thin) wrapper around the model layer. During a UIView animation, Core Animation updates the presentation/render tree — the model tree represents the endpoint of animations. The upshot is that your code can (for the most part) treat animations as instantaneous — moving a view from A to B instantly moves it to B; the change just happens to be animated to the user.
There are more complicated things you can do with CALayer/CAAnimation directly, but I haven't investigated this much.
You could chain multiple animations together using -[UIView setAnimationDidStopSelector:]. (You could also try using multiple animations together with setAnimationDelay:, but I'm not sure what happens with multiple animations on the same property; you might have luck with setAnimationBeginsFromCurrentState:.)
If you want really fine-grained control, CADisplayLink (OS 3.1+) is a timer that fires after each screen refresh. A fallback option (for 3.0 support) is to use an NSTimer at 30/60 Hz or so.
I know this is an old question, but this code works for me very well (suited for your example of changing frame).
-(void)layoutSubviews{
[super layoutSubviews];
// layout your subviews here, or whatever
}
-(void)someMethod{
double duration=...;
[UIView animateWithDuration:duration animations:^{
self.frame = ...;
[self layoutIfNeeded];
}];
}
Of course you can call this method from another object. The "trick" is to call layoutIfNeeded (or layoutSubviews directly - same thing, if You change the frame the setNeedsLayout is called).
As tc. nicely explained the "layer trees", You just force the presentation layer to display the final stage of model layer with animation.
The advantage of this method is in possibility to control when the frame/bounds change is animated and when it's instant.
Hope this helps someone:).
Completing #GrizzlyNetch's anwer, you can set the UIViewAnimationOptionLayoutSubviews animation option, so you don't need to call layoutIfNeeded:
-(void)someMethod{
double duration = ...;
[UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionLayoutSubviews animations:^{
self.frame = ...;
} completion:nil];
}
Posting for completeness. Thanks to tc. for explaining that what I want to do, exactly, is not supported by Core Animation.
I eventually came up with a reasonable solution. Rather then layout my subviews in -layoutSubviews, I do so in -setBounds:. Then, when I wrap a -setBounds: call in a UIView +beginAnimations: block, those positioning calls are also animated, and the end result is everything properly animating to where it should god.
I'd like help on some strategies to sequence some animations.
I subclassed UIImageView so that I could write some custom animation actions on an image. I implemented a few methods to be used as actions that I could call on my image
example:
-(void)rotateAnim; //rotates the image by a few degrees using a CGAffine Transform
-(void)numbersFlashAnim; //uses the UIImageVew.animationImages array for a 14 frame animation.
-(void)moveLeftAnim; //uses another CGAffine Transform to change the imageView's position.
In my viewDidLoad method I create an instance of my UIImageView subclass. What ways exist to call these animations in sequence?
I was thinking about using an NSTimer to handle the animations, but wasn't sure if you could write an NSTimer object to handle multiple method calls.
example:
[imageView rotateAnim]; //when this animation is done, I want to call:
[imageView numbersFlashAnim];
I've seen several questions regarding the use of an NSTimer, but none that specifically relate to this problem. Note: I saw that the dev docs on apple's site also recommend the use of the performSelector:withObject:afterDelay: in some cases but was wondering if that would offer enough flexibility.
Additionally, I've already taken a look at the Cocos2d framework, and although I can use their methods ~(Sequence actions: etc, ) I'm choosing to solve this problem with UIKit/Foundation, etc.
Do you use animation? I mean you can rotate your image inside
[UIView beginAnimations:(NSString *)animationID context:(void *)context] block. There you can add a delegate method that will be called after current animation ends. And there you can call your numbersFlashAnim.
(Sorry for my english ;-) )
I'm trying to create a custom transition, to serve as a replacement for a default transition you would get here, for example:
[self.navigationController pushViewController:someController animated:YES];
I have prepared an OpenGL-based view that performs an effect on some static texture mapped to a plane (let's say it's a copy of the flip effect in Core Animation). What I don't know how to do is:
grab current view content and make a texture out of it (I remember seeing a function that does just that, but can't find it)
how to do the same for the view that is currently offscreen and is going to replace current view
are there some APIs I can hook to in order to make my transition class as native as possible (make it a kind of Core Animation effect)?
Any thoughts or links are greatly appreciated!
UPDATE
Jeffrey Forbes's answer works great as a solution to capture the content of a view.
What I haven't figured out yet is how to capture the content of the view I want to transition to, which should be invisible until the transition is done.
Also, which method should I use to present the OpenGL view?
For demonstration purposes I used pushViewController. That affects the navbar, though, which I actually want to go one item back, with animation, check this vid for explanation:
http://vimeo.com/4649397.
Another option would be to go with presentViewController, but that shows fullscreen.
Do you think maybe creating another window (or view?) could be useful?
While I cannot completely answer your question without doing some more research of my own, I can help a bit:
-In order to get the view of a UINavigationController, you need to take a screenshot. The easiest way to do this is by grabbing it into a UIImage:
UIGraphicsBeginImageContext(self.view.frame.size);
[[self.view layer] renderInContext:UIGraphicsGetCurrentContext()];
UIImage* test = UIGraphicsGetImageFromCurrentImageContext();
UIImageView* view = [[UIImageView alloc] initWithImage:test];
UIGraphicsEndImageContext();
I am not sure if you can render a GLContext (not familiar on the phone) into a CGImage, but I would do something like that (and init a UIImage from that). I would prerender every frame of the animation you are trying to do and slap it into an UIImageView using the animation stuff provided within. That is, if your animation is simple enough. Otherwise, it might come down to writing your own animation function :-/
I have just put together a transition class to implement your own transition animation in OpenGL ES.
Feel free to read about it here
There are two example transitions in the project, feel free to add you own to it.
I think the function you might be thinking of is http://www.opengl.org/sdk/docs/man/xhtml/glCopyTexImage2D.xml ... you set the viewport to the texture size and then draw as usual, then do glCopyTexImage2D to copy the scene onto a texture.
or you should look into FrameBuffer Objects. The default OpenGL template in XCode uses these. Just generate the example project to see how those work.
I recently write some transitioning animation betweeen view controllers like you. If you want to get any extra info from the invisible view, you can try delaying the transition like this :
- (void)animationFromModalView:(UIView *)modalView toMasterView:(UIView *)masterView
{
[masterView setNeedsLayout];
[masterView layoutIfNeeded];
[self performSelector:#selector(delayAnimationFromModalViewToMasterView) withObject:nil afterDelay:.1f];
}