Animotion - Görsel CSS Animasyon Uygulaması

 (cssanimotion.pages.dev)
4 puan yazan GN⁺ 2023-11-26 | 1 yorum | WhatsApp'ta paylaş
  • HN başlığı görsel CSS animasyon uygulamasına işaret etse de, doğrulanabilen sayfa içeriği MathML Input ve LaTeX Output odaklıdır
  • Sayfa meta verilerine göre bu site, MathML'yi LaTeX'e dönüştüren ücretsiz bir çevrimiçi araç olarak tanıtılmaktadır
  • Gerçek dönüşüm örnekleri, çıktı sonuçları, doğruluk ve destek kapsamı gibi kullanım değerlendirmesi için gerekli bilgiler metinde doğrulanması zor durumdadır
  • Ayrı bir bölümde Drift Hunters Unblocked oyununu çalıştırma bağlantısı da yer almaktadır
  • Mevcut bilgilerle hem CSS animasyon uygulaması işlevi hem de MathML dönüştürücünün çalışma biçimi net biçimde doğrulanamamaktadır

Doğrulanabilen sayfa yapısı

  • Üstteki ana içerikte MathML Input bölümü ve LaTeX Output bölümü bulunmaktadır
  • Meta açıklaması, MathConvert kullanarak MathML'yi LaTeX'e dönüştüren ücretsiz bir çevrimiçi dönüştürücü olduğunu belirtmektedir
  • Öğrenciler, eğitimciler ve araştırmacılar için bir formül dönüştürme aracı olarak tanıtılsa da, gerçek giriş alanı, örnek formüller veya desteklenen MathML kapsamı sunulmamaktadır

Birlikte gösterilen oyun bağlantısı

  • Play Online Games altında Drift Hunters Unblocked öğesi bulunmaktadır
  • İlgili öğe, gerçekçi drift ve araç özelleştirme sunduğunu ve okulda ya da iş yerinde çalıştığını belirtmektedir
  • Play Now bağlantısıyla oyun sayfasına gidilebilmektedir

İlgili okumalar

1 yorum

 
GN⁺ 2023-11-26
Hacker News yorumları

  • CSS3 1999’da çıkmış olmasına rağmen 2023’te böyle bir uygulamanın HN’de ilgi çekici bulunması, kolay, erişilebilir, programlanabilir ve incelenebilir keyframe tabanlı animasyonun ne kadar durağan kaldığını gösteriyor
    Flash yaklaşık 10 yıl önce ölürken arkasında bir boşluk bıraktı; geriye de Adobe Animate adlı bir kabuk ve onun etrafındaki vasat framework’ler ve topluluklar kaldı
    CSS/SVG tabanlı sağlam animasyonların çoğu boş vaat olarak kaldı; iyi örnekler olsa da hâlâ dar bir alanın tekniğine daha yakın

    • After Effects, ücretsiz bodymovin/Lottie eklentisi ile CSS/SVG/canvas animasyonlarını dışa aktarabiliyor
      Web keyframe animasyonları ve öğeleri oluştururken kişisel olarak çoğunlukla kullandığım yöntem bu
      After Effects’in tüm özelliklerini dışa aktaramıyor ama bu iş akışında bulduğum en iyi ve en kararlı çözüm buydu. Daha önce AE kullanmış olmam da bunda etkili olmuş olabilir
      Şu anda desteklenen özellikler: http://airbnb.io/lottie/#/supported-features
    • Bu durgunlukta Adobe’nin sorumluluğunun büyük olduğunu düşünüyorum. Adobe Macromedia’yı satın aldığında tam olarak bunun olacağını öngören çok kişi olduğunu hatırlıyorum
      Adobe, bilerek bir şeyleri öldüren bir şirket; Steve Jobs’ın da bunda bir miktar sorumluluğu var
      Artık onlara para vermek zorunda olmamak gerçekten güzel. Teşekkürler Serif
    • 1999’da Transitions ve Transforms yoktu
      Keyframe kullanan düzgün CSS animasyonları ancak 2009’da mümkün oldu; o zaman da tarayıcı desteği iyi olmadığı için moz-, webkit- gibi prefix’lere ve çok sayıda polyfill’e ihtiyaç vardı
      IE8’de çalışmayan CSS3 animasyonlarını özellikle kullanmak için bir neden yoktu; tarayıcılar arası UI animasyonları sunma açısından jQueryUI çok daha öndeydi
    • Web animasyonları sayfayı daha iyi yaptığı durumların %5, daha kötü yaptığı durumların %95 olduğu için bu durgunluğu büyük bir sorun gibi görmüyorum
      Hayatım boyunca Flash’ın “Loading…” ekranlarını daha fazla görmek istemiyorum; özellikle de bir gezinme menüsünü görmek için bunu beklemeye hiç gerek yok
      Anında yüklenen geniş bant ortamında bile gezinme menüleri animasyonsuzken daha iyi; masthead altındaki özellik tanıtım bölümü de animasyonsuzken daha iyi
    • Flash, daha hızlı ve ucuz internet ile video streaming ve hosting yaygınlaşmadan önceki boşluğu dolduran bir teknoloji gibi geliyor
      Bugün de talep var ama çok niş hâle geldi; insanlar içeriği çoğunlukla mobil cihazlardan tüketiyor ve zengin medya içerikleri de video biçiminde yeterince sunulabiliyor

  • İlk denemek istediğim şey keyframe konumunu taşımaktı, ama henüz bir özellik olarak yok gibi görünüyor

    • Kes/yapıştır ile keyframe konumunu değiştirebilirsiniz

  • Çıktının bir kütüphaneye bağlı JavaScript kodu değil de CSS olması hoşuma gitti

  • Mobilde ikonların ne işe yaradığını anlatan tooltip veya ipuçlarını iyi sunmanın bir yolu var mı?
    Bazı ikonların anlamını bilmiyorum; basıp deneyebilirim ama yukarıda söylendiği gibi geri alma olmadığı için çekiniyorum

    • Geri al/yinele eklendi

  • Editör gerçekten sezgisel ve iyi görünüyor
    Daha gelişmiş bir timeline’a ihtiyaç duyanlar Theatre.js’e de bakabilir. Web platformunda hareketle ilgili araçların artması sevindirici

  • Harika bir araç; kısa süreliğine CSS animasyonlarıyla oynamak istememe neden oldu
    Animasyon preset’lerine birkaç timing function eklenirse iyi olur. Şu anda onlar olmadığı için biraz sönük görünüyor

  • Kaynak burada: https://github.com/animotionjs/animotion

  • Mobilde de şaşırtıcı derecede sezgisel

    • Animasyonu doğrudan düzenleyip, harekete uyacak şekilde keyframe’lerde öğeyi esneterek yumuşak/esnek bir his katabildim ve oldukça memnun kaldım
      Ancak geri al/yinele bulamadım. Mobilde ya da masaüstünde böyle bir özellik var mı?

  • GPT-4’ün de karmaşık CSS animasyonları üretmede oldukça iyi olduğunu fark ettim