用Swift仅4步实现一个不断渐变的圆环

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看130 回复回复2 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 130|回复: 2
收起左侧

用Swift仅4步实现一个不断渐变的圆环

[复制链接]
Caesar 发表于 2016-10-20 01:14:03 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码

敏捷大拇指上看了一位大牛的博客,试着写了一个不断渐变的圆环,如果理解了可以做弧形、直线等其他形状的颜色渐变进度条。

用Swift仅4步实现一个不断渐变的圆环

用Swift仅4步实现一个不断渐变的圆环 - 敏捷大拇指 - 用Swift仅4步实现一个不断渐变的圆环





1、声明所用变量,用了两个数组colorArray来显示 颜色渐变的过渡动画。

(Swift数组的copy没找到。。。。先那样代替吧)

[Swift] 纯文本查看 复制代码
import UIKit

class CustomProgessView: UIView {
    
    let duration = 2.0
    
    //圆环,作为mask来使用
    let shapeLayer = CAShapeLayer()!
    
    //渐变背景
    let colorLayer = CAGradientLayer()!
    var colorsArray = [UIColor.redColor().CGColor, UIColor.yellowColor().CGColor, UIColor.greenColor().CGColor, UIColor.purpleColor().CGColor]
    var colorsArray1 = [UIColor.redColor().CGColor, UIColor.yellowColor().CGColor, UIColor.greenColor().CGColor, UIColor.purpleColor().CGColor]
}





2、初始化,画背景和圆环

[Swift] 纯文本查看 复制代码
override init(frame: CGRect) {
        super.init(frame: frame)
        showCircle()
        
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        showCircle()
    }
    
    func showCircle() {
//        let startAngle = CGFloat(M_PI * -220.0 / 180.0)
//        let endAngle =  CGFloat(M_PI * 40.0 / 180.0)
//        
//        shapeLayer.path = UIBezierPath(arcCenter: CGPointMake(bounds.size.width / 2, bounds.size.height / 2), radius: bounds.size.width / 2 - 20, startAngle: startAngle, endAngle: endAngle, clockwise: true).CGPath
        
        
        //画圆环
        shapeLayer.path = UIBezierPath(ovalInRect: CGRectInset(bounds, 50, 50)).CGPath
        shapeLayer.strokeColor = UIColor.grayColor().CGColor
        shapeLayer.fillColor = UIColor.clearColor().CGColor
        shapeLayer.lineWidth = 40.0
        
        //画渐变背景
        colorLayer.frame = bounds;
        colorLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
        colorLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
        colorLayer.colors = colorsArray
        
        //设置mask来遮住背景
        colorLayer.mask = shapeLayer
        layer.addSublayer(colorLayer)
        
        //渐变背景开始做动画
        bgAnimation()
    }





3、背景渐变动画

[Swift] 纯文本查看 复制代码
func bgAnimation() {
        var oneColor = colorsArray1.last
        colorsArray1.insert(oneColor, atIndex: 0)
        colorsArray1.removeLast()

        
        let animation = CABasicAnimation(keyPath: "colors")
        animation.duration = duration
        animation.fromValue = colorsArray
        animation.toValue = colorsArray1
        animation.removedOnCompletion = false
        animation.fillMode = kCAFillModeForwards
        animation.delegate = self;
        
        colorLayer.addAnimation(animation, forKey: "colors")
    }





4、动画结束以后更改颜色数组的顺序,来继续动画

[Swift] 纯文本查看 复制代码
override func animationDidStop(anim: CAAnimation!, finished flag: Bool) {
        var oneColor = colorsArray.last
        colorsArray.insert(oneColor, atIndex: 0)
        colorsArray.removeLast()

        bgAnimation()
    }






完毕。

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 发帖就是光荣,分享精神可嘉!.

查看全部评分

瑶池 发表于 2016-10-20 18:53:14 | 显示全部楼层
棒棒的!
 楼主| Caesar 发表于 2016-10-20 19:10:52 | 显示全部楼层

谢美女捧场
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表