iphone development: how to create an animation by using NSTimer - iphone

In my app I have this code in viewWillAppear. It simply animates random object from top of the screen to the bottom. The problem is I need to detect collision and what I have learnt so far is it is impossible to retrieve the coordinates at any time for an animation. so how can I implement it by using NSTimer? or shall I use NSTimer? I could not figure it out. Any clue will be appreciated.
-(void)viewWillAppear:(BOOL)animated
{
for (int i = 0; i < 100; i++) {
p = arc4random_uniform(320)%4+1;
CGRect startFrame = CGRectMake(p*50, -50, 50, 50);
CGRect endFrame = CGRectMake(p*50, CGRectGetHeight(self.view.bounds) + 50,
50,
50);
animatedView = [[UIView alloc] initWithFrame:startFrame];
animatedView.backgroundColor = [UIColor redColor];
[self.view addSubview:animatedView];
[UIView animateWithDuration:2.f
delay:i * 0.5f
options:UIViewAnimationCurveLinear
animations:^{
animatedView.frame = endFrame;
} completion:^(BOOL finished) {
[animatedView removeFromSuperview];
}];
}

I would ditch NSTimer for CADisplayLink to send a message to your target. NSTimer can cause stuttering animations since it doesn't synchronize with the device's screen refresh rate. CADisplayLink does exactly that and makes your animations run like butter.
Documentation:
http://developer.apple.com/library/ios/#documentation/QuartzCore/Reference/CADisplayLink_ClassRef/Reference/Reference.html
Ultimately, using CADisplayLink looks something like this:
- (id) init {
// ...
CADisplayLink *displayLink = [CADisplayLink displayLinkWithTarget:self selector:#selector(update:)];
[displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
// ...
}
- (void) update {
[myView updatePositionOrSomethingElse];
}

Your statement:
is it is impossible to retrieve the coordinates at any time for an
animation
seems incorrect did you check this?
It looks like you can use the CALayer's presentationLayer property to extract coordinates info during an animation:
CGRect movingFrame = [[yourView.layer presentationLayer] frame];
I will use this info to check time to time if there is a collision during the animation. So I will use the timer to check the collision status not for animating the views.

You can have your objects animate in small increments (in a loop may be). Every time you complete your animation, you can get the coordinates.

I think you could use the beginAnimations - commitAnimations syntax in a for cycle it could count for eg. till 10, so after each cycle you can check for collision
CGRect incrementedViewFrame;
for(int i = 0; i < 10; ++i)
{
incrementedViewFrame = CGRectMake(/*calculate the coords here*/);
if(collision)
{
//do stuff
}
else
{
//do an other animation cycle
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView setAnimationDuration:0.1f];
[[self viewToAnimate]setFrame:incrementedViewFrame];
[UIView commitAnimations];
}
}
I hope that helps!

Related

UIScrollView with fadeIn/fadeOut effect

I've scrollview with page control and I want to make the subview of my scrollview fadeIn/fadeOut when I scroll to or from the next page. I found that I can use contentOffset to make this effect but I couldn't make it.
In fact, I'm newbie and I wish If there is any tutorial that can help. thank you.
Assuming you hold an array of your view controllers in self.viewControllers indexed according to the UIPageControl:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat diffFromCenter = ABS(scrollView.contentOffset.x - (self.pageControl.currentPage)*self.view.frame.size.width);
CGFloat currentPageAlpha = 1.0 - diffFromCenter/self.view.frame.size.width;
CGFloat sidePagesAlpha = diffFromCenter/self.view.frame.size.width;
//NSLog(#"%f",currentPageAlpha);
[[[self.viewControllers objectAtIndex:self.pageControl.currentPage] view] setAlpha:currentPageAlpha];
if (self.pageControl.currentPage > 0)
[[[self.viewControllers objectAtIndex:self.pageControl.currentPage-1] view] setAlpha:sidePagesAlpha];
if (self.pageControl.currentPage < [self.viewControllers count]-1)
[[[self.viewControllers objectAtIndex:self.pageControl.currentPage+1] view] setAlpha:sidePagesAlpha];
}
You might check out this tutorial on view animation:
Uiview-tutorial-for-ios-how-to-use-uiview-animation
To achieve the effect you are looking for you can use something like this:
ScrollView delegate method to detect scrolling (if your only paging)
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
UIView* subView = [scrollView.subviews lastObject]; //Or however you access your subview
[UIView animateWithDuration:1.0f animations:^{
subView.alpha = 0.0f;
} completion:^(BOOL finished){
[UIView animateWithDuration:1.0f animations:^{
subView.alpha = 1.0f;
}];
}];
}
This will cause your subview to smoothly fade out and in within the span of 2.0 seconds. You should a bit of reading about this animation blocks though as they can be a little tricky. For instance I had nest the second animation block after the first had complete because the actual code within them is handled immediately and the animation simply takes place on the View side of things.
Hope this helps!
You can fade it to zero, change the contentOffset without animation, and fade it back to alpha with 1.0:
- (IBAction)didChangePageView:(id)sender
{
[UIView animateWithDuration:0.25
animations:^{
self.scrollView.alpha = 0.0;
}
completion:^(BOOL finished) {
[self.scrollView setContentOffset:CGPointMake(0, self.scrollView.frame.size.height * self.pageViewControl.currentPage) animated:NO];
[UIView animateWithDuration:0.25 animations:^{
self.scrollView.alpha = 1.0;
}];
}];
}
With Swift 2.0, assuming you hold an array of your subViews in myViewsArray:
func scrollViewDidScroll(scrollView: UIScrollView) {
//Fade in/out effect while scrolling
for (index,subView) in myViewsArray.enumerate() {
label.alpha = 1 - abs(abs(scrollView.contentOffset.x) - subView.frame.width * CGFloat(index)) / subView.frame.width
}
}

Oscillating UIView With Stopping Motion (iOS)

I need a view to enter the screen with oscillating animation and finally, the animation should stop in a natural way (decreasing oscillations - pendulum effect). I have added the subview above the screen so that the view rotates into the screen when required. The code for adding the subview is:
myView.layer.anchorPoint = CGPointMake(1.0, 0.0);
[[self view] addSubview:myView];
[myView setHidden:YES];
// Rotate 75 degrees to hide it off screen
CGAffineTransform rotationTransform = CGAffineTransformIdentity;
rotationTransform = CGAffineTransformRotate(rotationTransform, DEGREES_RADIANS(75));
bannerView.transform = rotationTransform;
bannerView.center = CGPointMake(((self.view.bounds.size.width)/2.0), -5.0);
[self performSelector:#selector(animateSwing) withObject:nil afterDelay:3.0];
The way I'm trying to achieve this that the view should rotate one full semi circle & back rotation, then rotate one semi circle rotation and finally come to halt at desired point using EaseOut animation curve. The code for my animateSwing() method is given below:
- (void)animateSwing {
NSLog(#"ANIMATING");
[myView setHidden:NO];
CGAffineTransform swingTransform = CGAffineTransformIdentity;
swingTransform = CGAffineTransformRotate(swingTransform, DEGREES_RADIANS(-20));
[UIView animateWithDuration:0.30
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
[UIView setAnimationRepeatCount:1.5];
[UIView setAnimationRepeatAutoreverses:YES];
myView.transform = swingTransform;
}completion:^(BOOL finished){
[UIView animateWithDuration:0.10
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
myView.transform = CGAffineTransformMakeRotation(DEGREES_RADIANS(0));
}completion:^(BOOL Finished){
}];
}];
}
For some reason the above code isn't working. If I do not chain animations, the code performs the semi-circle routine. But if I chain animations like above, it just oscillates a little bit around the desired point and ends abruptly.
Please suggest a fix to this code OR suggest a way to implement the required animation
Thanks
You want to use a keyframe animation. I actually have an example of a "decreasing waggle" animation in my book (http://www.apeth.com/iOSBook/ch17.html#_keyframe_animation):
CompassLayer* c = (CompassLayer*)self.compass.layer;
NSMutableArray* values = [NSMutableArray array];
[values addObject: #0.0f];
int direction = 1;
for (int i = 20; i < 60; i += 5, direction *= -1) { // alternate directions
[values addObject: #(direction*M_PI/(float)i)];
}
[values addObject: #0.0f];
CAKeyframeAnimation* anim =
[CAKeyframeAnimation animationWithKeyPath:#"transform"];
anim.values = values;
anim.additive = YES;
anim.valueFunction =
[CAValueFunction functionWithName: kCAValueFunctionRotateZ];
[c.arrow addAnimation:anim forKey:nil];
Of course that isn't identical to what you're trying to do, but it should get you started.

UITapGestureRecognizer is ignored after moving outside view and back in

I have a UILabel as child in my UIView. I use it as status panel which slides out of the view if nothing has to be shown. I do that by simply animating it to origin.y of minus the height of the label.
As soon as a message has to be displayed, I slide the label back into the view. After a delay of a few seconds it slides back out. That works fine.
I also added a UITapGestureRecognizer to the label, so the user can dismiss the message right away without waiting for it to go away automatically.
My problem is, that the gesture recognizer is not firing as once the label moved outside the view. I initialize and add the gesture recognizer when the label is completely inside the view and visible. It works as expected the first time. But when the message comes back in, the gesture recognizer seems to be removed or disabled.
I also tried to add a gr every time the label is completely on the screen in the complete block of my animation, but that didn't help either.
Can someone explain to me what happens here and how I can make the recognizer work all the time?
If you need and further information let me know.
UPDATE
I did some further testing and I get this when I log the lblError.gestureRecognizers in the showError call:
<UITapGestureRecognizer: 0x6b153f0; state = Possible; view = <UILabel 0x6b14fa0>; target= <(action=dismissError:, target=<OptionViewController 0x686d2a0>)>>
It's exactly the same I get right after it's creation. So it's still there and I guess the touch events don't get to it.
UPDATE 2
I get a step further.
The problem seems to be that I move the label to y coordinate 0. That's probably a bug in the GestureRecognizer code because when I set it 0.1 it works!
Looks like the system "thinks" that the label is not in the view and therefore disables the touch handling or something. ^^
This solves one half of the problem but creates a new one on the other side. Now that the gesture recognizer works, the delayed move out animation don't get triggered anymore.
So I think the real problem is, that the move out animation is triggered right after the move in. Even though it is delayed, it prevents the label from receiving any kind of touch events.
The code
// add gesture recognizer (in viewDidLoad)
UITapGestureRecognizer *errorDismissGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(dismissError:)];
[lblError addGestureRecognizer:errorDismissGesture];
// display error
- (void)showError:(NSString *)message {
[lblError setText:message];
[UIView animateWithDuration:0.5
animations:^(void) {
CGRect frame = lblError.frame;
frame.size.width = self.view.bounds.size.width;
frame.origin.y = 0;
lblError.frame = frame;
}
completion:^(BOOL finished) {
[UIView animateWithDuration:0.5
delay:2.0
options:UIViewAnimationOptionCurveEaseOut
animations:^(void) {
CGRect frame = lblError.frame;
frame.origin.y = -40.0f;
lblError.frame = frame;
}
completion:^(BOOL finished) {}];
}];
}
- (void)dismissError:(UIGestureRecognizer *)sender {
[UIView animateWithDuration:0.3
animations:^(void) {
CGRect frame = lblError.frame;
frame.origin.y = -40.0;
lblError.frame = frame;
}
completion:^(BOOL finished) {}];
}
Thanks and Greets,
Thomas
I finally solved it!
It seems like the delayed move out animation somehow prevents the label from receiving any touch events. Even a UIAnimationOptionAllowUserInteraction did not help.
So I replaced the delayed animation with a timed call which makes the code even a little for readable. This is how it looks now.
- (void)showError:(NSString *)message {
[lblError setText:message];
[UIView animateWithDuration:0.5
animations:^(void) {
CGRect frame = lblError.frame;
frame.size.width = self.view.bounds.size.width;
frame.origin.y = 0.1;
lblError.frame = frame;
}
completion:^(BOOL finished) {
if (finished) {
[_moveOutTimer invalidate];
_moveOutTimer = nil;
_moveOutTimer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:#selector(dismissError:) userInfo:nil repeats:NO];
}
}];
}
- (void)dismissError:(UIGestureRecognizer *)sender {
[_moveOutTimer invalidate];
[UIView animateWithDuration:0.3
animations:^(void) {
CGRect frame = lblError.frame;
frame.origin.y = -40.0;
lblError.frame = frame;
}
completion:^(BOOL finished) {}];
}

Moving an image along a series of CGPoints

I have path stored in an array of CGPoints which I'd like to move an image along. Here's the general code I have so far:
-(void)movePic:(id)sender{
for(int i = 0; i < self.array.count; i++){
CGPoint location = [[self.array objectAtIndex:i] CGPointValue];
[UIView animateWithDuration:0.1 animations:^{
self.imageView.center = location;
} completion:^(BOOL finished){
}];
}
}
The problem is the for loop runs extremely fast, so you only see the animation on the last points. I'm unsure of how to better design this. Ideally, what could I do to make sure one animation finishes before the other begins? Should I not use a for loop? Thanks
Your code assumes that UIView animations run synchronously in the main thread, which they do not.
You seem to have two options
Explicit CAKeyframeAnimation for animating a CALayer along any amount of sample points (interpolated between them)
Implicit recursive UIView animation for animating a UIView along a series of sample points (interpolated between them)
The former would be much more efficient - still I thought I oould show you both options.
CAKeyframeAnimation
- (void)movePic:(id)sender
{
//create a mutable core-graphics path
CGMutablePathRef path = CGPathCreateMutable();
for(int i = 0; i < self.array.count; i++)
{
CGPoint location = [[self.array objectAtIndex:index] CGPointValue];
CGPathAddLineToPoint(path, nil, location.x, location.y);
}
//create a new keyframe animation
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
//add our path to it
pathAnimation.path = path;
//be nice to the system
CGPathRelease(path);
//setup some more animation parameters
pathAnimation.duration = 0.1 * self.array.count;
//add the animation to our imageView's layer (which will start the animation)
[self.imageView.layer addAnimation:pathAnimation forKey:#"pathAnimation"];
}
UIView Animation
- (void)movePicToPointAtIndex:(unsigned int)index
{
//safeguard check...
if ([self.array count] <= index)
return;
//get the next location
CGPoint location = [[self.array objectAtIndex:index] CGPointValue];
//animate the imageView center towards that location
[UIView animateWithDuration:0.1
delay:0.0
options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAllowUserInteraction
animations:^{
self.imageView.center = location;
} completion:^(BOOL finished){
//we are done with that animation, now go to the next one...
[self movePicToPointAtIndex:index+1];
}];
}
- (void)movePic:(id)sender
{
[self movePicToPointAtIndex:0];
}
Ok, the thing you have to do is set the array of points as a property of the class, something like animationPath. Ok, so now you would have to pay attention to the delegate methods of the UIView animation delegate methods (it's not actually a different class, it's just a delegate of the class' methods).
Set a method to call on setAnimationDidStopSelector:selector every time the animation stops, so here you would have something like this:
//Inside the callback for setAnimationDidStopSelector
if ([animationPath count] != 0){
//Go to next point
CGPoint location = [[self.array objectAtIndex:0] CGPointValue];
[UIView animateWithDuration:0.1 animations:^{
self.imageView.center = location;
} completion:^(BOOL finished){
}];
}
else{
NSLog(#"Nowhere else to go, animation finished :D");
}
So just be sure to fire your animation with the first point.
As far as I remember UIViews animations manage things in other threads so that's probably why the for statement is not working.

frame animation of uiimageView reduced

hie everyone, here is my code:
- (void)viewDidLoad {
[[UIAccelerometer sharedAccelerometer] setUpdateInterval:1.0/60.0];
[[UIAccelerometer sharedAccelerometer] setDelegate:self];
[super viewDidLoad];
}
-(void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {
valueX = acceleration.x *20.0;
valueY = acceleration.y *-20.0;
int newX = (int)(imageView.center.x+valueX);
int newY = (int)(imageView.center.y+valueY);
CGPoint newCenter = CGPointMake(newX,newY);
imageView.center=newCenter;
UIImageView* imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"ball.png"]];
imageView2.frame = CGRectMake(newX-12, newY-12, 24, 24);
[self.view addSubview:imageView2];
[UIView beginAnimations:nil context:imageView2];
[UIView setAnimationDuration:10.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
imageView2.frame = CGRectMake(newX-2, newY-2, 4, 4);
[imageView2 setAlpha:0.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:#selector(removeSmoke:finished:context:)];
[UIView commitAnimations];
if(imageView2.alpha=0){
[imageView2 removeFromSuperview];
}
[self.view bringSubviewToFront:imageView];
}
At first my animation is very smooth with 1.0/60.0 but after some seconds the animation bug and is not smooth, i think it become 1.0/5.0. I don't know why . How can I solve this please ? sorry for my english I'm french :/
I'm not completely clear on what you are trying to achieve. It seems as though every time the accelerometer fires, you add in a new imageView animation, and want to move it based on some rules, as well shrink the image down. There are problems with your code though. You never call [imageView2 release];, and so you are probably getting memory problems after awhile.
You may also be doing too much computation in the method #selector(removeSmoke:finished:context:), but I'd need to see code in order to help with that.
If you know how many UIImageViews you are planning on having at one time, it is probably best to pre-load them, and put them in an array for easy access. That way, you can move one UIImageView, and move to the next one.
If you are shooting for iOS 4.0 or higher, I'd also recommend using Block Animations. They are easier to use, and I find a lot easier on the processor as well. Something like:
[UIView animateWithDuration:10.5
animations:^{
CGRect newRect = imageView2.frame;
newRect.origin.x -= newX-2;
newRect.origin.y -= newY-2;
imageView2.frame = newRect;
}
completion:^(BOOL finished){
[UIView animateWithDuration:0.1
animations:^{
// This is where you complete your animation, maybe remove from view or something?
}
completion:^(BOOL finished){
;
}];
}];
Finally, instead of adding and removing from the view, I would suggest you just setting the imageView2.hidden = YES;, and that way it won't get drawn, and has the same effect. Hope that helps!