正如标题所说,iOS开发中,动画是很容易实现的功能.
苹果官网提供了很多动画的方案,比如UIView动画,核心动画等.
其中UIView动画又包含首尾式动画,block动画等;
核心动画:
image.png
我们从比较简单的UIView-block动画开始学习.
Demo01:block动画展示
- 逻辑实现:在block动画的block中对view的transform进行修改,结合block动画的属性设置(Duration:持续时间,Delay:延迟等),达到动画效果
代码如下
#pragma mark - 添加
-(void)add{
UIView *blackView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
_blackView=blackView;
blackView.center=self.view.center;
blackView.backgroundColor=[UIColor blackColor];
[self.view addSubview:blackView];
}
#pragma mark - 删除
-(void)remove{
[_blackView removeFromSuperview];
}
#pragma mark - 变大
-(void)big{
CGRect tempBounds=_blackView.bounds;
tempBounds.size.height+=10;
tempBounds.size.width+=10;
[UIView animateWithDuration:0.5 animations:^{
_blackView.bounds=tempBounds;
}];
}
#pragma mark - 变小
-(void)small{
CGRect tempBounds=_blackView.bounds;
tempBounds.size.height-=10;
tempBounds.size.width-=10;
[UIView animateWithDuration:0.5 animations:^{
_blackView.bounds=tempBounds;
}];
}
#pragma mark - 平移
-(void)translate{
[UIView animateWithDuration:0.5 animations:^{
_blackView.transform=CGAffineTransformTranslate(_blackView.transform, 20, 20);
}];
}
#pragma mark - 缩放
-(void)scale{
[UIView animateWithDuration:0.5 animations:^{
_blackView.transform=CGAffineTransformScale(_blackView.transform, 2, 2);
}];
}
#pragma mark - 旋转
-(void)rotate{
[UIView animateWithDuration:0.5 animations:^{
_blackView.transform=CGAffineTransformRotate(_blackView.transform, M_PI_4/3);
}];
}
#pragma mark - 复原
-(void)reset{
[UIView animateWithDuration:0.5 animations:^{
_blackView.transform=CGAffineTransformIdentity;
}];
}
#pragma mark - 抖动1
-(void)shakeItOne{
_blackView.transform=CGAffineTransformMakeTranslation(50, 50);
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0.1 options:UIViewAnimationOptionCurveLinear animations:^{
_blackView.transform=CGAffineTransformIdentity;
} completion:nil];
}
#pragma mark - 抖动2
-(void)shakeItTwo{
_blackView.transform=CGAffineTransformMakeRotation(M_PI_4);
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0.1 options:UIViewAnimationOptionCurveLinear animations:^{
_blackView.transform=CGAffineTransformIdentity;
} completion:nil];
}
-
动画图示:
Block动画演示.gif
Demo02:咻一咻-支付宝(这个功能已经被阿里取消了)
这个Demo的思想就是在点击最上面的button时,在button下面循环插入与button等大小的圆形View,并且延迟按序变大,颜色从蓝色向视图背景颜色渐变.
block动画不光可以改变transform,可以完成颜色的渐变.
-(void)setUpUI{
self.view.backgroundColor=[UIColor corgi_colorWithR:34 G:41 B:64];
UIButton *xiuButton=[[UIButton alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];
xiuButton.center=self.view.center;
[xiuButton setBackgroundImage:[UIImage imageNamed:@"xiu"] forState:UIControlStateNormal];
[xiuButton addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:xiuButton];
}
#pragma mark - 点击事件
-(void)click{
for (int i=0; i<10; i++) {
//添加view
UIView *tempView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 80)];
//设置view位置
tempView.center=self.view.center;
//设置view属性
tempView.backgroundColor=[UIColor blueColor];
//设置圆角
tempView.layer.cornerRadius=40;
//插入到最底层
[self.view insertSubview:tempView atIndex:0];
//执行动画类方法
[UIView animateWithDuration:3
delay:i*0.3
options:UIViewAnimationOptionCurveLinear
animations:^{
//动画目标-scale
tempView.transform=CGAffineTransformMakeScale(8, 8);
//动画目标-alpha=0
tempView.alpha=0;
//动画目标-颜色接近
tempView.backgroundColor=self.view.backgroundColor;
}
completion:^(BOOL finished) {
//动画结束-抹去view
[tempView removeFromSuperview ];
}];
}
}
动画效果:
咻一咻.gif
补充:首尾式动画
//动画开始标记
UIView beginAnimations:nil context:nil];
// 设置执行动画的时间
[UIView setAnimationDuration:0.5];
// 需要执行动画操作的代码
_redView.bounds = tempBounds;
// 提交动画 , 如果不写下面这段代码, 会影响整个view
[UIView commitAnimations];
Tips:首尾式动画没有block动画的阅读性,整体性强,设置动画属性繁琐.所以推荐使用block动画,首尾式动画只要了解原理就可以了.
--------------------------------------------------分割线--------------------------------------------------
写在后面,也不知道谁能看到:最近要做项目了,每天的内容会少一些,见谅.
