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 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];
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 = 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];
1 2 //改变后的参数,动画将会从初始化的参数向改变后的参数过渡 //位置:
1 tempView.center = center;
1 //大小transform
1 tempView.transform = CGAffineTransformMakeScale(number, number);
1 //透明度
1 tempView.alpha = 0;
1 //旋转
1 2 CGAffineTransform newTransform = CGAffineTransformMakeRotation(M_PI); [viewToAddAnimation setTransform:newTransform];
1 2 //翻转两个View的动画: 把一个removeFromSupview同时把另一个addSubView,设置一下动画的翻转效果:上
下左右选一个;
1 2 [view1 removeFromSupview]; [view addSubView:view2];
1 //横向滑动效果等
1 [UIView commitAnimations];
1 .........
三.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;
|