Published on

SwiftUI-da RotationGesture-dan qanday foydalanish kerak

Authors

RotationGesture nima

RotationGesture — qurilmada ikki barmog'ingizni aylantirib, elementni aylantirish (rotate) gesture-i. Matn, rasm yoki istalgan SwiftUI elementiga qo'shish mumkin.

Bu gesture production ilovalarda kam ishlatiladi — aksariyat hollarda foydalanuvchi elementni qo'lda aylantirishga ehtiyoj sezilmaydi. Shuning uchun bu video qisqa bo'ladi, keyingi video esa DragGesture haqida bo'ladi — u ancha keng qo'llaniladi.

Yangi fayl

RotationGestureBootcamp nomli yangi SwiftUI View fayl yaratamiz.

Kod

@State private var angle: Angle = Angle(degrees: 0)

var body: some View {
    Text("Hello, World!")
        .font(.largeTitle)
        .fontWeight(.semibold)
        .foregroundColor(.white)
        .padding(50)
        .background(Color.blue)
        .cornerRadius(10)
        .rotationEffect(angle)
        .gesture(
            RotationGesture()
                .onChanged { value in
                    angle = value
                }
                .onEnded { value in
                    withAnimation(.spring()) {
                        angle = Angle(degrees: 0)
                    }
                }
        )
}

Tushuntirish

  • Angle — Swift-ning o'rnatilgan tur, burchakni ifodalaydi. Angle(degrees: 0) — boshlang'ich holat (aylantirilmagan).
  • .rotationEffect(angle) — elementni berilgan burchakka aylantiradi.
  • onChanged — gesture davomida value (joriy burchak) anglega o'rnatiladi.
  • onEnded — gesture tugaganda, withAnimation(.spring()) bilan burchak 0ga qaytadi — "sakrab qaytish" effekti.

MagnificationGesture bilan solishtirma

MagnificationGestureRotationGesture
Modifier.scaleEffect(...).rotationEffect(...)
Qiymat turiCGFloatAngle
onChangedcurrentAmount = value - 1angle = value
onEndedlastAmount += currentAmountangle = Angle(degrees: 0)

Tuzilma deyarli bir xil — faqat gesture turi va ishlanadigan qiymat o'zgaradi.

Simulatorda sinash

Gesture-lar preview-da yaxshi ishlamaydi — simulatorda sinash kerak. Simulatorda ikki barmog'ini ko'rsatish uchun Option tugmasini bosib ushlab turing, so'ngra bosing va aylantiring. Qo'l ko'tarilganda element spring animatsiya bilan boshlang'ich holatiga qaytadi.

Eslatma: Simulatorda Option tugmasini bosib-ushlab turish davomida qo'l ko'tarish kerak — Option-ni avval qo'ysangiz, element o'sha joyda "qotib" qoladi.

Buy mea coffee