ios中UI和常用动画汇总

http://blog.itotem.com.cn/?tag=ios-animation-ui

　1.保证程序UI和设计图完全吻合(UI显示) 北京达内科技ios培训机构

　　2.尽量能避免闪出闪去等*作，结合实际情况，能过渡的交互尽量结合动画制作，以符合ios风格，(Animation)

　　(一).UI显示：

　　原则：保证要与设计图模式一摸一样，发现不适合的东西，需要及时沟通后让设计师修改，尽量要保证和设计图的像素一一对应 北京ios培训

　　1.自定义UIAlertView：

　　换背景：达内科技iphone培训

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 stretchableImageWithLeftCapWidth:0. topCapHeight:0.];
CGSize theSize = [theAlert frame].size;
UIGraphicsBeginImageContext(theSize);
[theImage drawInRect: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]])
[tempView removeFromSuperview];
[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>

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

　　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 = UISegmentedControlStyleBar;
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:UIControlEventValueChanged];
[cell.contentView addSubview:segmentControl];
[segmentControl release];

　　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:YES animated:YES];

　　2.一般使用UITableView的的动画效果汇总：

　　先设置数据源，然后在执行动画：

An error has 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);

　　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];

　　二.UIViewAnimation实例：Animation块动画，Animation块支持多种动画叠加，会产生各种不同的效果

　　//在这里之前初始化参数

　　XXX

　　XXX

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

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

 tempView.center = center;
//大小transform
tempView.transform = CGAffineTransformMakeScale(number, number);
 
//透明度
tempView.alpha = 0;
//旋转
CGAffineTransform newTransform = CGAffineTransformMakeRotation(M_PI);
[viewToAddAnimation setTransform:newTransform];
//翻转两个View的动画：
把一个removeFromSupview同时把另一个addSubView，设置一下动画的翻转效果：上下左右选一个；
[view1 removeFromSupview];
[view addSubView:view2];
//横向滑动效果等
[UIView commitAnimations];
.........

　　三.CAAnimation实例：

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

+(void) showCustemAlertViewInRect:(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: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"];

　　五.按照路径绘制动画的效果(CAKeyframeAnimation : CAPropertyAnimation)

　　指定几个点，会按照动画指定的轨迹出效果：可以自选几个比较明显重要的点来绘制出动画

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 = 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:UIViewAnimationTransitionCurlUp forView:myview cache:YES];
[myview removeFromSuperview];
[UIView commitAnimations];

　　第二种方式相对复杂一些，但如果更好的进行控制，还是使用这种方法吧，基本使用方法可以看一下如下例子：
CATransition *animation = [CATransition animation];
[animation setDuration:1.25f];
[animation setTimingFunction:[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn]];
[animation setType:kCATransitionReveal];
[animation setSubtype: 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: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;