Motion UI ile Animasyon ve Geçiş Oluşturma
Animasyonlar ve geçişler tasarımcıların değişimi görselleştirmelerine ve içeriği ayırt etmelerine izin verir. Animasyonlar ve geçişler; kullanıcıların bir şey değiştiği zaman tanımalarına yardımcı olmak sitede, örneğin bir düğmeye tıklarlar ve ekranda yeni bir bilgi parçası belirir. Uygulamalara ve web sitelerine hareket eklemek, kullanıcılara izin verdiğinden kullanıcı deneyimini geliştirir içeriği daha sezgisel bir şekilde anlama.
Sıfırdan veya kitaplıklar veya çerçeveler kullanarak animasyonlar ve geçişler oluşturabiliriz. Bizim için iyi haber, ön uç millet, geçen Ekim ayında açık kaynaklı Motion UI olan Vakfın yaratıcısı Zurb’in, Sass’a dayanan animasyon ve geçiş kütüphanesi..
Başlangıçta Apps for Foundation ile birlikte verildi ve şimdi, bağımsız sürüm için bir de dahil olmak üzere bir yenileme aldı. animasyon kuyruk sistemi ve esnek CSS desenleri. Motion UI ayrıca, Orbit kaydırıcısı, Toggler değiştiricisi ve Reveal modeli gibi Foundation çerçevesinin bazı bileşenlerine de güç veriyor, bu yüzden oldukça sağlam bir araç.
Başlamak
Motion UI bir Sass kütüphanesi olmasına rağmen, Zurb geliştiricilere sadece derlenmiş CSS'yi içeren kullanışlı bir başlangıç seti sağladığı için Sass ile kullanmanıza gerek yoktur. Motion UI'nin ana sayfasından indirebilir ve önceden tanımlanmış CSS animasyon ve geçiş sınıflarını kullanarak prototiplere hızlı bir şekilde başlayabilirsiniz.
Başlangıç seti yalnızca Motion UI'yi değil, aynı zamanda Foundation çerçevesini de içerir, bu da Foundation ızgarasını ve Siteler için Foundation'ın diğer tüm işlevlerini kullanabilirsiniz..
Başlangıç kiti ayrıca index.html hızlı bir şekilde çerçeveyi test etmenizi sağlayan dosya.
Daha gelişmiş ayarlara ihtiyacınız varsa ve Motion UI'nin güçlü Sass karışımlarından yararlanmayı istiyorsanız, kaynağı içeren tam sürümü yükleyebilirsiniz. .SCSS npm veya Bower olan dosyalar.
Motion UI'nin belgeleri şu anda hala yarı pişmiş durumda. Burada Github'da bulabilir veya isterseniz katkıda bulunabilirsiniz..
Hızlı prototipleme
Prototiplemeye başlamak için index.html başlangıç kitinin dosyasını veya kendi HTML dosyanızı oluşturun. Düzeni Foundation ızgarasını kullanarak oluşturabilirsiniz, ancak Motion UI, Foundation çerçevesi olmadan bağımsız bir kütüphane olarak da kullanılabilir.
Motion UI'da 3 ana önceden tanımlı CSS sınıfı vardır:
- Geçiş Sınıfları - Bir HTML öğesine kaydırma, solma ve menteşe efektleri gibi geçişler eklemeyi mümkün kılar.
- Animasyon Sınıfları - Farklı sallama, kıpırdatma ve eğirme efektlerini kullanmanızı sağlar
- Değiştirme Sınıfları - hem geçiş hem de animasyon sınıflarıyla birlikte çalışırlar ve hareketin hızını, zamanlamasını ve gecikmesini ayarlamanıza izin verirler..
HTML’yi oluşturma
Önceden tanımlanmış CSS sınıflarıyla ilgili en güzel şey, yalnızca sınıf olarak değil, diğer HTML nitelikleri olarak kullanılamamasıdır. Örneğin yapabilirsin onları eklemek değer özniteliği etiket, ya da yapabilirsin bunları kendi geleneklerinizde kullanın veri-* nitelik yanı sıra.
Aşağıdaki kod parçacığında bu ikinci seçeneği seçtim ayrı davranış ve değiştirici sınıflar. Kullandım yavaş ve kolaylaştırmak sınıflar olarak değiştirici nitelikler ve bir özel oluşturuldu Veri animasyon için öznitelik ölçek olarak makyaj geçiş. Beni tıkla düğme efekti tetiklemek içindir.
JQuery ile Animasyon ve Geçiş Oynatma
Hareket Kullanıcı Arabirimi, belirli bir etkinlik gerçekleştiğinde geçişleri ve animasyonları oynatabilecek küçük bir JavaScript kitaplığı içerir.
Kütüphanenin başlangıç kitinde kitaplığın kendisi bulunur. hareket-ui-başlatıcı> js> satıcı> hareket-ui.js yol.
Bir oluşturur MotionUI iki yöntemi olan nesne: animateIn () ve animateOut (). Belirli bir HTML öğesine bağlı geçiş veya animasyon
$ (function () $ (". düğme"). tıklayın (function () var $ animation = $ ("# boom"). data ("animation"); MotionUI.animateIn ($ ("# boom") , $ animasyon););); Yukarıdaki kod pasajında, biz Veri animasyon jQuery'nin yerleşik özelliğini kullanarak öznitelik veri() yöntem, daha sonra denilen animateIn () yöntemi MotionUI nesne.
İşte tam kod ve sonuç. Temel çerçeveler için yerleşik düğme sınıflarını kullandım. Beni tıkla düğmesini ve bazı temel CSS’leri de ekledi.
Motion UI oldukça esnek olduğundan, geçişleri ve animasyonları birçok şekilde ekleyebilir ve tetikleyebilirsiniz..
Örneğin, yukarıdaki örnekte mutlaka kullanılması gerekmemektedir. Veri animasyon özel nitelik, ancak davranış sınıfı ile sadece addClass () jQuery yöntemi için
$ ( '# Patlaması') addClass ( 'ölçek-içinde-up.');
Sass ile Özelleştirme
Motion UI'nin önceden hazırlanmış CSS sınıfları, Sass yardımıyla kolayca özelleştirilebilen varsayılan değerleri kullanır. Her geçiş ve animasyonun arkasında efekti ayarlarının değiştirilmesini mümkün kılan bir Sass karışımı var. Bu şekilde tamamen özel bir animasyon veya geçişi kolayca oluşturabilirsiniz.
Özelleştirme başlangıç kitiyle birlikte çalışmaz, efektleri kendi ihtiyaçlarınıza göre yapılandırmak istiyorsanız Sass sürümünü yüklemeniz gerekir..
Bir geçişi veya animasyonu özelleştirmek için, öncelikle ilgili karışımı bul. _classes.scss dosya, derlenmiş CSS sınıflarının isimlerini ilgili karışımlarla birlikte içerir..
Örneğimizde biz kullandık .ölçek olarak makyaj özniteliği ve _classes.scss, faydalandığını çabucak anlayabiliriz mui-zoom mixin:
// Geçişler @mixin motion-ui-transitions … // Ölçek. Ölçek-in-up @include mui-zoom (in, 0.5, 1); …
Hareket UI kullanır mui- karışımların öneki ve her karışımın kendine ait bir dosyası var. Motion UI, kendi kendini açıklayıcı adlandırma kurallarına sahiptir; mui-zoom içinde karıştırmak _zoom.scss dosya:
@mixin mui-zoom ($ durum: in, $ den: 1.5, $ -: 1, $ solmaya: map-get ($ harekete-ui ayarları, ölçek ve solmaya), $ süre: null, $ zamanlama: null, $ gecikme: null) …
Aynı tekniği kullanarak, ilgili Sass değişkenlerinin değerlerini değiştirerek bir animasyonun veya geçişin her özelliğini kolayca kontrol edebilirsiniz..
Değiştirici Sınıfları Yapılandırma
Animasyonların ve geçişlerin davranışını (hız, zamanlama ve gecikme) kontrol eden değiştirici sınıflar, ilgili değişkenlerin değerlerini de değiştirerek Sass ile yapılandırılabilir. _settings.scss dosya.
Değişikliklerinizi yaptıktan sonra, Motion UI yeni değerleri varsayılan olarak kullanın Her animasyonda ve geçişde, ilgili karışımları tek tek yapılandırmanız gerekmez.
