ProcessLoadingView 0.1.2

ProcessLoadingView 0.1.2

×

由 Ayman Ibrahim 维护。

ProcessLoadingView 0.1.2

ProcessLoadingView

Pod Version Pod License Language Swift version

ProcessLoadingView 是使用 CABasicAnimation 构建的一步指示器加载动画，用户可以几乎自定义其中的所有内容
灵感来源： https://dribbble.com/shots/1118077-Proces-animation

功能

  • 轻量级，易于设置。
  • 完全可自定义。
  • 可以设置动态的项目数量。
  • 可以设置项目中项目的自定义位置。
  • 可以为每个项目设置不同的图片。
  • 可以设置与颜色、字体和进度速度相关的不同属性。
圆形轨迹中的预设位置 设置可变数量的项目（8个）

安装

CocoaPods

ProcessLoadingView 在 CocoaPods 上可用。将以下内容添加到您的 Podfile

pod 'ProcessLoadingView', '~> 0.1.1'

手动方式

只需将 processView 文件夹添加到您的项目中。

用法

（参见示例 Xcode 项目 Demo）在 storyboard 中创建一个视图并给它类的名称 'ProcessLoadingView'，然后将其连接到控件上。

快速设置

ProcessLoadingView 根据您的需求可以拥有可变数量的项目，您只需按照以下步骤即可运行：

1- 在 storyboard 中放置一个 UIView 并给它一个类 ProcessLoadingView。 替代文本

2- 将其连接到下面的控件，名为 viewProcess

3- 创建一个选项对象并将其分配给 viewProcess

let stepComplete = 3
let totalSteps = 4
        
var options = ProcessOptions()
options.setNumberOfItems(number: totalSteps)
options.images = [(img1, nil), (img2, nil), (img3, nil), (img4, nil)]
options.stepComplete = stepComplete
options.bgColor = bgColor
viewProcess.options = options

注意

  • 通过选项的 setNumberOfItems 方法设置流程步骤的数量。
  • options.images 应分配一个数组，其数量等于步骤总数。

processView 的完全自定义

//totalSteps: adding 8 process items, this number can be increased or decreased ;) 
let totalSteps = 8
var options = ProcessOptions()
options.setNumberOfItems(number: totalSteps)
options.stepComplete = 3
options.inSpeed = 1.2
options.images = imageOpts(of: step, totalSteps: totalSteps)
options.mainTextfont = UIFont.boldSystemFont(ofSize: 22)
options.subTextfont = UIFont.boldSystemFont(ofSize: 16)
options.ItemSize = 30
options.radius = 120
options.bgColor = bgColor
options.completedPathColor = colorBlue
options.mainTextColor = .white
options.subTextColor = colorOrange
        
viewProcessOutlet.options = options

如果您想对圆形形状进行自定义，请勿使用此方法

options.setNumberOfItems(number: totalSteps)

而是使用：

var options = ProcessOptions()
let curvesStartRadians = [(3 * CGFloat.pi)/2, (23 * CGFloat.pi) / 12, (CGFloat.pi / 3), ((2 * CGFloat.pi) / 3), (13 * CGFloat.pi) / 12]
let curvesEndRadians   = [(23 * CGFloat.pi) / 12, (CGFloat.pi) / 3, (2 * CGFloat.pi) / 3, (13 * CGFloat.pi) / 12, (3 * CGFloat.pi)/2]

options.curvesStartRadians = curvesStartRadians
options.curvesEndRadians = curvesEndRadians

options.stepComplete = 3
options.inSpeed = 1.2
options.images = imageOpts(of: step, totalSteps: curvesStartRadians.count)
options.mainTextfont = UIFont.boldSystemFont(ofSize: 22)
options.subTextfont = UIFont.boldSystemFont(ofSize: 16)
options.ItemSize = 30
options.radius = 120
options.bgColor = bgColor
options.completedPathColor = colorBlue
options.mainTextColor = .white
options.subTextColor = colorOrange
        
viewProcessOutlet.options = options

获取圆形周长上的位置

Alt Text

ProcessView 操作方法

开始动画

viewProcess.start(completed:
{
     //code to run after finishing
})

反向动画，不删除项目

viewProcess.reset(removeItems: false)
{
     //code to run after finishing
}

反向动画后删除项目

viewProcess.reset(removeItems: true)
{
     //code to run after finishing
}

许可协议

此代码在 MIT 许可证的条款和条件下分发。