今天给大家分享一篇有关动画的知识, 主要是用storyboard写的😄.
因为没有太多的时间, 我就不给大家详细介绍storyboard的具体用法了(以后有空的话我会专门写一篇有关storyboard的文章), 其实也可以用代码代替的, 只要合理设置控件的坐标就好了.
首先, 我们需要创建一些控件.
先上图吧, 这个是我在Main.storyboard里放置的所有控件, 在图里都有备注.
各button都有自己的方法, 我们通过点击不同的button使view产生不同的动画, 比如改变尺寸,背景颜色, 透明度等等. 放置imageView是为了模仿音乐播放时的明星照片旋转动画的效果. 是不是很期待呢?
我们先将Main.storyboard里的控件拖到viewController里成为属性.
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *MusicImageView;
@property (weak, nonatomic) IBOutlet UIView *testView;
@property (nonatomic, assign)BOOL isPlaying;
@end
各个Button的方法也从Main.storyboard里依次拖到viewController里. 各方法的实现内容如下:
尺寸动画按钮的方法:
//修改尺寸:
- (IBAction)didClickedSizeButton:(id)sender
{
[UIView animateWithDuration:2 animations:
^{
self.testView.frame = CGRectMake(120, 120, 50, 50);//可以在completion里继续写动画
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 animations:
^{
self.testView.frame = CGRectMake(0, 0, 50, 50);
} completion:^(BOOL finished) {
}];
}];
}
第一个参数意思是动画的持续时间, 第二个参数的意思是动画的内容, 上边的实现结果是view尺寸改变为(50, 50)后跑到左上角(0, 0)的位置, 还可以继续在completion里继续写动画. 我在一些方法里NSLog了"动画结束". 以此确定动画是否结束.
颜色动画按钮方法:
//修改颜色:
- (IBAction)didClickedColorButton:(id)sender
{
[UIView animateWithDuration:3 animations:^{
self.testView.backgroundColor = [UIColor greenColor];
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
}
参数的意义不变, 3秒钟后view的背景色变成绿色, 不用动画方法直接一句self.testView.backgroundColor = [UIColor greenColor]只是硬生生的直接绿了, 动画方法有一个渐变的过程.
透明度动画按钮方法:
//修改透明度:
- (IBAction)didClickedAlphaButton:(id)sender
{
[UIView animateWithDuration:3 animations:^{
self.testView.alpha = 0.3;
} completion:^(BOOL finished) {
NSLog(@"动画结束");
}];
}
渐渐的就朦胧了, 对于我这个新手来说感觉真的很神奇啊!
那么问题来了, 变化之后该怎么回去呢? 所以我们还需要一个复原按钮, 通过点击它来实现复原的效果.
//复原:
- (IBAction)didClickedResetButton:(id)sender
{
// self.testView.frame = CGRectMake(120, 40, 240, 200);
// self.testView.backgroundColor = [UIColor orangeColor];
// self.testView.alpha = 1;
[UIView animateWithDuration:3 animations:^{
self.testView.frame = CGRectMake(120, 40, 240, 200);
self.testView.backgroundColor = [UIColor orangeColor];
self.testView.alpha = 1;
} completion:^(BOOL finished)
{
NSLog(@"动画结束");
}];
}
只要在方法里复原下view的最初属性就可以了.
基本按钮方法:
- (IBAction)didClickedBaseAnimationButton:(id)sender
{
//开始动画(动画的代码必须写在开始和结束之间)
[UIView beginAnimations:@"move" context:nil];
//设置动画的时长:
[UIView setAnimationDuration:2];
//设置代理人:
[UIView setAnimationDelegate:self];//(不用签协议)
//动画代码:
self.testView.backgroundColor = [UIColor greenColor];
//结束动画
[UIView commitAnimations];
}
必要的地方我都在代码里写好备注了, 既然设置了代理人, 那肯定也有它的一些代理方法吧.
//(基本按钮)代理方法:
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
NSLog(@"动画结束!");
}
- (void)animationWillStart:(NSString *)animationID context:(void *)context
{
NSLog(@"动画开始");
}
这个大家看看就行了.
动画位移按钮方法:
- (IBAction)didClickedMoveButton:(id)sender
{
//移动:(不累加)
// self.testView.transform = CGAffineTransformMakeTranslation(0, 300);//复原后不能移动了
//移动:(累加)
self.testView.transform = CGAffineTransformTranslate(self.testView.transform, 0, 50);
}
这里注释掉的那个方法复原后不能再移动了, 也就是不能累加, 下面那个是可以累加的.
动画缩放按钮方法:
- (IBAction)didClickedScaleButton:(id)sender
{
//缩放:(不累加)
// self.testView.transform = CGAffineTransformMakeScale(1.5, 1.5);//因为没有参考上一次的方法所以复原后不能使用了
//缩放:(累加):参数为缩放倍数
self.testView.transform = CGAffineTransformScale(self.testView.transform, 1.5, 1.5);
}
同理, 也有累加和不累加两种, 不能累加的原因, 我也只是个菜鸟, 不敢妄下结论, 个人觉得应该是缺了前边的参照.
动画旋转按钮方法:
- (IBAction)didClickedTurnButton:(id)sender
{
self.testView.transform = CGAffineTransformRotate(self.testView.transform, -M_PI_4);
//正数顺时针,负数逆时针转,π/4
}
正负数和方向有关系, PI就是π.
关键帧按钮方法:
- (IBAction)didClickedImportantButton:(id)sender
{
// spring动画:
// 参数1 : 动画时长
// 参数2 : 延迟的时间
// 参数3 : 弹力系数(0~1)
// 参数4 : 视图移动的速度(<= 200)
// 参数5 : 视图出现的效果
[UIView animateWithDuration:2 delay:0.0 usingSpringWithDamping:2 initialSpringVelocity:15 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.testView.center = CGPointMake(200, 400);
} completion:^(BOOL finished) {
NSLog(@"动画结束!");
}];
//关键帧动画:
// [UIView animateKeyframesWithDuration:2 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse animations:^{
// [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.25 animations:^{
// self.testView.center = self.view.center;
// self.testView.backgroundColor = [UIColor yellowColor];
// }];
// } completion:^(BOOL finished)
// {
// NSLog(@"动画结束!");
// }];
}
写了两种方法, 大家都可以试试, 第一种方法是有弹性动画的那种, 我个人更喜欢一些.
按钮方法写完了, 还有一个问题, 我们要模仿音乐播放时歌手写真图旋转的效果, 代码都在viewDidLoad里.
//修改边界
self.MusicImageView.layer.cornerRadius = 100;
self.MusicImageView.layer.masksToBounds = YES;//允许修改边界
self.MusicImageView.userInteractionEnabled = YES;
//添加手势
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(playPauseAction)];
[self.MusicImageView addGestureRecognizer:tapGesture];
[NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(imageTurning) userInfo:nil repeats:YES];
//获取testView的尺寸:
NSLog(@"%@", NSStringFromCGRect(self.testView.frame));
上边添加了一个手势方法和imageTurning(让图片旋转)的方法, 在viewDidLoad外边实现.
#pragma mark -- 暂停播放手势方法:
-(void)playPauseAction
{
self.isPlaying = !_isPlaying;
}
#pragma mark -- 图片旋转一度:
-(void)imageTurning
{
if (_isPlaying == YES)
{
self.MusicImageView.transform = CGAffineTransformRotate(self.MusicImageView.transform, M_PI / 180);
}
}
这样, 我们的效果就完成了. 暂停的时候点击图片它就停止了转动, 再点一下又会继续"播放".
怎么样, 看着控件这么活泼飘逸, 是不是很有趣呢.
其实我也是刚接触不久, 很多东西都不太明白, 还要向大家多多请教, 以后我会在空闲的时候继续给大家分享一些我所学的一些知识, 希望能和大家一起交流学习, 共同进步!
