最近项目用到了蓝牙连接,搜索设备的内容,其中需要搜索过程中出现波纹的动画效果,在这里将项目中OC语言编写的这种动画效果,转换成Swift编写,下面简单介绍说明一下代码。

这里用到了两种方法实现波纹效果,一种是波纹持续显示,一种是点击以后出现一次波纹的效果

首先是第一种,持续显示波纹

这个内容是重写绘图方法,override func drawRect(rect: CGRect){ }

首先需要设置显示波纹的数量,然后运用for循环进行创建,动画效果,并且添加到layer上

let pulsingCountT:NSInteger = 4;
        let animationDurationN:Double = 4;
        let animationLayerR = CALayer.init();
        for i in 0 ..< pulsingCountT {
            let pulsingLayer = CALayer.init();
            pulsingLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
            pulsingLayer.borderColor = UIColor.redColor().CGColor;
            pulsingLayer.borderWidth = 1;
            pulsingLayer.cornerRadius = rect.size.height/2;
            
            let defaultCurveE = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionDefault);
            
            let animationGroupP = CAAnimationGroup.init();
            animationGroupP.fillMode = kCAFillModeBackwards;
            animationGroupP.beginTime = CACurrentMediaTime() + Double(i) * animationDurationN / Double(pulsingCountT);
            animationGroupP.duration = animationDurationN;
            animationGroupP.repeatCount = HUGE;
            animationGroupP.timingFunction = defaultCurveE;
            
            let scaleAnimationN = CABasicAnimation.init(keyPath: "transform.scale");
            scaleAnimationN.fromValue = 1.4;
            scaleAnimationN.toValue = 2.2;
            
            let opacityAnimationN = CAKeyframeAnimation.init(keyPath: "opacity");
            opacityAnimationN.values = [1,0.9,0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1,0];
            opacityAnimationN.keyTimes = [0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1];
            
            animationGroupP.animations = [scaleAnimationN,opacityAnimationN];
            pulsingLayer.addAnimation(animationGroupP, forKey: "plulsing");
            animationLayerR.addSublayer(pulsingLayer);
            
        }
        self.layer.addSublayer(animationLayerR);

绘图完成后,进行添加

//圈视图
        circleV = CircleView.init();
        circleV.frame = CGRectMake(100, 60, 100, 100);
        circleV.hidden = true;
        circleV.backgroundColor = UIColor.clearColor();
        self.view.addSubview(circleV);
        //类方法的调用,只能类本事调用,与OC中的类方法(加号)形式一样
        CircleView.showLogStr();
        
        //点击出现圈视图,第一种持续扩散的圈
        let button1 = UIButton.init(frame: CGRectMake(100, 60, 100, 100));
        button1.setTitle("开启搜索", forState: .Normal);
        button1.backgroundColor = UIColor.yellowColor();
        button1.layer.cornerRadius = 50;
        button1.clipsToBounds = true;
        button1.setTitleColor(UIColor.blueColor(), forState: .Normal);
        button1.addTarget(self, action: #selector(button1Click), forControlEvents: .TouchUpInside);
        self.view.addSubview(button1);

//按钮的点击事件
    func button1Click(btn:UIButton) {
        circleV.hidden = false;
    }

然后是实现点击出现一次波纹的效果

这里用到了类似于OC中类别category文件的实现,使用extension创建类似于类别文件:extension UIView { }

//创建可点击出现的圆圈方法,参数一:表示圈的颜色,参数二:表示圈相对于View扩散的比例大小
    func showCircleAnimationLayerWithColor(circleColor:UIColor,andScale aScale:CGFloat){
        if (self.superview == false) && (circleColor == true) {
            return;
        }
        
        let pathFrameE = CGRectMake(-CGRectGetMidX(self.bounds), -CGRectGetMidY(self.bounds), self.bounds.size.width, self.bounds.size.height);
        
        let pathH = UIBezierPath.init(roundedRect: pathFrameE, cornerRadius: self.layer.cornerRadius);
        
        let shapePositionN = self.superview?.convertPoint(self.center, fromView: self.superview);
        
        //内圈1
        let circleShapeE1 = CAShapeLayer.init();
        circleShapeE1.path = pathH.CGPath;
        circleShapeE1.position = shapePositionN!;
        circleShapeE1.fillColor = UIColor.clearColor().CGColor;
        //不透明
        circleShapeE1.opacity = 0;
        circleShapeE1.strokeColor = circleColor.CGColor;
        circleShapeE1.lineWidth = 0.6;
        self.superview?.layer.addSublayer(circleShapeE1);
        
        let scaleAnimationN1 = CABasicAnimation.init(keyPath: "transform.scale");
        scaleAnimationN1.fromValue = NSValue.init(CATransform3D: CATransform3DIdentity);
        scaleAnimationN1.toValue = NSValue.init(CATransform3D: CATransform3DMakeScale(aScale, aScale, 1));
        scaleAnimationN1.duration = 2;
        scaleAnimationN1.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear);
        circleShapeE1.addAnimation(scaleAnimationN1, forKey: nil);
        
        let alphaAnimationN1 = CABasicAnimation.init(keyPath: "opacity");
        alphaAnimationN1.fromValue = 1;
        alphaAnimationN1.toValue = 0;
        alphaAnimationN1.duration = 1.8;
        alphaAnimationN1.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut);
        circleShapeE1.addAnimation(alphaAnimationN1, forKey: nil);
        
        //内圈2
        let circleShapeE2 = CAShapeLayer.init();
        circleShapeE2.path = pathH.CGPath;
        circleShapeE2.position = shapePositionN!;
        circleShapeE2.fillColor = circleColor.CGColor;
        //不透明
        circleShapeE2.opacity = 0;
        circleShapeE2.strokeColor = UIColor.clearColor().CGColor;
        circleShapeE2.lineWidth = 0;
        self.superview?.layer.insertSublayer(circleShapeE2, atIndex: 0);
        
        let scaleAnimationN2 = CABasicAnimation.init(keyPath: "transform.scale");
        scaleAnimationN2.fromValue = NSValue.init(CATransform3D: CATransform3DIdentity);
        scaleAnimationN2.toValue = NSValue.init(CATransform3D: CATransform3DMakeScale(aScale, aScale, 1));
        scaleAnimationN2.duration = 2;
        scaleAnimationN2.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear);
        circleShapeE2.addAnimation(scaleAnimationN2, forKey: nil);
        
        let alphaAnimationN2 = CABasicAnimation.init(keyPath: "opacity");
        alphaAnimationN2.fromValue = 0.8;
        alphaAnimationN2.toValue = 0;
        alphaAnimationN2.duration = 1.7;
        alphaAnimationN2.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut);
        circleShapeE2.addAnimation(alphaAnimationN2, forKey: nil);
        
        //线程
        let timeE:dispatch_time_t = dispatch_time(DISPATCH_TIME_NOW, 2*Int64(NSEC_PER_SEC));
        dispatch_after(timeE, dispatch_get_main_queue()) {
            circleShapeE1.removeFromSuperlayer();
            circleShapeE2.removeFromSuperlayer();
        };
    }

方法的调用:

//第二种方式,点击出现一个圈视图,而不是持续
        let button2 = UIButton.init(frame: CGRectMake(100, 270, 120, 60));
        //根据width与height,1:2的比例创建一个椭圆视图
        button2.updateMaskToBounds(button2.bounds);
        button2.setTitle("点击", forState: .Normal);
        button2.backgroundColor = UIColor.yellowColor();
        //button2.layer.cornerRadius = 30;
        button2.clipsToBounds = true;
        button2.setTitleColor(UIColor.blueColor(), forState: .Normal);
        button2.addTarget(self, action: #selector(button2Click), forControlEvents: .TouchUpInside);
        self.view.addSubview(button2);

按钮点击方法

func button2Click(btn:UIButton) {
        btn.showCircleAnimationLayerWithColor(UIColor.whiteColor(), andScale: 3);
    }

效果图:

源代码Demo(还有类方法的使用):http://download.csdn.net/detail/hbblzjy/9631221

Swift基础之显示波纹样式的更多相关文章

  1. Swift基础语法学习总结(转)

    Swift基础语法学习总结 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...

  2. Swift基础语法学习总结

    Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift ...

  3. Swift基础之PickerView(时间)选择器

    代码讲解:(后面有额外代码讲解) 首页设计UIPickerView的样式设计: leftArray = ["花朵","颜色","形状"]; ...

  4. swift基础:第六部分:类与对象

    http://reactnative.cn/docs/0.24/getting-started.html#content(react Native 开发文档) 互联网这个时代,你松懈一天,就会有很多很 ...

  5. swift基础:第二部分:函数和闭包

    今天本来想利用上午的时间本来打算将swift基础部分学习完的,不巧的是,后台来和我讨论用户评价的接口,讨论过后,商讨出一种可行的方案,十几分钟时间过去了,我拿到将接口介入到已经完成的页面中,完美,终于 ...

  6. Android项目实战(十四):TextView显示html样式的文字

    项目需求: TextView显示一段文字,格式为:(消息个数,不确定)条消息 这段文字中名字和数字的长度是不确定的,还要求名字和数字各自有各自的颜色. 一开始我想的是用(转) SpannableStr ...

  7. swift -- 基础

    swift -- 基础 1.常量和变量 常量: let 变量: var 2.声明常量和变量 常量的声明: let let  a = 1         //末尾可以不加分号,等号两边的空格必须对应(同 ...

  8. iOS Swift 模块练习/swift基础学习

    SWIFT项目练习     SWIFT项目练习2 iOS Swift基础知识代码 推荐:Swift学习使用知识代码软件 0.swift中的宏定义(使用方法代替宏) 一.视图  +控件 1.UIImag ...

  9. Swift基础学习

    Swift基础学习  http://c.biancheng.net/cpp/html/2242.html 这个网站最近看了一下,对于基本语法解释概括的相对全面,如同重新练习一遍OC似的,挺全面的,谢谢 ...

随机推荐

  1. Django+nginx+uwsgi部署教程(centos7+ubuntu16.4)

    在线教育平台项目演示地址 项目部署教程 1.1.工作原理介绍 django 一个基于python的开源web框架 uwsgi 一是一个web服务器,也可以当做中间件 nginx 常用高性能代理服务器 ...

  2. Django中ORM操作

    ORM操作: class UserInfo(models.Model): username = models.CharField(max_length=32) password = models.Ch ...

  3. Python3中无法导入ssl模块的解决办法

    这个问题,已经困扰我好几天了,本萌新刚开始接触python,想爬取几个网页试试,发现urllib无法识别https,百度后才知道要导入ssl模块,可是发现又报错了. 本人实在无法理解为什么会报错,因为 ...

  4. 一个使用 Python 的人工智能聊天机器人框架

    一个Python 的 AI Chatbot框架 建立一个聊天室可以听起来很棒,但它是完全可行的. IKY是一个内置于Python中的AI动力对话对话界面. 使用IKY,很容易创建自然语言会话场景,无需 ...

  5. Vue.js + Webpack

    vue.js Vue.js是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 以上是Vue.js官方定义,故名思议,以数据驱动视 ...

  6. promise应用及原生实现promise模型

    一.先看一个应用场景 发送一个请求获得用户id, 然后根据所获得的用户id去执行另外处理.当然这里我们完全可以使用回调,即在请求成功之后执行callback; 但是如果又添加需求呢?比如获得用户id之 ...

  7. hadoop hdfs 高可用

    单点故障: 如果某一个节点或服务出了问题,导致服务不可用 单点故障解决方式: 1.给容易出故障的地方安排备份 2.一主一备,要求同一时刻只能有一个对外提供服务 3.当active挂掉之后,standb ...

  8. c#下winform的ftp上传

    /* FTPFactory.cs Better view with tab space=4 Written by Jaimon Mathew (jaimonmathew@rediffmail.com) ...

  9. Linux下查看进程打开的文件句柄数

    ---查看系统默认的最大文件句柄数,系统默认是1024 # ulimit -n ----查看当前进程打开了多少句柄数 # lsof -n|awk '{print $2}'|sort|uniq -c|s ...

  10. ACM Adding Reversed Numbers(summer2017)

    The Antique Comedians of Malidinesia prefer comedies to tragedies. Unfortunately, most of the ancien ...