http://blog.sina.com.cn/s/blog_60122cd80100yzl5.html

 

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

(一).UI显示:

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

换背景:

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];
[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
改变自定义风格:(需要用切图配合)

1
2
3
4
5
6
7
8
9
10
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.
1
2
3
4
5
6
- (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的动画效果:

1
2
3
4
5
6
7
8
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

1
2
3
4
5
[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的弹出效果,可以将抖动结合用到其他的地方:

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 = [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删除程序模式下的抖动效果:

1
2
3
4
5
6
7
8
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)
指定几个点,会按照动画指定的轨迹出效果:可以自选几个比较明显重要的点来绘制出动画

1
 
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"];
[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进行了封装,它只能用于一些简单的、常用的效果展现,这里写一个常用的示例代码,供大家参考。

1
2
3
4
5
6
[UIView beginAnimations:@"Curl"context:nil];//动画开始
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:myview cache:YES];
[myview removeFromSuperview];
[UIView commitAnimations];

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

1
2
3
4
5
6
7
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 上下翻转效果
最后再给出一种常用代码供大家参考。

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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;