FillableLoaders

完全可定制的基于进度加载器，使用 Swift 中的自定义 CGPath 绘制

波浪

普通

尖峰

圆形

演示

变更日志

• 1.3.0 (2016年9月24日)
  • Swift 3.0
• 1.2.6 (2016年4月8日)
  • 修复与宽度断言相关的问题
  • 适配 Swift 2.2
• 1.2.5 (2015年12月11日)
  • 使用 Xcode 7.2 预编译的框架
• 1.2.4 (2015年10月28日)
  • 修复显示加载器后删除时的错误问题
• 1.2.2 (2015年10月27日)
  • 使用 Xcode 7.1 预编译的框架
• 1.2.1 (2015年10月25日)
  • 添加将加载器添加到期望的 UIView 的可能性
  • 更新到 Swift 2.0
• 1.1.1 (2015年9月2日)
  • 添加 Carthage 支持
  • 添加隐藏加载器时的动画
• 1.0.1 (2015年8月17日)
  • 删除未使用的代码
• 1.0.0 (2015年8月7日)
  • 基于进度的加载器🎉
  • 为所有公共属性和函数添加了文档
• 0.0.2 初始版本 (2015年8月3日)

快速入门

- 基于进度的行为

要让基于进度的加载器工作，只需要两个必要的事情

• 使用 showProgressBasedLoaderWithPath(path:) 或 createProgressBasedLoaderWithPath(path:) 创建加载器
• 要更新填充进度，更新加载器的 progress 属性，该属性从 0.0 到 1.0

- 创建

有四种主要方法来创建加载器

showProgressBasedLoaderWithPath(path:), createProgressBasedLoaderWithPath(path:),showLoaderWithPath(path:) 和 createLoaderWithPath(path:)

showLoaderWithPath(path:) 或 showProgressBasedLoaderWithPath(path:) 将调用创建方法，之后将调用 showLoader() 方法。

所以，这只是一个进行所有操作一次的帮助方法。

如果您想创建一个加载器，但不想立即显示它，可以使用 createProgressBasedLoaderWithPath(path:) 或 createLoaderWithPath(path:) 来创建，当您想显示它时，只需调用 showLoader()

示例代码

//PROGRESS BASED:

var loader = WavesLoader.createProgressBasedLoaderWithPath(path)
loader.loaderColor = UIColor.redColor()
        ...
//Do other stuff
        ...
loader.showLoader()

//BASIC

var loader = WavesLoader.createLoaderWithPath(path)
loader.loaderColor = UIColor.redColor()
        ...
//Do other stuff
        ...
loader.showLoader()

- 在所需视图中显示加载器

所有这些方法都有一个可选参数版本，您可以将它传递到想要添加加载器的视图中。

• showProgressBasedLoaderWithPath(path:onView:)
• createProgressBasedLoaderWithPath(path:onView:)
• showLoaderWithPath(path:onView:)
• createLoaderWithPath(path:onView:)

- 删除

只需调用方法 removeLoader()，加载器就会消失，并将其从其父视图中删除。

示例代码

loader.removeLoader()

定制

除了可以定制加载器形状外，您还可以定制加载器的其他属性。请查看列表

• progressBased: Bool
  指示加载器运动是否基于进度（默认：false）
• progress: CGFloat
  加载器填充进度从 0.0 到 1.0。它将自动触发动画以更新加载器填充进度
• backgroundColor: UIColor?
  加载器视图的背景（默认为透明）
• loaderColor: UIColor?
  填充加载器的颜色
• loaderBackgroundColor: UIColor?
  未填充加载器的颜色
• loaderStrokeColor: UIColor?
  路径描边的颜色
• loaderStrokeWidth: CGFloat
  路径描边的宽度
• loaderAlpha: CGFloat
  加载器视图的 Alpha（默认为 1.0）
• cornerRadius: CGFloat
  加载器视图的圆角半径（默认为 0.0）
• duration: NSTimeInterval
  动画持续时间（默认为 10.0）
• rectSize: CGFloat
  加载器视图的高度
• swing: Bool
  布尔值，指示在上升时加载器是否需要摆动（小的旋转，不适用于 Plain 加载器）

针对 Spikes 和 Rounded 加载器的额外属性

• -spikeHeight: CGFloat
  尖刺的高度

安装

• 手动

要将 FillableLoaders 手动添加到您的项目中，只需复制 Source 文件夹中的文件。

如何创建自己的 CGPath？

⚠️CGPath 的边界不能超出加载器视图的边界

• 宽度：屏幕宽度
• 高度：rectSize 属性

• 手动

let path = CGPathCreateMutable()
CGPathMoveToPoint(path, nil, 0, height/2)
CGPathAddLineToPoint(path, nil, width + 100, height/2)
CGPathAddLineToPoint(path, nil, width + 100, height*2)
CGPathAddLineToPoint(path, nil, 0, height*2)
CGPathCloseSubpath(path)
return path

• PaintCode

PaintCode 是一个真正的强大 Mac 应用程序，可以做很多事情。您可以绘制事物，然后它会“自动”为您生成代码

在这种情况下，我们可以使用它创建 BezierPaths，并从那里提取 CGPath。

在绘制星形的情况下，它会给我们这个代码

//// Star Drawing
var starPath = UIBezierPath()
starPath.moveToPoint(CGPointMake(180, 25))
starPath.addLineToPoint(CGPointMake(195.16, 43.53))
starPath.addLineToPoint(CGPointMake(220.9, 49.88))
starPath.addLineToPoint(CGPointMake(204.54, 67.67))
starPath.addLineToPoint(CGPointMake(205.27, 90.12))
starPath.addLineToPoint(CGPointMake(180, 82.6))
starPath.addLineToPoint(CGPointMake(154.73, 90.12))
starPath.addLineToPoint(CGPointMake(155.46, 67.67))
starPath.addLineToPoint(CGPointMake(139.1, 49.88))
starPath.addLineToPoint(CGPointMake(164.84, 43.53))
starPath.closePath()
UIColor.grayColor().setFill()
starPath.fill()

我们在这里唯一需要做的事情是从UIBezierPath中提取CGPath，就像这样

let myPath = starPath.CGPath
var myLoader = WavesLoader.showProgressBasedLoaderWithPath(myPath)

• SVG + PaintCode

我非常喜欢PaintCode的一个功能，即你可以导入一个.svg文件，并且它会创建出它的BezierPath代码。真是太棒了。

例如，就是这样制作的Github和Twitter标志。

技术细节

• Swift 3.0
• 使用CAKeyFrameAnimation进行动画

许可证

所有源代码均受MIT许可证的许可。

如果你使用了它，我很乐意了解。

Pol Quintana - @poolqf