Ölçeklenebilir Vektör Grafiğine Bir Bakış (SVG) Animasyonu

Bugün tartışmaya devam edeceğiz. Ölçeklenebilir Vektör Grafiği (SVG), ve bu sefer birlikte çalışacağız SVG Animasyonu. Yine de korkma, SVG Animasyonu nispeten kolaydır ve aslında bu yazıda temel bilgilerden başlayacağız..

Temel uygulama

SVG'de animasyon yapılabilir elemanı;

Yukarıdaki kod pasajından görebileceğiniz gibi, içeride etkilenecek eleman. Bu aşağıdaki özelliklerden bazılarını içerir;

attributeName: Bu özellik, hangi öğenin niteliğinin animasyonda etkileneceğini belirtir.

itibaren: Bu özellik isteğe bağlıdır, kesin bir değer belirleyebilir veya bulunduğu yerden başlaması için bırakabiliriz.

için: Bu özellik animasyon yönünü belirtir. Belirtilen değere bağlı olarak attributeName, sonuçlar değişebilir. Ancak bu örnekte yükseklik.

dur: Bu özellik animasyon süresini belirtir. Bu özelliğin değeri Saat Değeri Sözdiziminde ifade edilir. Örneğin, 02:33 2 dakika 33 saniyeyi gösterir 3h 3 saate eşittir, ancak o kadar zamana ihtiyacımız yok, bu yüzden sadece süreyi belirledik 3s veya 3 saniye;

Aynı şey için de geçerli element, ama bu sefer çemberin yarıçapı özelliğini (r).

• Temel Uygulama Demosu

Hareketli eleman

SVG öğelerinin taşınmasında, yalnızca öğenin koordinatını hedeflememiz gerekir x ve y;

Yukarıdaki örnekte, dikdörtgeni 0 için 200 3 saniye içinde, dikdörtgen, soldan sağa yatay olarak hareket eder. Ayrıca, dikkatlice bakarsanız, yani eleman doldurmak.

doldurmak buradaki özellik, diğer SVG öğelerinde olduğu gibi arka plan rengiyle ilgisi yoktur. Bu özellik, animasyon sona erdikten sonra nasıl davranacağını belirtir. Bu örnekte biz donmak Etkilenen öğe, animasyonun bittiği yerde kalır..

Aynı zamanda benzer şekilde çalışır eleman, kullanabiliriz cx veya cy, bunun gibi:

• Öğe Demosunu Taşıma

Birden Çok Özelliği Hareketlendir

Şimdiye kadar canlandırılacak yalnızca bir özelliği hedefliyoruz, ancak aynı anda birden fazla özelliği canlandırmak da mümkün. Aşağıdaki örnek, nasıl yaptığımızı göstermektedir:

Gördüğünüz gibi, benzer şekilde çalışıyor, ancak şimdi iki tane var. içindeki öğeler hedeflemek yarıçap ve Darbe genişliği etkilenmek.

• Birden Çok Özellik Demosu

Bir yolu takip

Önceki yazımızda SVG'de Metinle Çalışma, Metni bir Yola nasıl aktaracağınızı gösterdik. Aynı şeyi yapmak da mümkündür SVG Animasyonu, Bir yolu takip edecek bir unsuru canlandırabiliriz. İşte bir örnek.

Yol, içinde daha iyi tanımlanır eleman, yukarıda gösterildiği gibi. Elemanın Yolu takip etmesi için animasyonu ile tanımlamamız gerekir. ve yolu bağla İD ile eleman, aşağıdaki gibi;

İşte bu, şimdi eylemde görelim;

• Path Demosunu Takip Etme

Dönüşümler

Ayrıca dönüşüm gibi kullanabilirsiniz ölçek, Çevirmek ve döndürmek Animasyon için ve bunu yapmak için kullanacağız ;

SVG'deki dönüşümler, CSS3 ile benzer prensipleri paylaşıyor ve CSS3 2D Dönüşüm hakkında önceki yazımızda oldukça kapsamlı bir şekilde ele aldık..

• Dönüşüm Demosu

Son düşünceler

SVG Animasyonundaki uzmanlığınıza bağlı olarak, bunun gibi bir şey oluşturabilirsiniz..

Flash Animasyon üzerinden SVG Animasyon kullanmanın bir avantajı, çalışmak için üçüncü taraf eklentilere dayanmaması ve aynı zamanda Flash'tan çok daha hızlı olmasıdır. Adobe, Android'deki Flash desteğini durdurduktan sonra, bir sonraki web sitenizde animasyon sunmak için bu yaklaşımı denemek isteyebilirsiniz..

Diğer Referanslar

• SVG Animate Belgeleri
• Gelişmiş SVG Animasyon Teknikleri

• Demoyu Gör
• Kaynak İndir