前言
开发中经常需要加载数据,这时候就需要一个加载动画,最近写了2个加载动画,希望对大家有所帮助。文章末尾有提供OC和Swift双语的CLDemo下载,代码比较简单,就不详细解析了,Demo中已经进行封装,可以直接使用,这里贴出核心代码。
作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的iOS交流群:196800191,加群密码:112233,不管你是小白还是大牛欢迎入驻 ,分享BAT,阿里面试题、面试经验,讨论技术, 大家一起交流学习成长!
效果图
1.第一个
核心代码
private func initLayer() -> Void {
let origin_x: CGFloat = frame.size.width * 0.5
let origin_y: CGFloat = frame.size.height * 0.5
for item in 0 ..< defaultConfigure.number {
//创建layer
let scale: CGFloat = CGFloat(defaultConfigure.number + 1 - item) / CGFloat(defaultConfigure.number + 1)
let layer: CALayer = CALayer()
layer.backgroundColor = defaultConfigure.backgroundColor.cgColor
layer.frame = CGRect.init(x: -5000, y: -5000, width: scale * defaultConfigure.diameter, height: scale * defaultConfigure.diameter)
layer.cornerRadius = scale * defaultConfigure.diameter * 0.5;
//运动路径
let pathAnimation: CAKeyframeAnimation = CAKeyframeAnimation.init(keyPath: "position")
pathAnimation.calculationMode = .paced;
pathAnimation.fillMode = .forwards;
pathAnimation.isRemovedOnCompletion = false;
pathAnimation.duration = (defaultConfigure.duration) - Double((defaultConfigure.intervalDuration) * Double(defaultConfigure.number));
pathAnimation.beginTime = Double(item) * defaultConfigure.intervalDuration;
pathAnimation.timingFunction = CAMediaTimingFunction.init(name: .easeInEaseOut)
pathAnimation.path = UIBezierPath(arcCenter: CGPoint.init(x: origin_x, y: origin_y), radius: (self.frame.size.width - self.defaultConfigure.diameter) * 0.5, startAngle: defaultConfigure.startAngle, endAngle: defaultConfigure.endAngle, clockwise: true).cgPath
//动画组,动画组时间长于单个动画时间,会有停留效果
let group: CAAnimationGroup = CAAnimationGroup()
group.animations = [pathAnimation]
group.duration = defaultConfigure.duration
group.isRemovedOnCompletion = false
group.fillMode = .forwards
group.repeatCount = MAXFLOAT
layer.add(group, forKey: "RotateAnimation")
layerArray.append(layer)
}
}
2.第二个
核心代码
override init(frame: CGRect) {
super.init(frame: frame)
width = frame.size.width
height = frame.size.height
layer.backgroundColor = configure.outBackgroundColor.cgColor
layer.mask = shapeLayer(lineWidth: configure.outLineWidth, start: 0, end: 1)
animationLayer.frame = layer.bounds
animationLayer.backgroundColor = configure.inBackgroundColor.cgColor
animationLayer.mask = shapeLayer(lineWidth: configure.inLineWidth, start: configure.strokeStart, end: configure.strokeEnd)
layer.addSublayer(animationLayer)
rotationAnimation.fromValue = 0
rotationAnimation.toValue = Double.pi * 2
rotationAnimation.repeatCount = MAXFLOAT
rotationAnimation.duration = configure.duration
rotationAnimation.isRemovedOnCompletion = false
rotationAnimation.fillMode = .forwards
rotationAnimation.timingFunction = CAMediaTimingFunction(name: .linear)
}
3.总结
核心代码已经贴出,完整代码请查看Demo,为了方便大家学习,这里提供了OC和Swift两种语言分别实现的----->>>CLDemo,如果对你有所帮助,欢迎Star。
原文作者:季末微夏
原文地址:https://www.jianshu.com/p/ab938514bc34