基于金属的贝塞尔曲线实现，您可以沿路径用渐变填充并制作动画
AnimatableBezierPath
基于金属的贝塞尔曲线实现，您可以沿路径用渐变填充并制作动画。
这是它的样子。
如何生成网格
它就像原生UIKit API一样简单。理想情况下，您应该要求设计师创建具有单个连续贝塞尔曲线的 SVG 文件，将其导出并使用像这样的在线转换器或手动转换它。 您可以在此处找到“Hello”示例。
下面是它的样子：
public var helloBezierPath: BezierPath = {
// Initiate bezier path with `viewBox` and desired `lineWidth`
var shape = BezierPath(viewBox: .init(width: 1032, height: 322), lineWidth: 120)
// Start your curve via moving to initial position
shape.move(to: CGPoint(x: 1, y: 303.38))
// And then you should draw it relatively to your `viewBox`
shape.addCurve(to: CGPoint(x: 109.8, y: 227.73), controlPoint1: CGPoint(x: 28.31, y: 287.4), controlPoint2: CGPoint(x: 88.3, y: 249.9))
shape.addCurve(to: CGPoint(x: 210.23, y: 48.3), controlPoint1: CGPoint(x: 164.86, y: 164.55), controlPoint2: CGPoint(x: 202.46, y: 117.58))
return shape
}()
And to draw it you need to use provided AnimatableBezierView
struct HelloView: View {
@State var animationPercent: Float = 0
var body: some View {
AnimatableBezierView(path: helloBezierPath, colors: helloColors, animationPercent: animationPercent)
.onAppear {
withAnimation(.easeInOut(duration: 3)) {
animationPercent = 1
}
}
}
}
Add via SwiftPM
dependencies: [
.package(url: "https://github.com/Nekitosss/AnimatableBezierPath", from: "1.0.0"),
],
