UILabel / text animation on IPhone
Spent quite a开发者_JS百科 lot of time trying to figure out how i could animate the movement of a UILabel from one one edge of the screen to the opposite one. Basically i want a text that i got from the user to appear on screen from right to left and the disappear, and it keeps on looping and appearing again (srt of what you can see on Times Square :-)
In the generic sense, a label can be animated by first specifying its frame, setting it's attributes (text, background color), adding it to your
view's subview, and then using [UIView animateWithDuration:delay:options:animations:completion]
to specify the final frame. This
method requires a little bit more code "just for a label" but it's worth it in the end.
The following code will place a label in the upper-left (0,0) and animate it to the lower-right (the exact coordinates will depend on your iOS device). The generic steps are as follows:
- Calculate the size of the frame required for your label, this is dependent upon the font face and size for your label
- Obtain your application frame, see Offset on UIWindow addSubview on why to use
applicationFrame
as opposed tobounds
. - Calculate your destination coordinates; in this example we want the lower-right of the label to touch the lower-right of the screen, so we calculate the upper-left coordinates to account for the label's frame
- Create the label with
initWithFrame
- Style the label with a background color, set the text, font, etc. Note: You obviously must use the same font face and size you specified when calculating your frame!
- Add the subview (UILabel) to your current view
- Animate! This is done in the block passed as the parameter to
animations:
, we are specifying the final location of the frame (note that we are not changing the frame's size during the animation) that we previously calculated to be in the lower-right. - Finally, once the animation is complete, remove the label with removeFromSuperview
This is a very generic example, and there are lot of things that can be done here,
including animating several labels simultaneously for a marquee effect, etc. When
adding additional animations be aware the view controller can be dismissed and that
the animations are still running. It's generally a good idea stop the animations with [self.view.layer removeAllAnimations]
as well as remove the subviews that may still be hanging around (I typically keep an NSMutableArray of all of the labels I've created so I can clean them up in viewWillDisappear
).
#define FONT_SIZE 14
#define DURATION 10
#define DELAY 10
-(void)viewWillAppear:(BOOL)animated {
NSString* string = @"My Label";
CGSize framesize = [string sizeWithFont:[UIFont fontWithName:@"Copperplate" size:FONT_SIZE]];
// Origin
float x0 = 0;
float y0 = 0;
CGRect appFrame = [[UIScreen mainScreen] applicationFrame];
CGFloat appFrameWidth = appFrame.size.width;
CGFloat appFrameHeight = appFrame.size.height;
// Destination
float x1 = appFrameWidth - framesize.width;
float y1 = appFrameHeight - framesize.height;
UILabel* label = [[UILabel alloc]initWithFrame:CGRectMake(x0, y0, framesize.width, framesize.height)];
label.backgroundColor = [UIColor clearColor];
label.text = string;
label.shadowColor = [UIColor grayColor];
label.shadowOffset = CGSizeMake(1,2);
label.font = [UIFont fontWithName:@"Copperplate" size:FONT_SIZE];
[self.view addSubview:label];
[UIView animateWithDuration:DURATION
delay:DELAY
options:UIViewAnimationOptionAllowUserInteraction
animations:^{
label.frame = CGRectMake(x1, y1, framesize.width, framesize.height);
}
completion:^(BOOL finished){
[label removeFromSuperview];
}];
}
If you want your label remain at a fixed location you can move the text inside the label, for example using a NSTimer that fires and calls a methods to update your UiLabel in regular (second or so) Intervals:
NSString * longText = [NSString stringWithString:@"this is a long text"];
// begin loop here
NSString * firstLetter = [longText substringToIndex:1]);
NSString * otherLetters = [longText substringFromIndex:1]);
longText = [otherLetters stringByAppendingString:firstLetter];
UILable.text = longText;
// wait here a second or so
// end loop
- (void)viewDidLoad
{
[self animateLoop];
[super viewDidLoad];
}
- (void)animateLoop
{
mylab.text=@"SAAAAdiiiii";
mylab.frame = CGRectMake(-mylab.bounds.size.width, 100, mylab.bounds.size.width, mylab.bounds.size.height);
[UIView beginAnimations:@"timesquare" context:nil];
[UIView setAnimationDuration:5];
[UIView setAnimationRepeatAutoreverses:(YES)];
[UIView setAnimationRepeatCount:10];
mylab.frame = CGRectMake(480, 100, mylab.bounds.size.width, mylab.bounds.size.height);
[UIView commitAnimations];
}
You can use core animation for that with timer and all the kit or you can just use the methof on UIView to start and commit animation and animation event to start over again.
Try something like :
-(void)animateLoop {
myLabel.frame = CGRectMake(-myLabel.bounds.size.width, 100, myLabel.bounds.size.width, myLabel.bounds.size.height);
[UIView beginAnimations:@"timesquare" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDidStopSelector:@selector(animateLoop)];
myLabel.frame = CGRectMake(480, 100, myLabel.bounds.size.width, myLabel.bounds.size.height);
[UIView commitAnimations];
}
精彩评论