Illustrator'da birkaç çizime sahibim ve üzerinde çalıştığım bir web sitesi için canlandırmayı planlıyorum , flash ile birlikte Create.js araç setini duydum , ancak gitmenin en iyi yolu mu yoksa başka bir tane mi var " daha iyi "yapmanın yolu?
İşte hedeflediğim türden animasyonlara bir örnek: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/
Yanıtlar:
Web’deki şeyleri canlandırmanın birçok yolu vardır. Animasyon oluşturmanın daha sonra web animasyonlarına aktarmanın daha fazla yolu vardır.
İş bölümü ve grafiksel bir editör kullanımının açık nedenlerinden dolayı, AfterEffects veya Animate CC (Illustrator ve Photoshop dosyalarını içe aktarabilir) gibi bir şeyde animasyon tasarlamanın büyük yararları vardır.
Bu söylenirken, daima, sonunda, aşağıdakilerden birini derlemelisin :
Sınırlı etkileşim yetenekleri:
Daha tam etkileşimli:
Şimdi, her birine biraz daha ayrıntılı olarak gireceğim.
Bir GIF, animasyonlar çok fazla etkileşim gerektirmediğinde, dinamik olarak boyutlandırılması gerekmediğinde ve nispeten küçük olduğunda gitmek için iyi bir yoldur. İyi hazırlanmış GIF'ler, performans endişesi olmadan bağladığınız örnek kadar ayrıntılı olabilir. Üzerine yerleştirilmiş saydam bir katman (veya sadece bir kısmını) kullanarak küçük etkileşim bile mümkündür.
Yan Not: Bir orada şimdi .gifvbiçimi Imgur yarattığı WebM veya MP4 video formatları içine anında GIF dosyaları dönüştürür. Bu, son dosya boyutunu büyük ölçüde azaltarak performansı artırır. Aynı şeyi düşünebilirsiniz.
Düzgün ama son derece stilli bir animasyon elde etmenin bir başka yolu da sprite kullanmaktır. Google bu yaklaşımı logo animasyonu gibi şeyler için kullanır . Bir başka harika örnek ise Alexander Engzell'in bu yaklaşımı kullanan hasta tipografi canlandırması olan eski web sitesidir . Bir GIF çok büyük olacağı zaman bu idealdir, ancak fazla bir etkileşime ihtiyacınız yoktur.
Ayrıca , Google'ın kullandığı bir sprite veya GIF'e benzeyen çok ilginç bir JavaScript animasyonu gördüm (Chrome resmini sol üstte gezdirin - Chrome'da olması gerekir) ancak bunun yerine animasyonlu bir maske kullanır. Toplam dosya boyutunu sınırlamak için bu yaklaşımı kullandıklarını tahmin ediyorum.
Son yıllarda video ile ilgili harika yetenekler kazandık. <video>Eleman let us etkileşim biz ve kullanım videoları daha önce hiç olmamış bir şekilde özelleştirmek var. Artık tam ekran arka plan videolarını kolayca kullanabiliriz ve kaydırmada kare kare gitme gibi şeyler yapabiliriz . Ayrıca, FaceBook'un bazı özel animasyonlar için kullanıcıları özel etkinlikler etrafında yayınlamalarına davet ederken video kullandığını da fark ettim . Avantajları, oldukça küçük bir dosya boyutunda sıkıştırılabilmesi ve daha geniş bir animasyon aralığı (video düzenleme yazılımının yapabileceği herhangi bir şey) yapabilmesidir. Dolayısıyla, birisi hasta bir video yapabilirse, bunu bir web sayfasına fantastik bir eklentiye dönüştürmek oldukça kolaydır.
Açıkçası, video web’deki animasyonların çoğu için iyi değil (örneğin, düğme geçişleri vb.), Bu yüzden onları her yerde kullanmayın.
Tüm bunlar söyleniyorsa, animasyonun dinamik olarak oluşturulmasını istiyorsanız, gerçekten temel etkileşimlerden daha fazlasına ihtiyacınız olduğunda, 3B ortamlar oluşturmak istediğinizde ve diğer birçok durumda bir GIF, sprite veya video görünmez kes onu. Buna karar verildikten sonra, en iyisi animasyonunuza ve ihtiyaçlarınıza bağlı olan birkaç seçenek daha vardır.
İstatistiklerim yok, ancak gördüğüm web animasyonlarının çoğu Canvas kullanıyor . Kanvas, yaratılıştaki performansı ve esnekliği nedeniyle kullanımı mükemmeldir. Gerçek bir tuvalde olduğu gibi - sadece üst üste boyadığı için, yalnızca bir tarayıcı (DOM) öğesini kullanır. Neyin boyandığını ve nerede olduğunu JavaScript ile izleyerek, harika animasyonlar ve hatta oyunlar yaratabiliriz.
Bununla birlikte, Tuval kullanmanın temel sakıncası, ölçeklendirmenin göreceli zorluğudur. Çoğu zaman, tabii ki animasyona bağlı olarak, duyarlı bir Tuval animasyonu yapmak, diğer araçları kullanmaktan daha zordur. Başka bir dezavantajı, bir Canvas üzerinde çok fazla içeriğe sahip olmanın SEO dostu olmadığı, çünkü kanvas öğelerinin taranması mümkün değil (eğer varsa görsel olarak gizlenmiş HTML içeriğini koyarak bu sorunu çözebilirsiniz). Aynı şekilde, kullanıcılar için metin seçimi gibi şeyler Canvas ile zordur (özellikle CreateJS gibi bir kütüphane kullanmadan).
Canvas'ın en yaygın kullanımı, Google’ın sık sık Canvas'ta yapılan doodlesidir. Oyun veya etkileşimli animasyonları olduğunda, her baktığımda Canvas kullanıyorlar. Etkileşim yoksa, GIF veya sprite kullanırlar.
Canvas ile daha kolay çalışmanıza yardımcı olacak birçok kitaplık vardır, ancak yapılması gerekenlere bağlı olarak kesinlikle gerekli değildir. Sadece Canvas için yapılanlar arasında CreateJS (Animate CC'den dışa aktarabileceğiniz), Pixi.js , PaperJS , KineticJS ve FabricJS (benim izlenimlerime göre sıralanmıştır). Lottie (eski adı BodyMovin) adlı bir After Effects eklentisi ayrıca Canvas'a (veya SVG [1] ) dışa aktarabilir ve animasyon motorunda yerleşiktir.
Tabii ki, GSAP gibi daha büyük animasyon kütüphanelerini Canvas ile kolayca eşleştirebilirsiniz. Bağladığınız örnek kadar ayrıntılı bir şey için bir tür çerçeve kullanmanızı öneririm, ancak bir çok şey için gerçekten gerekli olmadıklarını, sadece faydalı - özellikle de onlardan birini nasıl kullanacağınızı biliyorsanız.
Web üzerindeki şeyleri kolayca yanıt veren bir şekilde canlandırmanın inanılmaz güçlü bir yolu da bir SVG ( Ölçeklenebilir Vektör Grafiği ) kullanmaktır. Amaçlarını yerine getirirler - ölçeklenebilir vektörler - iyi. Pek çoğu SVG'leri başlangıçta kafa karıştırıcı buluyor, ancak SVG'nin koordinat sistemi ve dönüşümleri gibi pek çok şeyin bunları açıklayan harika makaleleri var.
SVG hakkındaki en güzel şeylerden biri, JavaScript, saf CSS ( :hovereyaletler, transformler, transitionler ve animationler dahil) veya SMIL animasyonları (SVG ile işleri canlandırmanın "yerel" yolu) ile canlandırılabiliyor olmasıdır - ancak IE bunu yapmaz ' Hiç desteklemiyor ve kademeli olarak amortismana tabi tutuluyor ). CSS'de önce (ve nispeten) basit olmadığı durumlarda önce CSS'yi, ardından da JavaScript'i kullanmaya çalışmanızı öneririm. SVG öğelerini biçimlendirmek için, yalnızca kısmi desteğe sahip olmadığınız sürece GSAP'ın MorphSVG eklentisi gibi bir araç kullanmak pratikte gereklidir , bu durumda SMIL kabul edilebilir.
SVG elemanları herhangi bir şekilde olabileceğinden, bazı serin efektler oluşturmak için kullanılabilirler . Sarah Drasner, SVG canlandırmanın hangi yollarını akıllıca kullanabileceğini gösteren SVG animasyonlarına ilişkin bazı faydalı performans testleri yaptı .
Animasyona bağlı olarak (ve tarayıcı desteğine ihtiyaç duyulduğunda), Snap.svg veya GSAP gibi bir kütüphane yararlı olabilir, ancak genellikle CSS ve gerekirse küçük bir özel JS gerekir. Bununla birlikte, Lottie (eski adı BodyMovin) adlı bir After Effects eklentisi ve Flash 2 SVG adlı bir Flash uzantısı , SVG animasyonları oluşturmak için gerçekten yararlı olabilir.
Daha fazla ayrıntı için, özellikle ilgili SVG öğelerini canlandıran ilgili yazıya bir göz atın .
PS Eğer etkileşimli ise ve etkileşimli değilse arka plan görüntüsü olarak <object>doğrudan bir <svg>XML öğesinin içine bir etikette veya doğrudan bir XML öğesinde gömülü olmak en iyisidir , ancak bunu yapmanın başka yolları da vardır.
Tecrübelerime göre, CSS animasyonları ve geçişleri öncelikle UI öğeleri ve diğer temel geçişler ve animasyonlar için kullanılmalıdır. O zaman bile, bazen UI animasyonları / geçişleri için GSAP veya Velocity.js gibi bir JS animasyon kütüphanesini kullanmak uygundur. Bu gerçekten istediğiniz davranış tipine ve CSS'de yapmanın uygun olup olmadığına bağlıdır.
Yaratabiliriz iken çılgın şeyler saf CSS ile bu ek görüntüleri manipüle bile, CSS kullanarak bir örnek olarak sunmak gibi karmaşık çizimler oluşturmak için genellikle zordur. Karmaşık CSS animasyonları, genellikle JavaScript benzerlerine göre sürdürülmesi zaman zaman zordur. Diğer bir dezavantajı, CSS animasyonlarının JavaScript ile değiştirilmesinin zor olması ve JavaScript ile karıştırıldığında çok iyi oynamamasıdır.
Bununla birlikte, geçişleri ve animasyonları kullanan basit etkileşimler genellikle CSS kullanmalıdır; varsayılan olarak yapmalısın. CSS kullanarak nasıl animasyon yapılacağını öğrenmeye başlamak için web animasyonu girişimi inceleyin .
Ayrıca kendi projelerinizden ekleyebileceğiniz ve ekleyebileceğiniz Animate.css gibi kütüphanelerde yararlı animasyonlar ve hareket hızlandırma işlevleri de bulabilirsiniz . Tüm kütüphaneye neredeyse hiç ihtiyacınız olmayacak, sadece istediğiniz parçaları alabileceksiniz.
DOM tabanlı JavaScript animasyonları oldukça yalındır. JQuery'ler gibi korkunç animasyon kütüphaneleri nedeniyle kötü bir üne sahipler animate(), ancak özellikle web animasyonları API'sini (aşağıda tartışıldığı gibi) veya GSAP , Velocity.js veya mo.js gibi özel bir animasyon kütüphanesini kullanırken yüksek performans gösterebilirler ( GSAP bile jQuery's yerine özel bir eklenti vardır .animate). Böyle bir kütüphaneyi kullanarak, bir çok öğeyi canlandırmak gibi daha yoğun animasyonlar için diğer animasyon türlerinden daha iyi performans gösterebilirler.
DOM tabanlı bir animasyon kullanmanızın ana nedeni, önceden oluşturulmuş DOM öğelerini içeren çok fazla kullanıcı animasyonu veya karmaşık zaman çizelgelerine sahip olmanızdır. Çoğu zaman, belirtilen nedenlerden dolayı DOM üzerinden Canvas gibi bir şeyi denemek ve kullanmak en iyisidir.
GSAP gibi kütüphaneler , animasyon matrislerini takip ederek vurgulu bir animasyonu yavaş gibi yapmamızı sağlar . Bu şekilde, DOM tabanlı animasyonlar, iyi yapıldığında diğer animasyon türlerinden daha özelleştirilmiş ve etkileşimli olabilir. Tek aşağı tarafı, bazen nasıl inşa edildiğine ve ne yapması gerektiğine bağlı olarak iyi performans göstermeyeceğidir.
WebGL , öncelikle 3B çalışmalar oluşturmanın bir yoludur. Bazı sahip olağanüstü projelerin size kontrol edilmelidir. Açıkça her web sayfasında kullanılmıyor, ama belirtmek önemlidir.
Aslında sahip olduğu potansiyel nedeniyle harika olan 3B (ve 2B) ortamları oluşturmak için DOM öğelerini canlandırıyor. Bir kitaplığı kullanırken, WebGL Canvas'ı kullanmaya geri döner, ancak yine de mobilde büyük bir desteği yoktur ve performansı yüksek olabilir. Genellikle WebGL kullanmanız gerekip gerekmediği oldukça açıktır.
Deneyimlerime göre, bir WebGL kütüphanesi kullanmak pratikte gerekli. Neyse ki bazı iyi olanlar var. ThreeJS bugüne kadar gördüğüm en yaygın PixiJS . A -Frame gibi bir WebGL çerçevesi de onu toparlayabilir ve basit şeyler yaratabilir.
Web animasyonlar API animasyonlar uygulanacak ve performans iyileştirmeleri ile eşleştirilmiş tarayıcılar arasında korunur nasıl standardize etmek girişimidir. SVG de dahil olmak üzere DOM elemanları ile kullanılması amaçlanmıştır. Bir CSS animasyonunun nasıl yapılandırıldığını andırır (JS görünümlü bir formda) ancak zaman çizelgesi ve gelişmiş performans gibi yetenekler ekler.
Besteci iş parçacığına animasyonlar koyarak performansı artırır (daha fazla ayrıntı için konuyla ilgili bu harika yazıyı inceleyin). Nasıl kullanılacağına giriş için Mozilla belgelerine veya bu tanıtım ilanına bakınız .
" Bu , JavaScript animasyon kütüphanelerinin yerini alacak mı? " Diye sorabilirsiniz . Cevap, " Umarım bazıları " dır . Yerel tarayıcı animasyon motorlarının geliştirmesi herkes için faydalıdır ve yaptıkları gibi bazı daha az güçlü animasyon kütüphaneleri işe yaramaz hale gelir. Bununla birlikte, daha güçlü animasyon kütüphanelerinin GSAP'ın kaydettiği gibi ek faydaları olacaktır . WAAPI yaygın olarak desteklendikten sonra bir kütüphaneye ihtiyaç duyup duymadığınız, hala sizin ihtiyaçlarınıza göre belirlenir.
WAAPI şu anda iyi bir desteğe sahip değil, ancak bugün üretimde bir polyfill ile kullanılabilir . Daha iyi olmaya ve daha fazla destek almaya devam edecek gibi görünüyor.
Performanssız özellikler kullanmaktan veya yeniden akıtma / yeniden boyamaya neden olmaktan kaçının .
Sayfadaki bir grup öğeyi hareketlendirmekten kaçının, çünkü bunlar daha yoğundurlar ve daha sonra değiştirilmesi de acı verici olabilir.
CSS kullanırken, transitionmümkün olduğunda (nedene göre) bir animasyonun üzerinde bir animasyon kullanın . Daha iyi performans gösterirler ve çalışmak genellikle daha kolaydır.
will-changeÖzelliği, tarayıcının önceden bilmesi için canlandıracağınız büyük öğeler üzerinde akıllıca kullanın . Daha fazla ayrıntı ve öneriler için konuyla ilgili bu SitePoint makalesine benzer bir şey okuyun .
JavaScript'te zamanlamaları yaparken kaçının setIntervalve tercih edin requestAnimationFrame(zaman çizelgelerini kullanıyorsanız GSAP gibi iyi animasyon kütüphaneleri bunu sizin için yapar).
Yapabildiğiniz zaman, web animasyonları API'sini kullanın çünkü JavaScript'teki diğer yöntemlerle animasyon yapma yetenekleri yoktur.
Flash'ı asla son üründe çalıştırmamalısınız . JavaScript animasyonları daha iyi performans gösterir, daha dinamiktir, daha kolay düzenlenir, herhangi bir indirme işlemi gerektirmez, daha fazla platformda çalışır (Flash çoğu tablette / telefonda çalışmaz) ve hacimli eski Flash'lardan daha fazla yanıt verir. Ayrıca çok erişilebilir değil ve SEO dostu değiller.
Bununla birlikte, Animate CC (Flash'ın yeniden markalandırılması) animasyon oluşturmanın yararlı bir yoludur ve Create.js kullanarak Canvas'a dışa aktarabilir .
Bir animasyon oluşturmak için kullanabileceğiniz genellikle birden fazla yöntem vardır. En iyisi ne yapmak istediğine bağlı ve bazen daha iyi bir yöntem yok. Çoğu zaman kendimi aynı projede çoklu kullanıyorum. Önemli olan eleştirel düşünmek , animasyonun nasıl davranmasını istediğinizi tam olarak anlamak ve buna dayanan yönteme karar vermektir. Aynı zamanda, her ikisinde de biraz çalıştıysanız yardımcı olur.
[1] - Lottie ayrıca yerel Android, iOS ve React Native ürünlerine de ihracat yapabilir .
Deneyimlerime göre, statik animasyonlar yaparken (kullanıcıyla herhangi bir etkileşime yönelik olmayan animasyonlar), benim için en iyi olanın After Effects'teki ve son sonucu bir .GIF dosyasına dışa aktarırken çizimleri canlandırdığını gördüm. Bu, animasyonu tamamen tarayıcı dostu kılar ve herhangi bir cihazda aynı görselleştirmeyi garanti eder.
Bununla birlikte, bir kullanıcının etkileşime girebileceği bir şey arıyorsanız, Canvas'ın gerçekten yol olduğuna ve bunun için CreateJS'nin EaseJS kütüphanesindeki iş için doğru göründüğüne inanıyorum.
Neyse, örneğinize göre, animasyonlu bir GIF dosyası ile de aynı sonucu elde edebilirsiniz.
After Effects ile çalışıyorsanız, Bodymovin eklentisini kullanabilirsiniz . Mobil ve web kullanımı için çalışmanızı sağlar. HTML'nizde kullanabileceğiniz .json ve lottie.js dosyasına sahip olacaksınız. Ancak, önce Genel Ayarlarda Komut Dosyalarının dosya yazmasına ve Ağa erişmesine izin vermeniz gerekir . Bunu yaptıktan sonra Pencere , Uzantılar'a gidin ve Bodymovin'i bulun . Kompozisyonunuzu seçin, kaydetmek için konum belirleyin ve oluştur düğmesine tıklayın. .Json ve lottie.js dosyalarınızı HTML'inize yerleştirin ve çalışmanız biter. GIF'in en iyi çözüm olmadığını düşünüyorum çünkü yüklenmesi daha fazla zaman alıyor.
Buradan indirebilirsiniz: http://aescripts.com/bodymovin Sadece fiyatınızı ekleyin veya ücretsiz isterseniz sadece 0,00 ABD doları koyabilirsiniz ...
Bir Bodymovin kullanmak ve web sitenize animasyonunuzu Visual Studio ile ayarlamak için öğretici: youtube.com/watch?v=YmPsCD5jRDw&t=282s
HTML ve CSS temellerini biliyorsanız, sizin için kolay olmalıdır. Bu eğitici bana yardımcı oldu, umarım bu size yardımcı olabilir.