-
Merhaba, benim adım Natalie.
-
Google Web Designer'da mühendisim.
-
Bu videoda, Hızlı moddaki
zaman çizelgesini
-
kullanarak animasyonları nasıl
-
oluşturacağınızı göreceğiz.
-
Hızlı mod zaman çizelgesi,
sunduğumuz iki animasyon
-
aracından biridir.
-
Pek çok dosya varsayılan olarak
bu modda açılır.
-
Diğer araç ise Gelişmiş
mod zaman çizelgesi.
-
Buna, Zaman çizelgesi
panelinin sağ üst köşesindeki
-
şu açma kapama düğmesini
tıklayarak erişebilirsiniz.
-
Özel olarak Gelişmiş modu
ele aldığımız
-
ayrı bir eğiticimiz de var.
-
Bu eğiticide ise
Hızlı modu ve bu modda
-
yapabileceğiniz bazı şeyleri
anlatacağız.
-
Bir örnekle başlayalım.
-
Bu düğme listem var.
-
Bunların sol kenardan
tek tek uçmalarını
-
istediğimi düşünelim.
-
İlk olarak bunları başlangıçta
-
olmalarını istediğim yere,
yani sayfanın dışına
-
konumlandırıyorum.
-
Ardından Zaman çizelgesinde,
aşağıdaki bu Artı düğmesini
-
tıklayarak yarım saniye sonrasına
-
yeni bir sahne ekliyorum.
-
Bunu daha sonra özelleştirebileceğiz.
-
Bu sahnede, öğelerimi animasyonda
yarım saniye sonra olmasını
-
istediğim şekilde yeniden düzenliyorum.
-
ABOUT düğmesinin sayfada
görünür olmasını istiyorum.
-
Ardından diğerlerini düzenliyorum.
-
Soldan uçarak gelen
-
GALLERY düğmemiz var.
-
Üçüncüsü CONTACT düğmesi olacak
-
ve sol kenardan uçacak.
-
Böylece animasyonumuz hazır oldu.
-
Bunu, her bir küçük resmi tıklayarak
doğrulayabilirsiniz.
-
Tıkladığınızda animasyonunun
o saniyede nasıl
-
göründüğüne ait bir önizleme
gösterilir.
-
İsterseniz Oynat düğmesini
tıklayarak
-
animasyonunuzun sahnede
canlı bir önizlemesini görebilirsiniz.
-
Bu küçük Döngü düğmesiyle
animasyonunuzu sürekli önizleyerek
-
hatalarını ayıklayabilirsiniz.
-
Gördüğümüz gibi, her küçük resim
çiftinin arasındaki 0,5 saniye
-
her geçişin, her iki sahnenin
arasındaki süreyi
-
gösteriyor.
-
Bunu tıklarsak süreyi daha uzun
-
veya daha kısa olacak şekilde
özelleştirebiliriz.
-
Sürenin bir saniye olmasını
istiyor olalım.
-
Yumuşatmayı da ayarlayabiliriz.
-
Bu, her iki sahne arasındaki
-
tüm animasyonlar için ara değerleri
hesaplamakta kullanılan
-
Bezier eğrisidir.
-
Tüm standart CSS yumuşatma
işlevlerimiz mevcut.
-
Bunların arasında tek tek
dolaşabilirsiniz.
-
Yumuşak giriş ve çıkış seçeneği
gerçek dünyaya benzer hareket
-
sağladığından çok kullanışlı.
-
Şimdi önizlersek üçüncü ve
dördüncü küçük resimler
-
arasındaki geçişte yumuşak
giriş çıkışı ve yaklaşık
-
bir saniye sürdüğünü
görebiilriz.
-
Bu genel bakışın
Hızlı modu kullanarak
-
animasyonlar oluşturmaya
başlamanıza
-
yardımcı olacağını umarım.
-
Kullanması çok kolay,
-
ancak çok karmaşık animasyonlarda
bazı
-
işlev kısıtlamaları var.
-
Örneğin aynı anda animasyon
uygulanan çok sayıda
-
öğeniz olup bu öğelerin
-
her birinin animasyon karelerini
ve geçişlerini ayrı ayrı
-
düzenleyebilmek istediğinizde,
özel yumuşatma işlevleri
-
gibi şeyler oluşturmak ya da
etkileşim eklemek istediğinizde
-
bunları yapabilmek için
-
Gelişmiş mod zaman çizelgesini
kullanmanız gerekecek.
-
Bunun için daha ayrıntılı
bilgilerin verildiği
-
ayrı bir eğiticimiz var.
-
Şimdilik bu kadar.
-
İzlediğiniz için teşekkürler.
