这是一个自问自答的问题,在Stack Overflow上是完全可以接受的(甚至是受鼓励的)。重点是分享对他人有用的东西。
SwiftUI有一个RoundedRectangle
Shape
。如果有一个带有圆角顶部的五角星,可以用于填充、剪切和动画,那就太好了。
这个Stack Overflow答案展示了如何使用UIBezierPath
将RoundedStar
制作为自定义的UIView
。
如何将此代码适应为可以进行动画的SwiftUI Shape
?
这是一个自问自答的问题,在Stack Overflow上是完全可以接受的(甚至是受鼓励的)。重点是分享对他人有用的东西。
SwiftUI有一个RoundedRectangle
Shape
。如果有一个带有圆角顶部的五角星,可以用于填充、剪切和动画,那就太好了。
这个Stack Overflow答案展示了如何使用UIBezierPath
将RoundedStar
制作为自定义的UIView
。
如何将此代码适应为可以进行动画的SwiftUI Shape
?
这是将RoundedStar
代码转换为可动画的SwiftUI Shape
的适配版本:
// Five-point star with rounded tips
struct RoundedStar: Shape {
var cornerRadius: CGFloat
var animatableData: CGFloat {
get { return cornerRadius }
set { cornerRadius = newValue }
}
func path(in rect: CGRect) -> Path {
var path = Path()
let center = CGPoint(x: rect.width / 2, y: rect.height / 2)
let r = rect.width / 2
let rc = cornerRadius
let rn = r * 0.95 - rc
// start angle at -18 degrees so that it points up
var cangle = -18.0
for i in 1 ... 5 {
// compute center point of tip arc
let cc = CGPoint(x: center.x + rn * CGFloat(cos(Angle(degrees: cangle).radians)), y: center.y + rn * CGFloat(sin(Angle(degrees: cangle).radians)))
// compute tangent point along tip arc
let p = CGPoint(x: cc.x + rc * CGFloat(cos(Angle(degrees: cangle - 72).radians)), y: cc.y + rc * CGFloat(sin(Angle(degrees: (cangle - 72)).radians)))
if i == 1 {
path.move(to: p)
} else {
path.addLine(to: p)
}
// add 144 degree arc to draw the corner
path.addArc(center: cc, radius: rc, startAngle: Angle(degrees: cangle - 72), endAngle: Angle(degrees: cangle + 72), clockwise: false)
// Move 144 degrees to the next point in the star
cangle += 144
}
return path
}
}
UIBezierPath
版本非常相似,只是使用了新的Angle
类型,它提供了对degrees
和radians
的易于访问。删除了旋转星形的绘制代码,因为在SwiftUI形状中添加旋转非常容易,可以使用.rotationEffect(angle:)
视图修饰符。
这里是一个演示,展示了cornerRadius
设置的可动画属性,并展示了全屏星形的各种cornerRadius
设置的样子。
struct ContentView: View {
@State private var radius: CGFloat = 0.0
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
VStack(spacing: 40) {
Spacer()
RoundedStar(cornerRadius: radius)
.aspectRatio(1, contentMode: .fit)
.foregroundColor(.yellow)
.overlay(Text(" cornerRadius: \(Int(self.radius)) ").font(.body))
HStack {
ForEach([0, 10, 20, 40, 80, 200], id: \.self) { value in
Button(String(value)) {
withAnimation(.easeInOut(duration: 0.3)) {
self.radius = CGFloat(value)
}
}
.frame(width: 50, height: 50)
.foregroundColor(.black)
.background(Color.yellow.cornerRadius(8))
}
}
Spacer()
}
}
}
}
在Swift Playgrounds应用程序中,这可以在iPad上完美运行。只需要添加:
import PlaygroundSupport
PlaygroundPage.current.setLiveView(ContentView())
最后。
struct ContentView: View {
static let flagSize: CGFloat = 234 // Change this to resize flag
let flagHeight: CGFloat = flagSize
let flagWidth: CGFloat = flagSize * 1.5
let radius: CGFloat = flagSize / 3
let starWidth: CGFloat = flagSize / 9
let pantoneReflexBlue = UIColor(red: 0, green: 0x33/0xff, blue: 0x99/0xff, alpha: 1)
let pantoneYellow = UIColor(red: 1, green: 0xcc/0xff, blue: 0, alpha: 1)
var body: some View {
ZStack {
Color(pantoneReflexBlue).frame(width: flagWidth, height: flagHeight, alignment: .center)
ForEach(0..<12) { n in
RoundedStar(cornerRadius: 0)
.frame(width: starWidth, height: starWidth)
.offset(x: radius * cos(CGFloat(n) / CGFloat(12) * 2 * .pi), y: radius * sin(CGFloat(n) / CGFloat(12) * 2 * .pi))
.foregroundColor(Color(pantoneYellow))
}
}
}
}