动画
动画: 即在应用界面上展示的各种过度效果.
- 一个产品在运行的时候,动画并不会影响产品的功能.
- 传达状态
- 提高用户对直接操作的感知- 帮助用户可视化操作的结果
动画大纲
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];
}
