Просмотр клипа при перетаскивании Swift UI

Обычный способ обрезать представление — применить .clipShape. Однако в качестве аргумента используется Shape, поэтому немного сложно сделать его условным, а также контролировать его размер.

Еще один способ сделать это — применить маску. Это может принимать ViewBuilder в качестве аргумента, поэтому мы можем сделать его зависящим от того, когда происходит перетаскивание, и можно легко установить размер кадра.

Затем:

• Когда перетаскивания не происходит, маска может быть просто Rectangle в полный размер экрана.
• Чтобы расположить круг над началом перетаскивания, установите его .position в положение начала перетаскивания. Чтобы это работало, выравнивание маски должно быть .topLeading, а координатное пространство .local должно использоваться для жеста перетаскивания.
• Чтобы маска перемещалась с помощью жеста перетаскивания, примените модификатор .mask перед модификатором .offset.
• Один из способов заставить круг сжиматься по мере выполнения жеста перетаскивания — сделать его размер зависимым от продолжительности жеста.
• Чтобы узнать ширину и высоту экрана, окружите содержимое GeometryReader.
• Чтобы убедиться, что синий фон покрывает всю область маски, добавьте отрицательные отступы, чтобы они выходили за границы экрана.
• Если для сохранения смещения перетаскивания используется DragGesture, оно автоматически сбрасывается в конце жеста. Это позволяет избежать необходимости его сброса в .onEnded.

struct ContentView: View {
    let loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    @GestureState private var offset: CGSize = .zero
    @State private var startOfDragLocation: CGPoint = .zero
    @State private var startOfDragTime: Date = .now
    @State private var circleSize: CGFloat = .zero

    var body: some View {
        GeometryReader { proxy in
            let h = proxy.size.height
            Text(loremIpsum)
                .font(.title2)
                .padding()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background {
                    Color.blue
                        .padding(-h)
                }
                .mask(alignment: .topLeading) {
                    if offset == .zero {
                        Rectangle().ignoresSafeArea()
                    } else {
                        Circle()
                            .position(startOfDragLocation)
                            .frame(width: circleSize, height: circleSize)
                    }
                }
                .offset(offset)
                .gesture(
                    DragGesture(minimumDistance: 0, coordinateSpace: .local)
                        .onChanged { value in
                            if startOfDragLocation != value.startLocation {
                                startOfDragLocation = value.startLocation
                                startOfDragTime = .now
                            }
                            circleSize = max(100, h + (h * startOfDragTime.timeIntervalSinceNow / 0.5))
                        }
                        .updating($offset) { value, state, trans in
                            state = value.translation
                        }
                )
        }
    }
}