Fizik Tabanlı Yumuşatma

ease-in veya cubic-bezier() gibi geleneksel CSS yumuşatma işlevleri basit eğrilerle sınırlıdır. Bu nedenle, sıçrama veya yaylanma gibi karmaşık fizik tabanlı efektler oluşturmak mümkün değildir. linear() zamanlama işlevi, karmaşık eğrilere yaklaşabilen bir dizi durak sağlamanıza olanak tanıyarak bu sorunu çözer. Geçişler ve animasyonlar, duraklar arasındaki düz çizgilere göre interpolasyonla hesaplanır ancak yeterli sayıda durak varsa sorunsuz görünebilir.

Uygulama Adımları

1. Eğri noktalarını oluşturma: Yay veya sıçrama için onlarca noktayı manuel olarak çizmek pratik değildir. Harici bir kitaplıktan zamanlama işlevi kullanın veya mevcut bir JavaScript yumuşatma işlevini ya da SVG yolunu linear() söz dizimine dönüştürmek için bir araç kullanın. İsteğe bağlı: Bu zamanlama işlevlerini, sitenizde yeniden kullanmak üzere CSS özel özellikleri olarak depolayın.
2. Zamanlama işlevini tanımlayın: Oluşturulan durakları transition-timing-function veya animation-timing-function özelliğine ya da transition veya animation kısaltmaları aracılığıyla uygulayın.
3. Süreyi ayarlama: Sürenin fiziksel özelliklerden (kütle, sertlik) türetildiği JavaScript fizik motorlarının aksine, CSS'de sabit bir duration gerekir. İstediğiniz etkiyi elde etmek için süreyi ayarlamanız gerekebilir.

Örnek: Yay Yumuşatma

Bu örnekte, özel bir linear() işlevi kullanarak, hedef değeri aşan ve ardından sabitlenen bir yay efekti oluşturma işlemi gösterilmektedir.

.spring {
  /* Define the physics-based easing as a reusable variable */
  --spring-easing: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);


  /* Apply the easing with a duration that fits the spring's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.8s var(--spring-easing);
}

.spring:hover {
  scale: 1.2;
}

Örnek: Örnek: Sıçrama Yumuşak Geçişi

Bu örnekte, zıplama efekti oluşturmak için özel bir linear() işlevinin nasıl kullanılacağı gösterilmektedir.

.bounce {
  /* Define the physics-based easing as a reusable variable */
  --bounce-easing: linear(0, 0.214 14.7%, 0.386 23.7%, 0.598 31.9%, 0.999 44.7%, 0.807 52.6%, 0.762 56%, 0.747 59.4%, 0.758 62.4%, 0.793 65.6%, 0.999 77.4%, 0.961 81.2%, 0.949 84.8%, 0.956 88%, 0.993 95.5%, 1);


  /* Apply the easing with a duration that fits the bounce's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.4s var(--bounce-easing);
}

.bounce:hover {
  scale: 1.2;
}

Önemli Noktalar

• Performans: En akıcı fizik tabanlı animasyonlar için linear() özelliğini transform ve opacity gibi ayrı bir iş parçacığında çalışan özelliklere uygulayın.
• Hassasiyet ve yük: Daha fazla durak, daha yumuşak bir eğri sağlar ancak CSS'nizin boyutunu da artırır. Çoğu oluşturucu, düzgünlük ve kod boyutu arasında en uygun dengeyi bulmak için eğriyi "basitleştirmenize" olanak tanır.
• Sıçramalar için opaklık kullanmaktan kaçının: Sıçrama yumuşatmalarını opacity özelliğine uygulamak, değer 0'ın altına veya 1'in üzerine çıkarsa görsel olarak rahatsız edici titremelere neden olabilir.
• Erişilebilirlik: Fiziğe dayalı karmaşık animasyonlar, bazı kullanıcıların dikkatini dağıtabilir veya hareket hassasiyetine neden olabilir. Bu animasyonları azaltarak veya devre dışı bırakarak kullanıcı tercihlerine her zaman saygı gösterin.

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

Yedek stratejiler

CSS Yedek

linear() işlevini desteklemeyen tarayıcılar için yedek olarak standart bir yumuşatma işlevi sağlayın. Tarayıcı, tanımadığı linear() değerini yok sayarak önceki geçerli beyana geri döner.

.element {
  /* Fallback for older browsers (standard smooth exit) */
  transition: transform 0.8s ease-out;
  
  /* Modern browsers will override with the physics-based easing */
  transition-timing-function: linear(0, 1.1, 0.95, 1.02, 1);
}

JavaScript Kitaplığı Yedeklemesi (Motion/GSAP)

İsteğe bağlı: Eski tarayıcılarda bile yüksek kaliteli bir fizik animasyonu kritik önem taşıyorsa linear() desteklenmediğinde animasyonu işlemek için Motion (motion.dev) veya GSAP (greensock.com) gibi bir JavaScript kitaplığı kullanın.

1. Destek algılama: Tarayıcının linear() işlevini işleyip işlemediğini kontrol etmek için CSS.supports() kullanın.
2. Koşullu olarak yükleme/uygulama: Desteklenmiyorsa kitaplığın yay veya sıçrama uygulamasını kullanın.

/* Detect if the browser supports the linear() function */
const supportsLinearEasing = window.CSS && CSS.supports('animation-timing-function', 'linear(0, 1)');

if (!supportsLinearEasing) {
  /* 
     Example using Motion (motion.dev) for a spring fallback.
     This should only be initialized if native CSS support is missing.
  */
  import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {
    animate(".element", { transform: "scale(1.2)" }, {
      easing: spring({ stiffness: 100, damping: 10 })
    });
  });
}

Daha belirgin özellik algılama için CSS'de @supports özelliğini de kullanabilirsiniz:

@supports not (animation-timing-function: linear(0, 1)) {
  .element {
    /* Alternative experience for unsupported browsers */
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}