!-- Global site tag (gtag.js) - Google Analytics -->

Web Uygulamanız için Kullanabileceğiniz Web Animasyonları ve Animasyon Araçları

Rich Design'da yaratıcı ve güzel animasyonların büyük hayranıyız. İyi tasarlanmış animasyonların, web ve mobil uygulamaların çekiciliğine ve kullanıcı dostu olmasına önemli ölçüde katkıda bulunabileceğine inanıyoruz. Doğru şekilde uygulandığında, etkili animasyonlar kullanıcılar ve ekrandaki içerik arasında güçlü bir bağlantı kurabilir.

Web uygulamanızı daha kullanıcı dostu hale getirmek istiyorsanız, bu yazıyı okumaya devam edin: Web animasyonu türleri hakkında konuşacağız ve size kendi tarayıcılar arası web uygulamanız için bir web tasarımı desteğini nasıl alacağınızı anlatacağız.

Web uygulaması animasyon türleri

Başlamak için, UI web uygulaması animasyon türlerini inceleyelim ve bunları ne için kullanabileceğinizi görelim.

Yükleniyor

Kullanıcılar genellikle işler yüklenirken beklemek zorunda kalır: web sitesi sayfaları, PDF dosyaları, tablolar, haritalar, videolar ve diğer içerik. Beklemeyi canlandırmak ve uygulamanızın daha hızlı çalıştığı hissini yaratmak için, dönen, atlayan veya kaybolan sayısız yükleme animasyonu türünden herhangi birini kullanın. Ayrıca iskelet ekranları, kısa çizgi filmleri, ilerleme çubuklarını ve şekil değiştiren animasyonları da düşünebilirsiniz.

Yükleme animasyonu

[Animasyon yükleniyor. Resim kaynağı: Dribbble ]

Karşılama animasyonları

Bir kullanıcının ilk izlenimi önemlidir ve harika karşılama animasyonları oluşturmak, başlangıçtan itibaren kullanıcılarla etkileşim kurmanıza yardımcı olabilir. Üstelik kullanıcıları eğlendirebilir ve ürününüzü tekrar kullanmak istemelerini sağlayabilir. İnsanları nasıl büyülediklerini anlamak için en yaygın karşılama animasyon türlerini inceleyelim.

  • Parçacık animasyonları

Bu animasyonlar en dikkat çekici olanlardan biridir ve bir web uygulamasının ana sayfasında görünebilirler. Kullanıcıların rahatlamasına yardımcı olur ve hafif bir meditasyon sunar. Parçacık animasyonları etkileşimli olabilir veya olmayabilir.

Etkileşimli (veya gerçek zamanlı) parçacık animasyonları, kullanıcının imleç hareketlerine yanıt verir. Çoğu kullanıcı animasyonları kontrol etmeyi tercih eder ve bu tür animasyonlara sahip bir web uygulaması hipnotize edici olabilir. Edan Kwan'ın web sitesi Particle Love , gerçek zamanlı animasyonların mükemmel bir örneğini sunuyor.

Etkileşimli olmayan parçacık animasyonları kullanıcının katılımını gerektirmez, ancak etkileyebilirler de. Üstelik bu animasyonlar arka planda çalışabilir .

Etkileşimsiz parçacık animasyonu

[Etkileşimsiz parçacık animasyonu. Resim kaynağı: Dribbble ]

Tipografi (veya tip) animasyonları da parçacık animasyonları kategorisine aittir. Yazı animasyonları, hareketli harflerin görüntülerini içerir ve etkileşimli veya etkileşimli olmayabilir. İnteraktif bir tipografi animasyonunun neye benzeyebileceğini görmek istiyorsanız Rich Design'da  ana sayfasını ziyaret edin . 

  • Arka plan videosu

Canvas United ana sayfasını ziyaret ederseniz , merkezi metni tamamlayan sessiz bir arka plan videosu görürsünüz. Video oldukça hızlıdır, bu nedenle kullanıcılar videoyu birden çok kez görebilir, onları içeri çekebilir ve sitede daha fazla zaman geçirmeye teşvik edebilir.

  • 3D animasyonlar

3D animasyonlar, tasarımcıların dikkat çeken gerçekçi ve karmaşık görseller yaratması için daha fazla fırsat sağlar. Bazı tasarım uzmanları, 2B'yi 3B nesnelerle karıştırma eğilimine başladılar, böylece daha derin ve daha sofistike deneyimler yarattılar.  

Tıpkı arka plan videoları ve parçacıkları gibi, etkileşimli 3B animasyonlar (mobil cihazlardaki tuş tıklamaları, fare tıklamaları, düğme tıklamaları ve parmak hareketlerine tepki verenler) bir web sitesinin dekoratif öğeleri olarak işlev görür. Kullanıcıları bir web sitesini ziyaret ettikleri ilk dakikalarda karşılamak ve eğlendirmek için bunları ana sayfalara yerleştirmek yaygın bir uygulamadır. 

3d-nesneler-2d-nesnelerle-karıştır

[Hareket tasarımında 2B nesneleri 3B nesnelerle karıştırma. Resim kaynağı: PixFlow ]

Sıfırdan yeni bir web sitesi veya web uygulaması oluştururken yukarıdaki animasyonları ana sayfanıza uygulayabilirsiniz. Ayrıca, halihazırda bir dijital ürününüz varsa ve yeniden tasarım yapmayı düşünüyorsanız, ürününüzün arayüzünü dönüştürmek için en uygun animasyonu kullanabilirsiniz.

 

Kaydırma

Kaydırma animasyonlarının temel avantajlarından biri, etkileşimli tasarımları tamamlaması ve kullanıcılara kontrol vermesidir. Birçok hareketli kaydırma türü arasından seçim yapabilirsiniz: tek sayfalık kaydırma, kaydırma çizimi, arka plan değişiklikleri ve daha fazlası. Bununla birlikte, ilke tüm hareketli kaydırma türleri için aynıdır: bir kullanıcı sayfayı kaydırdığında animasyonlar hareket eder.

Animated_scrolling_with_parallax

[Paralaks efekti ile hareketli kaydırma. Resim kaynağı: Dribbble ]

Resim galerileri

Kullanıcıların aynı ekranda birden fazla görüntü görmesini istiyorsanız, görüntüleri tek tek gösteren bir slayt gösterisi veya döngü ekleyebilirsiniz. Bunu yaparak sitenizin alanını kurtarmakla kalmaz, aynı zamanda bir hikaye de anlatabilirsiniz. Görsel sipariş ederek, web uygulamanızın nasıl çalıştığını, şirket değerlerinizin neler olduğunu ve şirketinizin nasıl ortaya çıktığını açıklayabilirsiniz. Veya dikkat çekmek için en iyi ürünlerinizi listeleyebilirsiniz. Ayrıca, resim slayt gösterileri ve atlı karıncalar için yön ayarlayarak, kullanıcıların diğer site öğelerini kullanmasını sağlayabilir ve onları teşvik edebilirsiniz.

Property_listing

 

Kenar çubuğunda gezinme

Kenar çubuğunda gezinme (dikey kayan gezinme), kompakt ve net web uygulamaları oluşturmak için en uygun seçenektir. Ekranın yan tarafında her zaman erişilebilen küçük animasyonlu menü simgeleri, kullanıcıların web uygulamanızın menüsüne kaydırma yapmadan kolayca erişmesine olanak tanır.

Animated_sidebar_navigation

[Hareketli kenar çubuğu gezinme. Resim kaynağı: Dribbble ]

Görsel geri bildirim

Animasyonlar, kullanıcıların doğru eylemleri gerçekleştirip gerçekleştirmediklerini anında anlamalarına yardımcı olabilir. Bu animasyonlar, uyarı animasyonları ve fareyle üzerine gelme efekti animasyonlarına bölünebilir.

  • Uyarı animasyonları

Web uygulamanız, kullanıcılara yanlış bir şey yaptıklarını söyleyebilir. Örneğin, animasyonlar, kullanıcılardan bir alanı yanlış doldurmaları veya bir şeyi gözden kaçırmaları durumunda bir işlemi tekrar etmelerini veya bir düğmeyi tekrar tıklamamalarını isteyebilir. Uyarı animasyonları, kullanıcıları geçersiz eylemler konusunda bilgilendiren kırmızı haçlar, üzgün emojiler veya diğer semboller şeklinde olabilir.

Button_with_the_state

[Hata / başarı durumuna sahip bir düğme. Resim kaynağı: Dribbble ]

  • Fareyle üzerine gelme animasyonları

Fareyle üzerine gelme efektlerine sahip animasyonlar, kullanıcılara fareyle üzerine geldikleri nesnelerin tıklanabilir olup olmadığını gösterebilir. Düğmeler yanabilir, biçim veya renk değiştirebilir veya ipuçları gösterebilir.

Animation_with_a_hover_effect

[Üzerine gelme efektli animasyon. Resim kaynağı: Dribbble]

Fareyle üzerine gelme animasyonlarının bir diğer amacı, kullanıcıları gerçekleştirdikleri eylemlerin başarılı olduğu konusunda bilgilendirmektir. Örneğin, kullanıcılar bir form gönderdiklerinde, animasyon gönder düğmesine basıldığını gösterebilir.   

Görsel geri bildirim animasyonlarını kullanarak ürün tasarımınız daha sezgisel hale gelir. Bu tür bir animasyonu mobil ürününüze de uygulayabilirsiniz. 

Hikaye anlatma

Yaratıcı animasyonlu hikaye anlatımı, birçok bilgiyi hızlı bir şekilde aktarabilir ve hikayenizi ilgi çekici hale getirebilir. Örneğin, yeni otel inşaatınız hakkında uzun bir makale yazmak yerine, inşaat sürecini gösteren bir animasyon oluşturabilirsiniz. Aşağıda, bu tür animasyonlu hikaye anlatımının neye benzeyebileceğine dair bir örnek görebilirsiniz:

Animated_storytelling

[Animasyonlu hikaye anlatımı örneği. Resim kaynağı: Dribbble ]

Web animasyonları oluşturmak için teknolojiler

Artık en iyi animasyon türlerini bildiğinize göre, bunları uygulamanıza nasıl ekleyebileceğinizi öğrenmenin zamanı geldi. Olağan iş akışı şu şekildedir:

  • Bir tasarımcı bir konsept oluşturur ve bunu bir ön uç geliştiricisine gösterir.

  • Ön uç geliştiricisi, animasyon karmaşıklığını kontrol eder ve onu uygulamak için teknolojiyi seçer. Çoğu zaman, geliştirici binlerce kullanıma hazır çözüm arasından seçim yapmak için CodePen'e gider .

  • Ön uç geliştiricisi, animasyonun temel kullanım örnekleri için düzgün çalışıp çalışmadığını test eder.

Harika web animasyonları oluşturmak için en popüler teknolojilere bakalım.

CSS

CSS animasyonları, bir dizi anahtar kare kullanarak farklı durumlar arasında geçiş yapmanıza yardımcı olur. Yüksek performanslı CSS animasyonları ile harici kitaplıklara ihtiyacınız yoktur. Belge Nesne Modeli'nde (DOM) web sayfanızın öğelerini CSS özelliklerini ayarlayarak canlandırabilirsiniz. Animasyonlarınızı medya sorgularıyla değiştirebileceğiniz için CSS animasyonları da duyarlı geliştirme için iyidir. Anahtar kareler ve zamanlama özellikleri için nesneler yapmak yerine, değerlerini doğrudan iletebilirsiniz.

Ancak CSS animasyonlarıyla karmaşık fizik efektleri oluşturamaz ve gerçekçi hareketi taklit edemezsiniz. Ve arka arkaya üçten fazla animasyona ihtiyacınız varsa CSS animasyonları çalışmayacaktır. JavaScript'te karmaşık ve sıralı animasyonlar yazmak daha iyidir.

JavaScript

JavaScript animasyonları, geçişlerden veya CSS tabanlı animasyonlardan daha fazla güç ve esneklik sunar ve ayrıca bir sayfadaki DOM öğelerini taşımak için de kullanılabilir. Temel JavaScript'in kendi animasyon işlevi vardır, ancak çoğu animasyon, performansı büyük ölçüde etkileyen ek kitaplıklar aracılığıyla yapılır. JavaScript animasyonları, sıçrama, duraklatma, durdurma ve yavaşlamayı canlandırmak için yaygın olarak kullanılır.

 

SVG

SVG, Ölçeklenebilir Vektör Grafikleri anlamına gelir. Vektörlerin piksel sınırlaması olmadığı için SVG animasyonları net görünür. Sayfayı nasıl yeniden boyutlandırdığınız önemli değil, SVG'ler kaliteyi tıpkı raster görüntüler gibi korur.

SVG öğeleri CSS ile canlandırılabilir. Ancak SVG'nin SMIL adı verilen kendi animasyon sözdizimi de vardır. SMIL, SVG animasyonları için CSS'den daha güçlüdür, çünkü CSS'de bir yolun şekli gibi bazı SVG özelliklerini canlandıramazsınız.

Tuval

Tuval animasyonları ile birçok görselleştirmeyi canlandırırken harika performans elde edersiniz. Kanvas, yüksek performanslı işleme ile karmaşık animasyonlar yapabileceğiniz görsel bir alan sağlar. Tuval animasyonları piksellerle çalışmakla ilgilidir. Ve pikselleri kullanarak, performansı etkilemeyen karmaşık çizimler ve etkileşimler oluşturabilirsiniz. 

WebGL

WebGL, çoğunlukla zor efektler ve 3B nesneler için kullanılan Web Grafik Kitaplığı anlamına gelir. Sanal gerçeklik (VR) için animasyonlar oluşturmak için WebGL kullanmak da mümkündür. WebGL, grafikleri saniyede 60 kare olarak oluşturmanıza olanak tanır. WebGL animasyonları için ayrıca bir tuval kullanırsınız, ancak bunu yapmak çok daha zor ve karmaşıktır. Çoğu yaratıcı görsel efekt WebGL ile yapılır.  

Web animasyonu araçları

Şimdi web sayfalarınız için harika animasyonlar oluşturmaya yönelik araçlara geçelim. Tartışacağımız UI animasyon araçlarının çoğu, projenizde kullanabileceğiniz harici kitaplıklardır.

JavaScript kitaplıkları

Animasyonlar oluşturmak için çeşitli üçüncü taraf JavaScript kitaplıkları vardır. Bazılarına bir göz atalım.

  • GreenSock (GSAP)

GSAP, birçok animasyon seçeneği içeren popüler bir JavaScript animasyon kitaplığıdır. Temel olarak, GSAP bir özellik manipülatörüdür. Bir başlangıç ​​değeri ve bir bitiş değeri yakalar. Daha sonra bu değerler arasında saniyede 60 kez interpolasyon yapar.

GSAP, her özelliği ayrı ayrı canlandırmak için kullanılır, böylece her şeyi kolayca ölçekleyebilir, döndürebilir ve taşıyabilirsiniz. Ve GSAP esnektir, bu nedenle neredeyse her şeyi canlandırmak için harika bir seçimdir: CSS, SVG, DOM. Aslında, JavaScript'in çalıştığı her yerde kullanabilirsiniz.

Web_animation_concept

 

  • ScrollMagic

ScrollMagic, kaydırma animasyonlarını yönetmek için kullanabileceğiniz bir eklentidir. Bir kullanıcının kaydırma konumuna göre öğeleri canlandırmak ve öğeleri belirli kaydırma konumlarına sabitlemek için iyidir. ScrollMagic ile web sayfanıza paralaks efekti de ekleyebilirsiniz. ScrollMagic, önerilen çerçeve GSAP olsa da, animasyonlar oluşturmak için birden çok çerçeveyle çalışır.

  • Velocity.js

Velocity.js, tam özellikli bir JavaScript animasyon kitaplığıdır. WhatsApp, Uber, MailChimp ve diğer birçok şirket web siteleri için Velocity.js kullanıyor. Bu kitaplık genellikle temel sayfa UX hareketi ve mikro etkileşimleri oluşturmak için kullanılır. Velocity.js, SVG desteği, renkli animasyonlar, dönüştürmeler, döngüler, kaydırma ve hareket hızı özelliklerine sahiptir.

  • Mo.js

Mo.js kitaplığı, özel hareketli grafikleri desteklediği için web sayfalarınızın UI ve UX'lerini canlandırmak için harika çalışıyor. Mo.js modülerdir, bu nedenle projeleriniz için özel oluşturulmuş kitaplığı kullanabilir ve büyük dosya boyutu ek yüklerinden kaçınabilirsiniz. Mo.js ile, DOM ve SVG DOM öğelerini taşıyabilirsiniz, ancak aynı zamanda benzersiz özelliklere sahip özel Mo.js nesneleri de oluşturabilirsiniz.

  • Anime.js

Anime.js, tüm CSS özellikleri, bağımsız CSS dönüşümleri, SVG ve DOM nitelikleri ve JavaScript nesneleriyle çalışır. Anime.js kodu hafif tutarken birden çok zamanlama, yumuşatma, oynatma kontrolleri ve diğer şeylerle ilgilenir.

  • Vivus

Vivus, SVG'leri canlandırmak ve onlara çizilmiş öğelerin görünümünü vermek için oluşturulmuş bir JavaScript kitaplığıdır. Size üç farklı animasyon stili sunar - gecikmeli, senkronize ve OnebyOne - her biri SVG'nin çizilirken nasıl canlandırılacağını belirler. Vivus'u animasyon stillerini, yollarını ve zamanlamayı değiştirerek benzersiz animasyonlar oluşturmak için kullanabilirsiniz.

3D animasyonlar

3D animasyonlar oluşturmak için en popüler araç, WebGL'yi kolaylaştırmak için kullanılan bir JavaScript kitaplığı olan Three.js'dir. Önceden oluşturulmuş bileşenleri ve yöntemleri ile 3D animasyonları daha hızlı oluşturabilirsiniz. 

3D_animation_for_the_eCuris_project

[ 3 boyutlu animasyon .]

Web için After Effects animasyonlarını oluşturma

Hareket tasarımcıları, animasyonlar oluşturmak için çoğunlukla Adobe After Effects kullanır. Ardından geliştiriciler farklı ön uç animasyon araçları kullanır. Ancak daha basit bir yol var: After Effects için Bodymovin uzantısını kullanarak animasyonlarınızı JSON biçiminde dışa aktarabilir ve sitenize animasyon eklemek için Lottie kitaplığını kullanabilirsiniz.

Kod içermeyen web sitesi oluşturucuları

Basit bir web sayfasına ihtiyacınız varsa ve yukarıda listelediğimiz teknolojileri kodlamak veya kullanmak istemiyorsanız, yeni başlayanlar için araçları kullanabilirsiniz - web sitesi kurucuları. Evet, bunlara animasyon yazılımı denemez, ancak web sitesi oluşturucuları genellikle oluşturduğunuz sitede nesneleri canlandırmanıza izin verir. Çok sayıda web sitesi kurucusu bulabilir ve istediğinizi seçebilirsiniz. Bunlar sadece birkaç örnektir.

  • Readymag

Readymag, web sayfaları oluşturmak için popüler bir araçtır ve bu sayfaların öğelerini canlandırabilir. Readymag'de, bir animasyonun ne zaman başlamasını istediğinizi seçebilir ve taşıma, döndürme, ölçekleme ve opaklık gibi temel efektleri uygulayabilirsiniz. Daha karmaşık animasyonlara ihtiyacınız varsa, bir efektin diğerini takip etmesi için adımlar ekleyebilirsiniz. Readymag, yükleme dizileri, kaydırma animasyonları ve tıklama ve fareyle üzerine gelme animasyonları oluşturmanıza olanak tanır.

  • Web akışı

Web akışı, kodlamadan çok adımlı animasyonlar oluşturmanıza da olanak tanır. İlerlemeyi kaydırmak ve öğe boyutlarını, stilini ve konumlarını dönüştürmek için hareketleri bağlayabilirsiniz. Ayrıca, fareyle üzerine gelme veya tıklama ile hareket etmeleri veya değişmeleri için farklı öğeler üzerine mikro etkileşimler de ekleyebilirsiniz. Sıfırdan başlamak istemiyorsanız, önceden oluşturulmuş animasyonları web sitenize kolayca ekleyebilirsiniz.

  • Wix 

Wix, sitenize animasyon eklemenize izin veren başka bir web sitesi oluşturucusudur. İşaretleri ve düğmeleri solma, havada süzülme, kayma, uçma, katlama ve döndürme gibi animasyonlarla etkileşimli hale getirmek için kullanabilirsiniz. Ek olarak, sayfa geçişlerini canlandırma ve geçiş sırasında geçiş yapma, kaybolma ve kaydırma sırasında dikey veya yatay olarak hareket ettirme seçeneği vardır.

Animasyonlar, profesyonel web siteleri oluşturmanıza, web sitesi öğelerini vurgulamanıza ve kullanıcıların sitenizde daha uzun süre kalmasını sağlamanıza yardımcı olabilir. Web uygulamanıza dinamik veya pürüzsüz animasyonlar eklemek için kullanabileceğiniz birçok animasyon teknolojisi, aracı ve tekniği vardır, bu nedenle web uygulamanızı benzersiz ve modern hale getirmek için doğru olanları seçin. Ama animasyonlara kapılmayın. Aksi takdirde, kullanıcıları korumak yerine onları korkutan yavaş ve hantal bir web sitesine sahip olabilirsiniz.