Bahar Animasyonu: Doğal Kullanıcı Arayüzü Hareketinin Fiziği
Bahar animasyonunun kullanıcı arayüzü tasarımında nasıl çalıştığını öğrenin. Sertlik, sönüm, kütle ve hızı anlayın. React ve SwiftUI için doğal fizik tabanlı animasyonlar oluşturun.
Ana nokta
Yay animasyonu, bir bileşenin hareketinin sertlik (durağa doğru ne kadar güçlü bir şekilde çekildiği), sönümleme (ne kadar hızlı enerji kaybettiği) ve kütle (ne kadar atalet taşıdığı) tarafından yönetildiği bir kütle-yay-sönüm sisteminin fiziksel davranışını kullanarak kullanıcı arayüzü hareketini modeller. Süreye dayalı animasyonlardan farklı olarak yaylar, kullanıcı hızına otomatik olarak yanıt verir ve görsel süreksizliğe neden olmadan herhangi bir noktada kesintiye uğratılabilir.
Yaylar Neden Süre Eğrilerinden Daha Doğal Hissediyor?
Fiziksel dünyada "giren kolaylık" veya "kübik bezier(0,4, 0, 0,2, 1)" gibi kavramlar yoktur. Fiziksel nesneler kuvvetler nedeniyle hızlanır ve sürtünme nedeniyle yavaşlar. Bir çekmece kayarak açıldığında ivme kazanır; onu bıraktığınızda sürtünme onu dinlendirir. Bahar fiziği bu fiziksel gerçekliği yazılımda kopyalar; bu nedenle iOS UIKit, Android Motion Compose ve ExodeUI'in tümü bahar öncelikli animasyon sistemleridir.
Açıklanan Yay Parametreleri
Her parametreyi anlamak, tam olarak istediğiniz fiziksel hissi tasarlamanıza olanak tanır.
Sertlik (Gerilim)
Yayın dinlenme değerine doğru ne kadar güçlü bir şekilde çekildiği. Yüksek sertlik (600+), düğmeye basma geri bildirimine benzer hızlı, duyarlı kullanıcı arayüzü oluşturur. Düşük sertlik (100–200), sayfa geçişleri veya ortamdaki kayan öğeler için uygun, yavaş, kayan hareket oluşturur.
Sönümleme (Sürtünme)
Yayın döngü başına ne kadar enerji kaybettiği. Kritik sönümde yay salınım yapmadan dinlenme noktasına ulaşır. Yetersiz sönümlü yaylar (düşük sürtünme) aşırı fırlayacak ve sıçrayacaktır. Sönümleme oranı / (2 × sqrt(sertlik × kütle)) düşük sönümlü, kritik sönümlü veya aşırı sönümlü olup olmadığınızı belirler.
Yığın
Animasyonlu öğenin ne kadar eylemsizlik taşıdığı. Daha yüksek bir kütle, animasyonun daha ağır görünmesine neden olur ve yön değiştirmenin daha uzun sürmesini sağlar. Çoğu kullanıcı arayüzü animasyonu kütleyi 1,0'da tutar ve sertlik ve sönümleme yoluyla hissi kontrol eder.
Başlangıç Hızı
Kullanıcı bir öğeyi kaydırırsa veya fırlatırsa yay bu hareket hızıyla başlatılabilir, böylece hareket ile yay yerleşimi arasında kusursuz bir süreklilik yaratılabilir.
Kullanıcı Arayüzü Bileşenleri için Pratik Bahar Ön Ayarları
Bu ön ayarlar en yaygın kullanıcı arayüzü etkileşim modellerini kapsar.
- Düğme dokunuşu: sertlik 500, sönümleme 30 — anında, hızlı, minimum sıçrama
- Kart genişletme: sertlik 280, sönümleme 24, kütle 1,2 — düzgün, ağırlıklı genişleme
- Çekmece/çarşaf: sertlik 340, sönümleme 28 — belirleyici, hafif çöküntü
- Zıplama bildirimi: sertlik 400, sönümleme 18 - eğlenceli aşma
- Sayfa geçişi: sertlik 220, sönümleme 22, kütle 1,4 — sinematik, ağırlıklı
Üretim için uygulama örneği
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}