Mari kita SwiftUI kartu animasi dengan dukungan gerakan pada SwiftUI :
Saya ingin menambahkan pratinjau terperinci, tetapi ukuran gif bukan Ortodoks. Pratinjau besar dapat dilihat di tautan atau di tutorial video .
Akan diminta
SwiftUI sekarang dalam versi beta, dan diinstal dengan Xcode baru, yang juga dalam versi beta. Kabar baiknya adalah bahwa Xcode baru dapat ditempatkan di sebelah yang lama dan Anda hampir tidak dapat merasakan sakit.
Anda dapat mengunduhnya dari tautan di bagian Applications .
Anda mungkin telah melihat pratinjau waktu-nyata saat bekerja dengan SwiftUI . Untuk mengaktifkannya, dan juga beberapa menu konteks, Anda perlu menginstal beta macOS Catalina . Itu tidak akan berhasil tanpa rasa sakit. Saya tidak bertaruh, jadi saya akan menjalankan simulator dengan cara lama.
Proyek baru
Buat Single View Application dengan tanda centang tambahan - SwiftUI :
Buka file ContentView.swift . Ahli waris untuk PreviewProvider bertanggung jawab atas pratinjau. Karena kami tidak akan menggunakannya, kami akan meninggalkan kode minimum yang diperlukan:
import SwiftUI struct ContentView: View { var body: some View { } }
Saya harap sudah ada pemahaman umum tentang SwiftUI , kami tidak akan memikirkan hal-hal sepele.
Kartu
Kartu disusun satu demi satu, oleh karena itu kami akan menggunakan ZStack . Biarkan saya mengingatkan Anda bahwa ada dua opsi lagi untuk elemen pengelompokan: HStack - secara horizontal dan VStack - secara vertikal. Untuk kejelasan:
Tambahkan kartu pertama:
struct ContentView: View { var body: some View { return ZStack { Rectangle() .fill(Color.black) .frame(height: 230) .cornerRadius(10) .padding(16) } } }
Di sini kami menambahkan persegi panjang, dicat hitam, tinggi 230pt , 230pt tepi dengan 10pt dan atur margin di semua sisi menjadi 16pt .
Teks dalam kartu ditambahkan ke blok ZStack setelah persegi panjang:
Text("Main Card") .color(.white) .font(.title) .bold()
Jalankan proyek untuk melihat hasil antara:
Tapi ada tiga!
Untuk kenyamanan, kami akan MainCard kode MainCard :
struct MainCard: View { var title: String var body: some View { ZStack { Rectangle() .fill(Color.black) .frame(height: 230) .cornerRadius(10) .padding(16) Text(title) .color(.white) .font(.largeTitle) .bold() } } }
title akan muncul di penginisialisasi. Teks ini akan ada di kartu. Tambahkan kartu ke ContentView , pada saat yang sama kita akan melihat parameter baru di penginisialisasi:
struct ContentView: View { var body: some View { return MainCard(title: "Main Card") } }
Kami sudah tahu cara membuat kode, jadi segera tentukan kelas untuk kartu latar:
struct Card: View { var title: String var body: some View { ZStack { Rectangle() .fill(Color(red: 68 / 255, green: 41 / 255, blue: 182 / 255)) .frame(height: 230) .cornerRadius(10) .padding(16) Text(title) .color(.white) .font(.title) .bold() } } }
Atur warna dan gaya yang berbeda untuk teks. Sisa kode mengulangi MainCard hitam utama. Tambahkan dua kartu latar belakang ke ContentView . Kartu disusun satu demi satu, jadi kami akan menempatkannya di ZStack . Kode ContentView :
struct ContentView: View { var body: some View { return ZStack { Card(title: "Third card") Card(title: "Second Card") MainCard(title: "Main Card") } } }
Kartu latar terletak di bawah warna hitam dan sejauh ini tidak terlihat. Tambahkan offset dan bantalan ke atas dari tepi:
Card(title: "Third card") .blendMode(.hardLight) .padding(64) .padding(.bottom, 64) Card(title: "Second Card") .blendMode(.hardLight) .padding(32) .padding(.bottom, 32) MainCard(title: "Main Card")
Sekarang hasilnya menyerupai pengumuman di awal tutorial:
Mari kita beralih ke gerakan, dan bersama ini ke animasi.
Gestures
Cara gerakan diterapkan akan memaksa saya untuk mengurangi karma dan meninggalkan ulasan beracun.
Sebelum Anda melihat kode, harap dicatat - ini terdaftar di developer.apple.com sebagai contoh. Kesan pertama menipu, pada praktiknya saya menyukainya.
Nyatakan enum di ContentView :
enum DragState { case inactive case dragging(translation: CGSize) var translation: CGSize { switch self { case .inactive: return .zero case .dragging(let translation): return translation } } var isActive: Bool { switch self { case .inactive: return false case .dragging: return true } } }
DragState akan membuat kerja dengan gerakan lebih nyaman. Tambahkan dragState ContentView ke ContentView :
@GestureState var dragState = DragState.inactive
Akan ada keajaiban.
Di mana pun dragState akan digunakan, nilai-nilai baru akan diterapkan secara otomatis. Nyatakan gerakan:
let dragGester = DragGesture() .updating($dragState) { (value, state, transaction) in state = .dragging(translation: value.translation) }
Tambahkan gerakan ke kartu utama dan atur offset :
MainCard(title: "Main Card") .offset( x: dragState.translation.width, y: dragState.translation.height ) .gesture(dragGester)
Apakah offset akan sama dengan nilai parameter saat diakses? Tidak, itu akan selalu sama . Ini sihir.
Kartu akan mengikuti dengan jari dengan mouse, tetapi tanpa animasi:
Kartu latar belakang juga harus mengubah posisi mereka ( paling tidak kami inginkan ). Tambahkan kode untuk mereka yang terkait dengan kondisi gerakan. rotation3DEffect akan memutar kartu sampai gerakan menjadi aktif:
Card(title: "Third card") .rotation3DEffect(Angle(degrees: dragState.isActive ? 0 : 60), axis: (x: 10.0, y: 10.0, z: 10.0)) .blendMode(.hardLight) .padding(dragState.isActive ? 32 : 64) .padding(.bottom, dragState.isActive ? 32 : 64) Card(title: "Second Card") .rotation3DEffect(Angle(degrees: dragState.isActive ? 0 : 30), axis: (x: 10.0, y: 10.0, z: 10.0)) .blendMode(.hardLight) .padding(dragState.isActive ? 16 : 32) .padding(.bottom, dragState.isActive ? 0 : 32)
Bagaimana lagi Anda bisa menggunakan 3D, Anda bisa melihat di sini . Saya juga menambahkan blendMode . Mode mirip dengan alat di Photoshop dan Sketch.
Sementara perubahan diterapkan bukan animasi, mari kita perbaiki.
Animasi
Anda akan terkejut betapa sederhananya itu. Cukup tambahkan baris:
.animation(.spring())
Tambahkan untuk setiap kartu. Sekarang setiap perubahan akan diterapkan secara animasi, dalam kasus kami, ini adalah ukuran lekukan, rotasi 3D dan offset . Jika Anda membutuhkan animasi dengan kurva, gunakan mode basic .
Dekorasi
Tambahkan bayangan dan rotasi tampilan utama, terkait dengan offset:
.rotationEffect(Angle(degrees: Double(dragState.translation.width / 10))) .shadow(radius: dragState.isActive ? 8 : 0)
Jika Anda menjalankan proyek, Anda akan melihat referensi dari awal tutorial. Nyalakan pratinjau tidak terlihat, tarik kartu ke samping untuk melihat efeknya.
Bagi para pencari
→ Kode proyek dapat ditemukan di repositori
Sudah cukup untuk menyalin file ke proyek, tidak ada pengaturan tambahan yang diperlukan. Jangan takut kode begitu sedikit adalah salah satu dari SwiftUI .
Jika lebih nyaman bagi Anda untuk menonton video, lihat tutorialnya. Ngomong-ngomong, dalam video saya menggunakan preview realtime.