SwiftUI之绘制和动画

Path

使用Path可以绘制图形

struct Bodge: View {
	var body: some View {
    Path { path in
      /// 移动到点
      path.move(to: CGPoint(x: 0, y: 0))
      /// 添加直线
      path.addLine(to: CGPoint(x: 10, y: 10))
      /// 绘制贝塞尔曲线
      path.addQuadCurve(to: CGPoint(x: 20, y: 20), control: CGPoint(x: 25, y 25))
    }
    .fill(Color.black)
  }
}

GeometryReader

GeometryReader让我们能够获取到父view提供的建议的size，该数据保存在GeometryProxy中，GeometryProxy提供了一个frame(in:)函数，可以让我们分别获取到该view相对于.global、.local或者.name的size。

struct BadgeBackgroundView: View {
    var body: some View {
        GeometryReader { geometry in 
        
        }
    }
}

GeometryProxy

public struct GeometryProxy {
  	/// 返回父View的建议尺寸
    public var size: CGSize { get }
  	/// 可以获取.leading .top等数据
    public subscript<T>(anchor: Anchor<T>) -> T { get }
    /// 安全区域
    public var safeAreaInsets: EdgeInsets { get }
  	/// coordinateSpace: 坐标空间, 可以是.local, .global, .name()
    public func frame(in coordinateSpace: CoordinateSpace) -> CGRect
}

使用.coordinateSpace(name: "ScrollViewSpace")自定义坐标空间

示例

struct CarouselView: View {
    
    var imageDataSource: [String]
    
    var body: some View {
        VStack {
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHStack(spacing: 0) {
                    ForEach(imageDataSource, id: \.self) { imageName in
                        GeometryReader { proxy in
                            Self.loadImage(imageName: imageName)
                                .resizable()
                                .aspectRatio(CGSize(width: proxy.size.width, height: proxy.size.height), contentMode: .fit)
                                .rotation3DEffect(
                                    self.rotateAngle( proxy: proxy),
                                    axis: (x: 0, y: 11.0, z: 0))
                        }
                        .frame(width: UIScreen.main.bounds.width / 3.0, height: UIScreen.main.bounds.width / 3.0)
                    }
                }
            }
            .aspectRatio(2, contentMode: .fit)
            .coordinateSpace(name: "ScrollViewSpace")
        }
        Spacer()
    }
    
    func rotateAngle(proxy: GeometryProxy) -> Angle {
        let dif = UIScreen.main.bounds.width * 0.5 - proxy.frame(in: .named("ScrollViewSpace")).midX
        let pct = min(dif / proxy.size.width * 0.5, 1)
        return .degrees(Double(30 * pct))
    }
    
    private static func loadImage(imageName: String) -> Image {
        guard
            let url = Bundle.main.url(forResource: imageName, withExtension: "jpeg"),
            let imageSource = CGImageSourceCreateWithURL(url as NSURL, nil),
            let image = CGImageSourceCreateImageAtIndex(imageSource, 0, nil)
        else {
            fatalError("Couldn't load image \(imageName).jpg from main bundle.")
        }
        return Image(decorative: image, scale: UIScreen.main.scale)
    }
}

struct carouselView_Previews: PreviewProvider {
    static var previews: some View {
        HStack {
            CarouselView(imageDataSource: [
                "Carousel01",
                "Carousel02",
                "Carousel03",
                "Carousel04",
                "Carousel05",
                "Carousel06",
                "Carousel07",
                "Carousel08",
                "Carousel09",
                "Carousel10",
            ])
            Spacer()
        }
    }
}

Gradient渐变

LinearGradient、AngularGradient和RadialGradient可以生成渐变色。

LinearGradient(gradient: 
               Gradient(colors: [
                 Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255), 
                 Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)]), 
               startPoint: UnitPoint(x: 0.5, y: 0), 
               endPoint: UnitPoint(x: 0.5, y: 0.6))

AngularGradient(gradient: Gradient(colors: [
                 Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255), 
                 Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)]), 
                center: .center)

RadialGradient(gradient: Gradient(colors: [
                 Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255), 
                 Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)]), 
               center: .center, 
               startRadius: 40, 
               endRadius: 100)

ZStack

ZStack可以把组件视图堆叠在一起。