StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCA animation of a UIView inside a UITableView. Like the one on iTunes
text
Body
copied!<p>I've been checking this site for many of my questions before but this is the first time I actually have to ask someting, so I hope I can make myself clear enough.</p> <p>I have an App which is nearly finish. The main functionallity is in up and running. I'm only concern in making the whole App visually appealing. The App is maninly a database wich scientifical relevant data. I want the user to be able to store custom data in the DB and to do that I've created a "contact-like" view where the user can save some data. The view contains a table and inside this table, the cell have UITextFields. After entering the data, when the user presses a button, I want to animate the content of the textField to a cabinet-like icon. Very much like when you purchase something in the iTunes on a iOS device. I've been able to do that animation in a "static" view (not a UITableView), playing around with starting point, end point and so on is a bit of a pain in the neck, but doable after all. I'm doing the animation in a not really conventional way, I think, but actually very effecive. On the press of the button I create a UILabel, I set the text as the text of the textField and then I use viewAnimationWithDuration block to animate the label. Inside the block I also use Core Animation to animate the layer of the label over a path. Again, not conventional, but straight forward.</p> <p>The problem I'm having is that I'm not able to create the label over the textField since it is in a UITableView. Mainly the problem is to know the position (or frame, or bounds, or position. I'm really confused already) of the textField and hence, the starting position of the path.</p> <p>The code I'm using is as follows:</p> <p>-(IBAction)saveCustom:(id)sender{</p> <pre><code>UILabel *imageViewForAnimation = [[UILabel alloc] initWithFrame:CGRectMake(l1, l2, l3, l4)]; imageViewForAnimation.text=label.text; imageViewForAnimation.alpha = 1.0f; imageViewForAnimation.backgroundColor=[UIColor clearColor]; imageViewForAnimation.textColor=[UIColor blackColor]; imageViewForAnimation.adjustsFontSizeToFitWidth=YES; [self.view addSubview:imageViewForAnimation]; [UIView animateWithDuration:10.0 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{ // Set up path movement Core Animation begins CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; CGPoint endPoint = CGPointMake(310, 380); // final point CGMutablePathRef curvedPath = CGPathCreateMutable(); CGPoint rootViewPoint = [imageViewForAnimation convertPoint:imageViewForAnimation.center toView:taula]; CGPathMoveToPoint(curvedPath, NULL, rootViewPoint.x, rootViewPoint.y); // initial point CGPathAddCurveToPoint(curvedPath, NULL, 100, 100, 100, 100, endPoint.x, endPoint.y); pathAnimation.path = curvedPath; CGPathRelease(curvedPath); pathAnimation.fillMode=kCAFillModeForwards; pathAnimation.removedOnCompletion=NO; pathAnimation.duration=10.0f; pathAnimation.delegate=self; [imageViewForAnimation.layer addAnimation:pathAnimation forKey:@"savingAnimation"]; [imageViewForAnimation release]; //Core Animation ends imageViewForAnimation.transform=CGAffineTransformMakeScale(0.60, 0.60); // imageViewForAnimation.alpha=0.2; } completion:^(BOOL finished){ [imageViewForAnimation removeFromSuperview]; } ]; </code></pre> <p>}</p> <p>Any help on how to proceed will be much appreciated.</p> <p>Thanks in advance!</p> <p>UPDATE:</p> <p>I went to the Apple Tech Talks in Berlin. In the labs they got, I asked an engineer about that. He wondered that the code I showed him didn't work. I emailed to him and he'll be back to me. </p> <p>The key thing is to transform the coordinates from the table, to the view.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload