录音麦克风环形动画
2016-08-28 本文已影响204人
半城coding
65.jpg
Paste_Image.png
项目中需要录音功能,点击录音的时候会有一个环形渐变的图形围绕麦克风转圈的动画。
Paste_Image.png
实现起来并不困难,我的思路如下:
1、自定义一个RecordView层。该层包含了 麦克风图标 和 环形转圈的动画Layer层。
2、添加一个单击、长按手势。
3、使用 CABasicAnimation 动画来实现 环形图形的转圈效果。
4、将动画开始和结束时的事件通过 Delegate 传递到上层。
部分代码如下:
动画开始
- (void) startAnimation{
self.isAnimation = YES;
CABasicAnimation* rotationAnimation =
[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];//"z"还可以是“x”“y”,表示沿z轴旋转
rotationAnimation.toValue = [NSNumber numberWithFloat:(2 * M_PI)];
rotationAnimation.duration = 1.0f;
rotationAnimation.repeatCount = NSIntegerMax;
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[self.anmationLayer addAnimation:rotationAnimation forKey:@"rotation"] ;
if (self.delegate && [self.delegate respondsToSelector:@selector(startRecord:)]) {
[self.delegate startRecord:self];
}
}
动画结束
- (void) endAanimation{
self.isAnimation = NO;
[self.anmationLayer removeAnimationForKey:@"rotation"];
if (self.delegate && [self.delegate respondsToSelector:@selector(endRecord:)]) {
[self.delegate endRecord:self];
}
}
总结: 这个效果并不难实现 主要是对 动画层的熟悉和应用 。
关于动画下面这个教程详细的介绍了ios上各种动画的正确的打开方式
https://zsisme.gitbooks.io/ios-/content/
另附Demo的下载地址 :https://github.com/githubliuming/QYRecordView