ios 系统 自带动画效果使用

1.保证程序UI和设计图完全吻合（UI显示）
2.尽量能避免闪出闪去等操作，结合实际情况，能过渡的交互尽量结合动画制作，以符合ios风格，(Animation)

(一).UI显示：

原则：保证要与设计图模式一摸一样，发现不适合的东西，需要及时沟通后让设计师修改，尽量要保证和设计图的像素一一对应
1.自定义UIAlertView：

换背景：

UIAlertView *theAlert = [[UIAlertView alloc] initWithTitle:title message:message delegate:delegate cancelButtonTitle:cancleTitle otherButtonTitles:otherTitle,nil]; [theAlert show]; theAlert.backgroundColor = [UIColor clearColor]; UILabel *theTitle = [theAlert valueForKey:@"_titleLabel"]; [theTitle setTextColor:[UIColor whiteColor]]; UILabel *theBody = [theAlert valueForKey:@"_bodyTextLabel"]; [theBody setTextColor:[UIColor whiteColor]]; UIImage *theImage = [UIImage imageNamed:@"alertBack.png"]; theImage = [theImage stretchableImageWithLeft<wbr>CapWidth:0. topCapHeight:0.]; CGSize theSize = [theAlert frame].size; UIGraphicsBeginImageCont<wbr>ext(theSize); [theImage drawInRect:CGRectMake(0, 0, theSize.width, theSize.height)]; theImage = UIGraphicsGetImageFromCu<wbr>rrentImageContext(); UIGraphicsEndImageContex<wbr>t(); theAlert.layer.contents = (id)[theImage CGImage]; for (UIView *tempView in theAlert.subviews) if ([tempView isMemberOfClass:[UIImageView class]]) [tempView removeFromSuperview]; [theAlert release];

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

UIAlertView*theAlert =[[UIAlertView alloc] initWithTitle:title message:message delegate:delegate cancelButtonTitle:cancleTitle otherButtonTitles:otherTitle,nil]; [theAlertshow]; theAlert.backgroundColor = [UIColor clearColor]; UILabel *theTitle= [theAlert valueForKey:@"_titleLabel"]; [theTitle setTextColor:[UIColor whiteColor]]; UILabel *theBody= [theAlert valueForKey:@"_bodyTextLabel"]; [theBody setTextColor:[UIColor whiteColor]]; UIImage *theImage= [UIImage imageNamed:@"alertBack.png"]; theImage = [theImage stretchableImageWithLeftCapWidth:0.topCapHeight:0.]; CGSize theSize= [theAlert frame].size; UIGraphicsBeginImageContext(theSize); [theImagedrawInRect:CGRectMake(0,0, theSize.width, theSize.height)]; theImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); theAlert.layer.contents = (id)[theImage CGImage]; for (UIView *tempView in theAlert.subviews) if([tempView isMemberOfClass:[UIImageView class]]) [tempViewremoveFromSuperview]; [theAlert release];

<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px; white-space: normal;">2.自定义UIPageControl</span>

1	<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter',Times, serif; font-size: 13px; line-height: 19px; white-space:normal;">2.自定义UIPageControl</span>

改变点儿的颜色，可以改变小点儿的颜色：(附件中)
MyPageControl.h
MyPageControl.m

3.自定义UISegmentConrol
改变自定义风格：（需要用切图配合）

UISegmentedControl *segmentControl = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects: [UIImage imageNamed:@"seg1_tapped.png"], [UIImage imageNamed:@"seg2.png"], [UIImage imageNamed:@"seg3.png"],nil]]; segmentControl.segmentedControlStyle = UISegmentedControlStyleB<wbr>ar; segmentControl.frame = CGRectMake((DeviceWidth-76*3)/2-9, 14+[cellContentArray count]*35, 76*3, 33.5); segmentControl.selectedSegmentIndex = 0; [segmentControl addTarget:self action:@selector(changeBookType:) forControlEvents:UIControlEventValueChang<wbr>ed]; [cell.contentView addSubview:segmentControl]; [segmentControl release];

1 2 3 4 5 6 7 8 9 10

UISegmentedControl *segmentControl = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects: [UIImageimageNamed:@"seg1_tapped.png"], [UIImage imageNamed:@"seg2.png"], [UIImageimageNamed:@"seg3.png"],nil]]; segmentControl.segmentedControlStyle =UISegmentedControlStyleBar; segmentControl.frame =CGRectMake((DeviceWidth-76*3)/2-9,14+[cellContentArray count]*35,76*3, 33.5); segmentControl.selectedSegmentIndex =0; [segmentControladdTarget:self action:@selector(changeBookType:) forControlEvents:UIControlEventValueChanged]; [cell.contentView addSubview:segmentControl]; [segmentControlrelease];

4.自定义UIProgressView
改变pressView的进度颜色显示：基于QuartzCore绘制图像
CustemProgressBar.h
CustemProgressBar.m

5.自定义UITableView/UITableViewCell
很常用，往后要倾向IB来做：layOutSubView布局frame

6.自定义UINavigationBar（用view组合）
TopBarView.h
TopBarView.m
我的做法：将自身的navibar英藏后在显示为自定义的navibarView：这样方便程序来控制：

7.自定义UIPopViewController(用view组合)
iPhone里不支持PopViewController，但是有时会需要在程序里显示PopViewController这样的东西

8.自定义UITabBarView
用一组button组合成tabbar的显示，方便灵活，但要确保需要管理好内容：
由于sdk中的tabbar是很不灵活的，隐藏之类的操作都很难控制：

9.自定义UISearchBar
用多个view组合起来平城searchview的显示：可以改变背景，圆角等
改变背景等需求；

10.自定义UITextField/UITextView
可以换背景等：leftview rightView background等

11.翻页效果：UIPageViewController（iOS5）
1.官方demo，
2.leaves框架翻页效果

(二).常用到的动画汇总：

一.控件本身附有的动画方法：
UIKit包含的动画效果，用起来也比较省事，举例如下：

1. [self.navigationController setNavigationBarHidden:YESanimated:YES];
2.一般使用UITableView的的动画效果汇总：
先设置数据源，然后在执行动画：

An errorhas occurred. Please try again later.

- (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)reloadSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_0); - (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation; - (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_0);

1 2 3 4 5 6

-(void)insertSections:(NSIndexSet*)sectionswithRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; -(void)reloadSections:(NSIndexSet*)sectionswithRowAnimation:(UITableViewRowAnimation)animation __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_0); - (void)insertRowsAtIndexPaths:(NSArray*)indexPathswithRowAnimation:(UITableViewRowAnimation)animation; -(void)deleteRowsAtIndexPaths:(NSArray*)indexPathswithRowAnimation:(UITableViewRowAnimation)animation; - (void)reloadRowsAtIndexPaths:(NSArray*)indexPathswithRowAnimation:(UITableViewRowAnimation)animation __OSX_AVAILABLE_STARTING(__MAC_NA,__IPHONE_3_0);

3.[scrollVie setContentOffset:CGPoint animated:BOOL]
4.UIImageView的动画效果：

UIImageView *campFireView = [[UIImageView alloc] initWithFrame:XXX]; campFireView.animationImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"campFire01.gif"], [UIImage imageNamed:@"campFire02.gif"]......., nil]; campFireView.animationDuration = 1.75; campFireView.animationRepeatCount = 0; [campFireView startAnimating]; [campFireView release];

1 2 3 4 5 6 7 8

UIImageView*campFireView = [[UIImageView alloc] initWithFrame:XXX]; campFireView.animationImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"campFire01.gif"], [UIImageimageNamed:@"campFire02.gif"]......., nil]; campFireView.animationDuration = 1.75; campFireView.animationRepeatCount= 0; [campFireView startAnimating]; [campFireViewrelease];

二.UIViewAnimation实例：Animation块动画，Animation块支持多种动画叠加，会产生各种不同的效果
//在这里之前初始化参数
XXX
XXX

[UIView beginAnimations:nil context:nil]; [UIView setAnimationDelegate:delegate]; [UIView setAnimationWillStartSel<wbr>ector:startSelector];//开始的代理 [UIView setAnimationDidStopSelec<wbr>tor:stopSelector];//结束的代理 [UIView setAnimationDuration:seconds];

1 2 3 4 5

[UIView beginAnimations:nil context:nil]; [UIView setAnimationDelegate:delegate]; [UIView setAnimationWillStartSelector:startSelector];//开始的代理 [UIView setAnimationDidStopSelector:stopSelector];//结束的代理 [UIView setAnimationDuration:seconds];

//改变后的参数，动画将会从初始化的参数向改变后的参数过渡 //位置：

1 2	//改变后的参数，动画将会从初始化的参数向改变后的参数过渡 //位置：

tempView.center = center;

1	tempView.center = center;

//大小transform

1	//大小transform

tempView.transform = CGAffineTransformMakeSca<wbr>le(number, number);

1	tempView.transform = CGAffineTransformMakeScale(number,number);

//透明度

1

//透明度

tempView.alpha = 0;

1	tempView.alpha = 0;

//旋转

1

//旋转

CGAffineTransform newTransform = CGAffineTransformMakeRot<wbr>ation(M_PI); [viewToAddAnimation setTransform:newTransform];

1 2	CGAffineTransform newTransform= CGAffineTransformMakeRotation(M_PI); [viewToAddAnimationsetTransform:newTransform];

//翻转两个View的动画： 把一个removeFromSupview同时把另一个addSubView，设置一下动画的翻转效果：上下左右选一个；

1 2	//翻转两个View的动画： 把一个removeFromSupview同时把另一个addSubView，设置一下动画的翻转效果：上下左右选一个；

[view1 removeFromSupview]; [view addSubView:view2];

1 2	[view1 removeFromSupview]; [view addSubView:view2];

//横向滑动效果等

1

//横向滑动效果等

[UIView commitAnimations];

1	[UIView commitAnimations];

.........

1

.........

 

三.CAAnimation实例：
弹出时抖动显示，模仿AlertView的弹出效果，可以将抖动结合用到其他的地方：

+(void) showCustemAlertViewInRec<wbr>t:(CGRect) frame inView:(UIView *) superview { UIView *tempView = [UIGloble newWhiteViewWithFrame:frame backgroundColor:[UIColor blueColor]]; [superview addSubview:tempView];//CGRectMake(40, 60, DeviceWidth-80, DeviceHeight-200) CAKeyframeAnimation *animation=nil; animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"]; animation.duration = 0.8; animation.delegate = self; animation.removedOnCompletion = YES; animation.fillMode = kCAFillModeForwards; NSMutableArray *values = [NSMutableArray array]; [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)]]; [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2, 1.2, 1.0)]]; [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9, 0.9, 0.9)]]; [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]]; animation.values = values; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEa<wbr>seInEaseOut]; [tempView.layer addAnimation:animation forKey:nil]; [tempView release]; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

+(void) showCustemAlertViewInRect:(CGRect) frame inView:(UIView*) superview { UIView*tempView =[UIGloblenewWhiteViewWithFrame:frame backgroundColor:[UIColor blueColor]]; [superviewaddSubview:tempView];//CGRectMake(40, 60, DeviceWidth-80,DeviceHeight-200) CAKeyframeAnimation *animation=nil; animation =[CAKeyframeAnimationanimationWithKeyPath:@"transform"]; animation.duration = 0.8; animation.delegate = self; animation.removedOnCompletion =YES; animation.fillMode = kCAFillModeForwards; NSMutableArray *values= [NSMutableArray array]; [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1,0.1, 1.0)]]; [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.2,1.2, 1.0)]]; [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9,0.9, 0.9)]]; [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0,1.0, 1.0)]]; animation.values =values; animation.timingFunction = [CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [tempView.layer addAnimation:animation forKey:nil]; [tempView release]; }

四.晃动动效果：CABasicAnimation动画举例：可以模仿iphone删除程序模式下的抖动效果：

CALayer*viewLayer=[self layer]; CABasicAnimation*animation=[CABasicAnimation animationWithKeyPath:@"transform"]; animation.duration=0.2; animation.repeatCount = 100000; animation.autoreverses=YES; animation.fromValue=[NSValue valueWithCATransform3D:CATransform3DRotate(viewLayer.transform, -0.03, 0.0, 0.0, 0.03)]; animation.toValue=[NSValue valueWithCATransform3D:CATransform3DRotate(viewLayer.transform, 0.03, 0.0, 0.0, 0.03)]; [viewLayer addAnimation:animation forKey:@"wiggle"];

1 2 3 4 5 6 7 8

CALayer*viewLayer=[selflayer]; CABasicAnimation*animation=[CABasicAnimation animationWithKeyPath:@"transform"]; animation.duration=0.2; animation.repeatCount = 100000; animation.autoreverses=YES; animation.fromValue=[NSValuevalueWithCATransform3D:CATransform3DRotate(viewLayer.transform, -0.03, 0.0, 0.0, 0.03)]; animation.toValue=[NSValue valueWithCATransform3D:CATransform3DRotate(viewLayer.transform, 0.03,0.0, 0.0, 0.03)]; [viewLayeraddAnimation:animation forKey:@"wiggle"];

五.按照路径绘制动画的效果（CAKeyframeAnimation : CAPropertyAnimation）
指定几个点，会按照动画指定的轨迹出效果：可以自选几个比较明显重要的点来绘制出动画

1

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; [animation setDuration:0.8]; CGPoint p1 = tempButton.center; CGPoint p2 = CGPointMake(152, 97); CGPoint p3 = CGPointMake(189, 110); CGPoint p4 = CGPointMake(220, 124); CGPoint p5 = CGPointMake(245, 163); CGPoint p6 = CGPointMake(220, 250); CGPoint p7 = CGPointMake(177, 379); [animation setValues:[NSArray arrayWithObjects: [NSValue valueWithCGPoint:p1], [NSValue valueWithCGPoint:p2], [NSValue valueWithCGPoint:p3], [NSValue valueWithCGPoint:p4], [NSValue valueWithCGPoint:p5], [NSValue valueWithCGPoint:p6], [NSValue valueWithCGPoint:p7], nil]]; [animation setKeyTimes:[NSArray arrayWithObjects: [NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.3], [NSNumber numberWithFloat:0.4], [NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.6], [NSNumber numberWithFloat:0.7], [NSNumber numberWithFloat:0.8], nil]]; //[animation setAutoreverses:YES];//返回到原始状态 [tempButton.layer addAnimation:animation forKey:@"BookView-Fly"]; [UIGloble addAnimationFade:tempButton duraion:0.8]; [UIGloble addAnimationScal:tempButton toPoint:tempButton.center lightState:YES delegate:tempButton startSelector:nil stopSelector:@selector(removeFromSuperview) scaleNumber:0.1 duraion:0.8]; [tempButton release]; [self performSelector:@selector(changeBadgeValue) withObject:nil afterDelay:0.8]; 六.CATransition,cube动画翻转，privateAPI CATransition *animation = [CATransition animation]; animation.delegate = self; animation.duration = 0.5f; animation.timingFunction = UIViewAnimationCurveEase<wbr>InOut; animation.fillMode = kCAFillModeRemoved; animation.removedOnCompletion = NO; animation.type = @"cube"; [[UIApplication sharedApplication].keyWindow.layer addAnimation:animation forKey:@"animationID"];

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

CAKeyframeAnimation *animation= [CAKeyframeAnimation animationWithKeyPath:@"position"]; [animationsetDuration:0.8]; CGPointp1 = tempButton.center; CGPoint p2= CGPointMake(152, 97); CGPointp3 = CGPointMake(189, 110); CGPoint p4= CGPointMake(220, 124); CGPointp5 = CGPointMake(245, 163); CGPoint p6= CGPointMake(220, 250); CGPointp7 = CGPointMake(177, 379); [animationsetValues:[NSArrayarrayWithObjects: [NSValue valueWithCGPoint:p1], [NSValuevalueWithCGPoint:p2], [NSValue valueWithCGPoint:p3], [NSValuevalueWithCGPoint:p4], [NSValue valueWithCGPoint:p5], [NSValuevalueWithCGPoint:p6], [NSValue valueWithCGPoint:p7], nil]]; [animation setKeyTimes:[NSArray arrayWithObjects: [NSNumbernumberWithFloat:0.0], [NSNumber numberWithFloat:0.3], [NSNumbernumberWithFloat:0.4], [NSNumber numberWithFloat:0.5], [NSNumbernumberWithFloat:0.6], [NSNumber numberWithFloat:0.7], [NSNumbernumberWithFloat:0.8], nil]]; //[animationsetAutoreverses:YES];//返回到原始状态 [tempButton.layer addAnimation:animation forKey:@"BookView-Fly"]; [UIGlobleaddAnimationFade:tempButton duraion:0.8]; [UIGloble addAnimationScal:tempButton toPoint:tempButton.center lightState:YES delegate:tempButton startSelector:nil stopSelector:@selector(removeFromSuperview)scaleNumber:0.1 duraion:0.8]; [tempButtonrelease]; [self performSelector:@selector(changeBadgeValue) withObject:nil afterDelay:0.8]; 六.CATransition,cube动画翻转，privateAPI CATransition*animation =[CATransitionanimation]; animation.delegate = self; animation.duration = 0.5f; animation.timingFunction = UIViewAnimationCurveEaseInOut; animation.fillMode = kCAFillModeRemoved; animation.removedOnCompletion= NO; animation.type = @"cube"; [[UIApplication sharedApplication].keyWindow.layer addAnimation:animation forKey:@"animationID"];

总结出来的：

实现iphone漂亮的动画效果主要有两种方法，一种是UIView层面的，一种是使用CATransition进行更低层次的控制，
第一种是UIView，UIView方式可能在低层也是使用CATransition进行了封装，它只能用于一些简单的、常用的效果展现，这里写一个常用的示例代码，供大家参考。

[UIView beginAnimations:@"Curl"context:nil];//动画开始 [UIView setAnimationDuration:0.75]; [UIView setAnimationDelegate:self]; [UIView setAnimationTransition:UIViewAnimationTransitio<wbr>nCurlUp forView:myview cache:YES]; [myview removeFromSuperview]; [UIView commitAnimations];

1 2 3 4 5 6

[UIView beginAnimations:@"Curl"context:nil];//动画开始 [UIView setAnimationDuration:0.75]; [UIView setAnimationDelegate:self]; [UIView setAnimationTransition:UIViewAnimationTransitionCurlUpforView:myview cache:YES]; [myview removeFromSuperview]; [UIView commitAnimations];

第二种方式相对复杂一些，但如果更好的进行控制，还是使用这种方法吧，基本使用方法可以看一下如下例子：

CATransition *animation = [CATransition animation]; [animation setDuration:1.25f]; [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEa<wbr>seIn]]; [animation setType:kCATransitionReveal]; [animation setSubtype: kCATransitionFromBottom]; [self.view.layer addAnimation:animation forKey:@"Reveal"];

1 2 3 4 5 6 7

CATransition*animation =[CATransitionanimation]; [animationsetDuration:1.25f]; [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [animation setType:kCATransitionReveal]; [animationsetSubtype:kCATransitionFromBottom]; [self.view.layer addAnimation:animation forKey:@"Reveal"];

还有一种设置动画类型的方法，不用setSubtype，只用setType
[animation setType:@"suckEffect"];
这里的suckEffect就是效果名称，可以用的效果主要有：
pageCurl 向上翻一页
pageUnCurl 向下翻一页
rippleEffect 滴水效果
suckEffect 收缩效果，如一块布被抽走
cube 立方体效果
oglFlip 上下翻转效果
最后再给出一种常用代码供大家参考。

// Curl the image up or down CATransition *animation = [CATransition animation]; [animation setDuration:0.35]; [animation setTimingFunction:UIViewAnimationCurveEase<wbr>InOut]; if (!curled){ //animation.type = @"mapCurl"; animation.type = @"pageCurl"; animation.fillMode = kCAFillModeForwards; animation.endProgress = 0.99; } else { //animation.type = @"mapUnCurl"; animation.type = @"pageUnCurl"; animation.fillMode = kCAFillModeBackwards;

1 2 3 4 5 6 7 8 9 10 11 12 13

// Curl theimage up or down CATransition *animation = [CATransition animation]; [animation setDuration:0.35]; [animationsetTimingFunction:UIViewAnimationCurveEaseInOut]; if(!curled){ //animation.type = @"mapCurl"; animation.type = @"pageCurl"; animation.fillMode = kCAFillModeForwards; animation.endProgress = 0.99; } else { //animation.type = @"mapUnCurl"; animation.type =@"pageUnCurl"; animation.fillMode = kCAFillModeBackwards;