动画

动画

动画: 即在应用界面上展示的各种过度效果.

• 一个产品在运行的时候,动画并不会影响产品的功能.
• 传达状态
• 提高用户对直接操作的感知- 帮助用户可视化操作的结果

动画大纲

2016-04-20 下午8.52.01.png

@interface RootViewController ()
@property (nonatomic, strong) UIView *redView;
@property (nonatomic, strong) UIView *greenView;
@end
#pragma mark------redView懒加载
- (UIView *)greenView{ 
if (!_greenView) { 
_greenView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 50, 50)];
 _greenView.backgroundColor = [UIColor greenColor];  
} 
return _greenView;
}
- (UIView *)redView { if (!_redView) { _redView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 50, 50)]; _redView.backgroundColor = [UIColor redColor];
// [self.view addSubview:_redView]; 
} 
return _redView; 
}
#先创建一个button的初始化方法
- (void)buttonWithTitle:(NSString*)title action:(SEL)action frame:(CGRect)frame{
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
[button setFrame:frame];
[button setTitle:title forState:UIControlStateNormal];
[button addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];return button;}

//添加一个 button 按钮
- (void)viewDidLoad{
UIButton *button_1 = [self buttonWithTitle:@"动画块" action:@selector(animation) frame:CGRectMake(50, 400, 60, 50)];
[self.view addSubview:button_1];
}

#pragma mark-----button 的点击方法
- (void)animation {
//第一个参数：动画的标记
//第二个参数：上下文，可以为动画的代理方法传值
[UIView beginAnimations:@"第一个动画" context:@"11"];
//动画时长
[UIView setAnimationDuration:2];
//重复次数 
[UIView setAnimationRepeatCount:5];
//设置翻转,让动画原速返回,只有设置了重复次数，此属性才能生效 [UIView setAnimationRepeatAutoreverses:YES];
//代理方法 
[UIView setAnimationDelegate:self];
//动画开始时的代理方法 
[UIView setAnimationWillStartSelector:@selector(animationWillStart: context:)];
//动画停止时的代理方法 [UIView setAnimationDidStopSelector:@selector(animationStop)];

//改变redView的frame 
//OC提下的点和C语言的点，意义不一样，不能直接复制
CGRect rect = self.redView.frame; 
rect.origin = CGPointMake(200, 300); 
self.redView.frame = rect;
//提交动画
 [UIView commitAnimations];
}
#pragma mark-----动画开始时的调用的方法
- (void)animationWillStart:(NSString *)animationTag context:(NSString *)context{
 NSLog(@"%@动画开始-------context------%@",animationTag,context);
}
#pragma mark----动画结束时调用的方法
- (void)animationStop{
 NSLog(@"动画结束了");
}

block 动画的常见三种形式;

- (void)viewDidLoad{
UIButton *button_2 = [self buttonWithTitle:@"block 动画" action:@selector(blockAnimation) frame:CGRectMake(160, 400, 100, 50)];
[self.view addSubview:button_2];}
#pragma mark----block动画1
[UIView animateWithDuration:3.0 animations:^{ 
//需要改变的属性 
self.redView.backgroundColor = [UIColor cyanColor];
 }];
#pragma mark----block动画2 
//多了动画结束的 block参数
 [UIView animateWithDuration:3.0 animations:^{ self.redView.backgroundColor = [UIColor cyanColor]; 
} completion:^(BOOL finished) { 
if(finished){
//说明动画结束 self.redView.backgroundColor = [UIColor redColor]; 
} 
}];
#pragma mark----block动画3 
//delay:延时
 //options:动画速率或者是动画效果的一个配置 
[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{ [UIView setAnimationRepeatCount:5]; 
[UIView setAnimationRepeatAutoreverses:YES]; 
//所有的动画配置,必须写在属性改变的上面 self.redView.frame = CGRectMake(300, 400, 50, 50); 
} completion:^(BOOL finished) { self.redView.backgroundColor = [UIColor cyanColor]; 
}];
}

转场动画

#pragma mark-----转场动画的调用方法
- (void)transitionAnimation{ 
//本质原理:
 [self.redView.superView addSubView:self.greenView]; 
//[self.redView removeFromSuperView]; 
[UIView transitionFromView:self.redView toView:self.greenView duration:1.5 options:UIViewAnimationOptionTransitionFlipFromRight completion:nil];
}

高级动画,关键帧

- (void)keyFrameAnimation{
//要使一个 view 走一个矩形
void (^blockFrame)(void) = ^(){
for(int i = 0; i < 4;i++){
[UIView addKeyframeWithRealativeStartTime:i/4.0 relativeDuration;1/4.0 animations:^{
CGRect redFrame = self.redView.frame;
switch(i){
case0;
 redFrame.origin.x += 200; 
self.redView.frame = redFrame;
 break;
case 1: 
redFrame.origin.y += 200; 
self.redView.frame = redFrame; 
break;
case 2: 
redFrame.origin.x -= 200;
 self.redView.frame = redFrame;
 break;
case 3: 
redFrame.origin.y -= 200; 
self.redView.frame = redFrame; 
break;
default: 
break;
}
}];
}
}
[UIView animateKeyframesWithDuration:4.0 delay:0.0 options:UIViewKeyframeAnimationOptionBeginFromCurrentState animations:blockFrame completion:nil];
// [UIView animateKeyframesWithDuration:4.0 delay:0.0 options:UIViewKeyframeAnimationOptionBeginFromCurrentState animations:^{
// //关键帧
// //startTime:当前帧的开始时间. startTime*总时长
// //一帧的时长: relativeDuration.relativeDuration*总时长. 范围0-1
// [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.2 animations:^{// self.redView.frame = CGRectMake(200,80, 100, 100);// }];
//
 } completion:^(BOOL finished) {

}];
}

spring 动画,果冻效果,弹簧效果

#pragma mark------spring 动画,果冻效果.弹簧效果
- (void)springAnimation{ 
//damping:阻尼 
//velocity:初始速率

[UIView animateWithDuration:2.0 delay:0.0 usingSpringWithDamping:0.1 initialSpringVelocity:50 options:UIViewAnimationOptionRepeat animations:^{
self.redView.frame = CGRectMake(100, 200, 100, 100); self.redView.backgroundColor = [UIColor blackColor];  
} completion:nil]; 
}