录音麦克风环形动画

作者: 半城coding | 来源:发表于2016-08-28 11:11 被阅读204次
    65.jpg

    项目中需要录音功能,点击录音的时候会有一个环形渐变的图形围绕麦克风转圈的动画。


    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

    相关文章

      网友评论

        本文标题:录音麦克风环形动画

        本文链接:https://www.haomeiwen.com/subject/tgbtettx.html