Skip to main content
LanguageBahasa Indonesia
Rekayasa5 menit membacaOktober 2026

Bagaimana cara kerja animasi pegas di SwiftUI?

Jawaban singkat

Di SwiftUI Anda menambahkan pegas dengan .animation(.spring) atau withAnimation(.spring). Sejak iOS 17 pengaturan utamanya adalah durasi dan pentalan, dan ada preset: .smooth (tidak ada pentalan), .snappy (sedikit) dan .bouncy (lebih banyak). Kode lama menggunakan respon dan redamanFraction. Pegas SwiftUI menjaga kecepatannya saat animasi baru menghentikannya, sehingga membuat gerakan terasa alami.

Pengambilan Inti

  • Gunakan withAnimation(.spring) untuk perubahan status, atau .animation(.spring, value:) pada tampilan
  • iOS 17+: .spring(duration:bounce:) plus preset .smooth, .snappy, dan .bouncy
  • API lama: .spring(response:dampingFraction:blendDuration:)
  • Springs adalah gaya animasi default SwiftUI sejak iOS 17
  • Pegas yang terputus menjaga kecepatannya, sehingga gerakan dilakukan dengan lancar

SwiftUI menganimasikan perubahan status. Ketika nilai seperti isExpanded berubah di dalam withAnimation(.spring), setiap tampilan yang bergantung padanya berpindah ke tata letak baru menggunakan pegas.

Di iOS 17 dan versi lebih baru, cara paling sederhana untuk mendeskripsikan pegas adalah dengan dua nilai: durasi, kira-kira berapa lama waktu yang dibutuhkan untuk menetap, dan pantulan, seberapa besar pegas tersebut melampaui batas. Pantulan 0 memberikan gerakan halus tanpa melampaui batas; nilai yang lebih tinggi menambah pantulan. Apple juga menyediakan preset: .smooth, .snappy, dan .bouncy.

Kode lama menggunakan .spring(response:dampingFraction:). Respon serupa dengan durasi, dan pecahan redaman sebesar 1 berarti tidak ada pantulan, sedangkan nilai yang lebih rendah akan menambah pantulan. Kedua bentuk tersebut menggambarkan pegas fisik yang sama.

Keuntungan besar dari pegas adalah interupsi. Jika pengguna mengetuk lagi atau gerakan menyeret berakhir di tengah animasi, pegas baru akan dimulai dari posisi dan kecepatan saat ini, sehingga tidak ada lompatan. Untuk gestur seret, teruskan kecepatan gestur saat pengguna melepaskannya, sehingga elemen terus bergerak sesuai arah pelemparannya.

Jika komponen yang sama juga perlu dijalankan di web atau Android, mempertahankan nilai pegas sebagai token gerakan bersama akan membantu. ExodeUI yang kami buat memiliki runtime SwiftUI, sehingga satu komponen yang dirancang dengan pegasnya dapat diputar di SwiftUI dan di platform lain.

Pertanyaan yang sering diajukan

Apa animasi default di SwiftUI?

Sejak iOS 17, animasi defaultnya adalah pegas yang mulus.

Apa perbedaan antara .snappy dan .bouncy?

.snappy diselesaikan dengan cepat dengan sedikit overshoot; .bouncy melampaui lebih banyak. .smooth tidak memiliki overshoot.

Bagaimana cara mengubah respons dan redamanFraction menjadi durasi dan pentalan?

Respons secara kasar dipetakan ke durasi. Fraksi redaman dari 1 adalah pantulan 0; fraksi redaman yang lebih rendah berarti lebih banyak pantulan.

Bagaimana cara menambahkan kecepatan dari gerakan drag?

Baca kecepatan saat tarikan berakhir dan gunakan pegas interpolasi atau API pegas baru yang menerima kecepatan awal.

Panduan & Contoh Terkait

Setel pegas sebelum Anda menulis kode

Seret penggeser, perhatikan gerakannya, dan salin nilai pegas untuk SwiftUI, CSS, dan platform lainnya.

Buka generator pegas
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →