CSS Kullanarak SVG Animasyonu Nasıl Oluşturulur
Animasyon SVG gibi doğal unsurlar aracılığıyla yapılabilir
CSS Animasyon, SnapSVG gibi bir JavaScript kütüphanesini kullanmanın alternatif bir yolu olabilir. Bu yazıda SVG'de CSS Animasyon ile neler sunabileceğimizi göreceğiz.
1. Şekiller Oluşturma
Öncelikle, canlandırmak istediğimiz şekilleri ve nesneleri çizmemiz gerekecek. Gibi uygulamaları kullanabilirsiniz kroki, Adobe Illustrator, veya Inkscape bir tane oluşturmak.
Bu örnekte, fon olarak bulutlu bir gökyüzü çizdim ve yukarı doğru ateş eden bir roket gemisi, alevler dahil:
Çizim bittiğinde, yarattığımız her nesneyi SVG'ye dışa aktarmamız gerekiyor..
Sketch'i bu adım için örnek olarak kullanacağım. SVG formatına dönüştürmek istediğiniz nesneyi seçin. Pencerenizin sağ alt köşesinde tıklayın. İhracat Yapılabilir Yap. SVG formatını seçin, ardından Dışa Aktar object-name seçeneğini tıklayın. Bu seferde bir nesne yapmak gerekir.
2. SVG'yi HTML'ye yerleştirin
SVG dosyasını bir kod düzenleyicide açtığınızda, SVG kodlarının oldukça karışık olduğunu göreceksiniz. Dolayısıyla, SVG dosyasını konuşlandırmadan önce, kodu düzenleyelim ve SVGO adlı bu komut satırı aracıyla optimize edelim.
Başlatmak terminal veya Komut istemi, ve bu komut satırını kullanarak SVGO’yu kurun:
[sudo] npm kurulum -g svgo
Komutu ayarla, SVGO, kullanarak SVG dosyasında --güzel okunabilir SVG kodu üretmek için:
svgo rocket.svg - güzel
Bir dizinde birden fazla SVG varsa, hepsini bir kerede birlikte optimize edebilirsiniz. Dizinin adlandırıldığını varsayarsak /Görüntüler, daha sonra ana dizinden bu komutu kullanın:
svgo - f görüntüleri
SVGO kullanmadan önce ve sonra farkı görelim.
SVG dosyasının içindeki kodu kopyalayın ve bir HTML dosyasına yapıştırın. 800 piksel x 600 piksel genişliğindeki bir çalışma alanında çalışacağız. Genişlik SVG öğesinde.
SVG, HTML dosyasında ayarlanmıştır. Her nesne için bir kimlik tanımlamamız gerekecek, böylece daha sonra CSS'de seçebiliriz..
Bu ders için, roket, alevler ve bazı bulutların kimliğini tanımlamamız gerekiyor. Nesnelerin daha sonra animasyon aşamasını ele alması için, eklememiz gerekir İD - Ayrıca kullanabilirsiniz sınıf - Her nesneye. Bu aşamada, kod şöyle görünecektir:
3. CSS Kullanarak Canlandırın
Şimdi biraz eğlenelim. Plan roketi uzaya fırlatmak. Roket iki gruba ayrılır; roket kendisi ve alev.
Her şeyden önce, roketi çalışma alanının ortasına, aşağıdaki gibi konumlandırıyoruz:
# rocket transform: tercüme et (260px, 200px);
Gördüğün şey şudur:
Şimdi roketin yukarı doğru hareket etmesini sağlamak için düşen bulutların yanılsamasını yaratmamız gerekiyor. Bunun için kullandığımız CSS:
# cloud1 animasyon: sonsuz 1s doğrusal sonsuz; @keyframes fall from transform: translateY (-100px); için transform: translateY (1000px)
Daha gerçekçi görünmesini sağlamak için, dört bulut canlandıralım ve onları oluşturalım. “düşmek” farklı hızlarda Onları X ekseninden farklı olarak konumlandıracağız..
İkinci bulutun şöyle bir kodu olacak:
# cloud2 animation: fall-2 2s doğrusal sonsuz; @keyframes fall-2 from transform: translate (200px, -100px); ila transform: tercüme et (200 piksel, 1000 piksel)
2 numaralı bulutu sağa doğru biraz hareket ettirdiğimizi unutmayın. 200px ile Çevirmek. Bu aşamada, sonuç şöyle görünmelidir.
Şimdi roketin hayata geçmesini sağlayalım. Aşağıdaki gibi bir animasyon ana karesi atayacağız:
#rocket animation: popup 1'ler sonsuzluğu kolaylaştırır; @keyframes popup 0% transform: tercüme etmek (260px, 200px); % 50 dönüşümü: çevir (260px, 240px); 100% dönüşümü: çevir (260px, 200px);
Ayrıca roket alevine animasyon ekleyin:
#flame animation: 0,2s doğrusal sonsuz salla; @keyframes 0% dönüşümü transform: translate (55px, 135px) döndürün (7deg); % 20 dönüşümü: çevir (55px, 135px) döndürür (0deg); 40% dönüşümü: çevir (55px, 135px) döndürür (-7deg); % 60 dönüşümü: çevir (55px, 135px) döndürür (0deg); 100% dönüşümü: çevir (55px, 135px) döndürür (0deg);
Sağ! Artık kodlarımızın tümü ayarlandı, animasyon SVG üzerinde çalışmalı.
Uzaya fırlayan roketimize bir göz atın.
Son düşünce
Animasyon, CSS'de kavraması en kolay özellik değildir. Ancak umarım bu öğreticiyi, SVG'deki CSS Animasyonunu daha iyi keşfetmek için iyi bir başlangıç noktası olarak bulacaksınız; Eldeki CSS Animasyon ile neler başarılabileceğini bilmek sizi şaşırtacak.
En temel bilgilerle başlamak istiyorsanız, buradan bu yazı ile başlayabilirsiniz: Ölçeklenebilir Vektör Grafikleri (SVG) Animasyonuna Giriş veya SVG serisinin kalanını.
- Demoyu Gör
- Kaynak İndir
