CAShaplayer实现一个加载动画

最后都变了- 提交于 2020-03-27 07:19:10

思路:

方法 创建一个图层,图层要求圆形,可传参数颜色、大小 

方法 给图层设置位置和整个加载动画的大小

之后给其添加动画,并且注意动画的beginTime要有间距

创建Layer

func createLayerWith(size:CGSize,color:UIColor) -> CALayer{

        let layer:CAShapeLayer = CAShapeLayer()

        let path:UIBezierPath = UIBezierPath()

        //addArcWithCenter,就是根据中心点画圆

        /**

         center:CGPoint 中心点

         radius:CGFloat 半径

         startAngle:CGFloat 开始的弧度

         endAngle:CGFloat 结束的弧度

         clockwise:Bool 绘图方向 true:顺时针 false:逆时针

         */

        path.addArcWithCenter(CGPointMake(size.width/2, size.height/2), radius: size.width/2, startAngle: 0, endAngle: CGFloat(2*M_PI), clockwise: false)

        layer.lineWidth = 2

        layer.fillColor = color.CGColor

        layer.backgroundColor = nil

        layer.path = path.CGPath

        return layer

    }

根据传入参数,角度angle也就是每个圆对于圆心的角度,size就是小圆的半径,origin加载动画中心所在的位置,containerSize加载动画的尺寸,和颜色

    func createCircle(angle:CGFloat, size:CGFloat,origin:CGPoint,containerSize:CGSize,color:UIColor)->CALayer{

        let radius = containerSize.width/2

        let circle = createLayerWith(CGSizeMake(size, size), color: color)

        let frame = CGRectMake(origin.x+radius*(cos(angle)+1)-size/2, origin.y+radius*(sin(angle)+1)-size/2, size, size)

        circle.frame = frame

        return circle

    }

以下是设置动画的过程,创建动画组

let scaleAnimation = CAKeyframeAnimation.init(keyPath: "transform.scale")

        //该属性用以制定每个子路径的时间

        scaleAnimation.keyTimes = [0,0.5,1]

        //关键帧点

        scaleAnimation.values = [1,0.4,1]

        scaleAnimation.duration = 1

        

        

        let opacityAnimation = CAKeyframeAnimation.init(keyPath: "opacity")

        opacityAnimation.keyTimes = [0,0.5,1]

        opacityAnimation.values = [1,0.3,1]

        opacityAnimation.duration = 1

        

        let animation = CAAnimationGroup()

        

        animation.animations = [scaleAnimation,opacityAnimation]

        animation.duration = 1

        animation.repeatCount = HUGE

        animation.removedOnCompletion = false

        

        for index in 0...7{

            let circle = createCircle(CGFloat(M_PI_4*Double(index)), size: 10, origin: CGPointMake(50, 50), containerSize: CGSizeMake(50, 50), color: UIColor.redColor())

            animation.beginTime = Double(index)*0.125

            circle.addAnimation(animation, forKey: "animation")

            self.view.layer.addSublayer(circle)

        }

效果图:

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!