Блог

Я хочу, чтобы мой объект изображения был частично замаскирован при перемещении (с помощью анимации) через границу. Для справки, я хочу сделать что-то вроде этого:

Позиция 1	Позиция 2	Позиция 3

Скрытие изображения за другим изображением (и создание обрезанной иллюзии) не сработает, потому что мой фон может быть динамичным. Мы будем очень признательны за любые советы. Спасибо!

создать обрезанную иллюзию) не сработает

Проверьте .clipped() модификатор. Это реальность, а не иллюзия.

 struct ContentView: View {
    @State var offset = CGFloat(0)
    
    var body: some View {    
        Group {
            Image(systemName: "circle.fill")
                .foregroundColor(.red)
                .offset(x: offset, y: 0)
        }
        .frame(width: 80, height: 80)
        .border(Color.green) /// just for clarity, you can remove this
        .clipped() /// use this to prevent circle from going past borders
        .onAppear {
            withAnimation(.linear(duration: 5)) {
                offset = 100
            }
        }
    }
}
 

Результат: