Efektlerden Sonra İhracat Animasyonları HTML5'e

Sep 16, 2025

Nasıl Yapılır

Web'de animasyon kalmak için burada. Bizimizi getirmeye yardımcı olan ince hareketlerden her şeyde UI tasarımı Hayata, tamamen animasyonlu tuval deneyimleri ve bir zamanlar bir zamanlar düşündüğümüze meydan okuyan WebGL deneyleri için.

Devlerin yaratıcılığı ve tarayıcıların yetenekleri artarken, web'deki animasyon uzun zamandır video ile ilgili kötü bir ilişki olmuştur - hareketli grafik topluluğunun yıllardır dikkatle yaklaştığı bir şey. Hatırlamak için karmaşık bir siteniz varsa, ağ sağlayıcısı Servisin yerinde olması gerekiyor.

UI Tasarımına Profesyonel Rehberi

Geliştiriciler, JavaScript ile animasyonun çoğaltılmasında yoğun kaldırmayı yapmak için GreenSock ve Snap.SVG gibi kütüphanelere güvenmişlerdir. Bu araçlar çok fazla esneklik vermiş olsa da, kullanılabilecek animasyonun hassasiyet ve incelikle karşılaştırılamazlar. Etkilerden sonra cc kendi zaman çizelgesi ve grafikleri hafifletme. Bir web perspektifinden, etkilerden sonra, kodlamadan önce tweaking ve hareket etmeyi denemek için çok uygundur.

character with 'Ae' written on its belly — Bodymovin: Büyülü 'Web İçin Render' Özelliği Adobe Unuttum [Tüm Resimler: Hungry Sandvich Club]

Giriş Bodymovin , Adobe için çığır açan bir uzatma, animasyonu doğrudan Efektlerden Sonra Efektlerden Sonra Efektlerden Sonra Efektler, Tarayıcıda gösterilecek ve manipüle edilmelidir. Tarafından yaratıldı Hernan Torrisi , Bodymovin, animatör ve geliştirici arasındaki engellerin çoğunu ortadan kaldırır. Temel düzeyinde, eklenti, Sihirli 'Web İçin Render' Özellikleri Adobe Ungroot'u kullanır. En gelişmiş olarak, etkileşimli animasyon için yeni olanaklar açılır.

Bodymovin, bu yeni olasılıklardan bazılarını karşılamak için yükselen araçlar, eklenti ve sistemler zincirinde bir bağlantıdır. Airbnb'in Lottie ve Facebook'un ana kareleri Her ikisi de bu vakıflar üzerine inşa eder - sonunda en güçlü animasyon aracını web'e getiriyorlar.

Neden bodymovin kullanıyorsunuz?

SVG interneti devraldı ve her şeyin yüksek kalite, hafif hem de ölçeklenebilir olması beklentisi ile getirdi. Bodymovin, kompozisyonunuzdaki her şeyi, vektör kalitesini herhangi bir boyutta tutan güzelce net SVG'ye sunar. Daha fazla GIF'i aydınlatmak veya kullanıcılarınızı şişirilmiş video dosyalarını yüklemeye zorlamaz.

Animasyonlarınızı ihraç etme sürecini basitleştirmenin yanı sıra, BodyMovin, geliştiricilerin yeni etkileşimli deneyimler ile yaratıcı olmaları için daha fazla potansiyel açar. ETKİLEŞİMİN KULLANILMASI, ETKİLEŞİME KULLANILAN BAZI KODPEN YOLCULUKLARINA KONTROL ETMEK - ENTERACTICT IK RIGS'ten animasyonlu etkileşimli metinler.

Web dev işleminizi daha da kolaylaştırmak için Web Sitesi Oluşturucu .

Ae character and www. character — Her şey hem net hem de ışık bu web dostu bir SVG'ye verildi.

İhraç edilen animasyon, tarayıcıda başka bir eleman gibi manipüle edilebilir, animasyonu web tasarımında etkileşimli ve deneysel bir araç olarak düşünmemizi sağlar. Ve şimdi bodymovin yüzünden, animasyonlarınızı ağa getirmek hiç bu kadar kolay olmamıştı. Bu eğitimde, bir animasyondan sonra bir animasyonu nasıl ihraç edecek ve kullanıcının tıklamasına cevap veren basit bir döngü animasyonu oluşturacaksınız.

Effect Dosyalarınızı Nasıl Hazırlanır?

Effects özellikleri için destek büyük ölçüde gelişti ve hemen kutunun dışında oldukça iyi sonuçlar almayı bekleyebilirsiniz. Söylendiği söyleniyor, fantezi uçan 3d katmanlarınız güzel oynamayacak, bu yüzden başlamadan önce sınırların farkında olun. Bir projeye başlamadan önce, BodyMovin'in en son sürümünü indirin ve hangi özelliklerin şu anda desteklendiğini görmek için GitHub sayfasını kontrol edin.

Eğlence kısmına gitmek için çok aceleci olma ... Düzenli dosyalar düzenli bir zihin yapar. Bu durumda, ekstra çalışmanın bir kısmını tarayıcıdan uzaklaştırmaya ve ipeksi pürüzsüz oynatmaya yardımcı olacaklar. Öncelikle, içeriğinizin, tam vektör gücü için etkileri şekil katmanlarından sonra olduğundan emin olmak istersiniz. Herhangi bir Illustrator dosyasını şekil katmanlarını şekillendirmek için dönüştürmek için, vektör katmanından şekiller oluştur'u sağ tıklatıp seçin. Bu aşamada şekil olmayan herhangi bir katman daha sonra görüntülere dönüştürülür ve vektörler olarak oluşturulmayacaktır.

Sonra, katmanlarınız ve alt uzmanlarınızdan bir kontrol edin; Şekerin içeriğini hiçbir şeyden ödün vermeden basitleştirebileceğiniz iyi bir şans var. Grup sayısını, yollarını, yollarını ve doldurmayı sadece çıplak esaslara düşürmeyi deneyin.

Maskelerle iyi bak

Maskeler bu aşamada kaymanın kolay bir yoludur. Alpha maskelerinin SVG oluşturucu ile çalışacağının ancak tuvallere geçmeyi seçmemesi durumunda görünmeyeceğini unutmayın. Maskeler performansta pahalı olabilir, bu nedenle bunları verimli kullanın.

Render

Bodymovin, iki bölümde çalışır - animasyon verilerini bir JSON dosyasına ve bir bodymovin.js oyuncusuna, web sayfanıza bu dosyayı yorumlayabilen ve tarayıcıda oluşturabilen bir bodymovin.js oynatıcısına dönüştüren efektler uzantısı.

Dosyalarının gitmesi iyi olduğunu mu düşünüyorsun? Bodymovin uzantısını pencereden ve GT üzerinden açın; Uzantıları ve sonra bodymovin.

Yenile'ye çarptıktan sonra, efektlerden sonraki tüm kompozisyonların bir listesini göreceksiniz. Seçtiğiniz Comp seçin ve ardından Web projenizin içinde bir hedef klasör seçin. Mutlu olduğunuzda, sadece Render'i tıklatın ve büyünün gerçekleşmesini izleyin. Yapıldığında 'bitmiş' mesajı alacaksınız. Tebrikler! Az önce bir JSON dosyasını, oyuncunun animasyonu yeniden oluşturması gereken tüm bilgilerle ihraç ettiniz.

two characters — Katmanlarınızı kontrol edin - desteklenmeyen bir özellik veya sonraki etkilerde kullanılan bir ifade olabilir.

Yeni dışa aktarılan animasyonunuzu test etmek için Önizleme ve GT'ye tıklayın; Şu anki yaptırırlar ve zaman çizelgesinden çıkmayı unutmayın, çünkü ne beklediğinizden biraz farklı görünen bir şeyi belirleyebilirsiniz. Herhangi bir sorunu giderirseniz, geri atlayın ve katmanlarınızı kontrol edin - desteklenmeyen bir özellik veya etkilerden sonra kullanılan bir ifade olabilir.

Bazıları Rubberhose gibi efekt eklentileri şimdi bodymovin'i destekliyor. Rubberhose, kılavuz katmanlarını ve gizli katmanları kullanır. Bunları etkinleştirmek için, seçtiğiniz bileşimin yanındaki ayarlar COG'sına tıklayın ve ihtiyacınız olan özellikleri işaretleyin.

Her şey iyi görünüyorsa, arkasındaki etkilerden sonra ayrılmadan önce yapmanız gereken bir şey var. Bu aşamada animasyonunuzu açıklayan bir fresh data.json dosyasına sahip olmalısınız, ancak yorumlayacak BodyMovin Player yok. Uzantıda, sağ üstteki 'Müzikçayı Al' düğmesini tıklayın ve JSON dosyanızla kaydedin.

Animasyonu yükle

Şimdi ihtiyacınız olan her şeye sahipseniz, doğruca kodun içine atlayalım ve animasyonunuzu sayfada göstermeyi sağlamak için temel bilgileri yerleştirin.

İlk önce yeni bir konteyner yapın #Anim_Container Animasyonunuzu tutmak için. Ayrıca dahil etmeniz gerekiyor bodymovin.js Kapatma gövdesi etiketinden önce dosya. Sonra Bodymovin animasyonunuzla ilgili her şeyi söyle ve yeni konteynere yükle.

Setup üzerinden adım adım yürüyelim:

VAR konteyner = belge.getElementbyid ('anim_container'); // animasyonumuzu kur var animdata = { Konteyner: Konteyner, RENKER: 'SVG', AutoPlay: Doğru, Döngü: Doğru, Yol: 'Data.json' }; var anim = bodymovin.loadanimation (animdata);

Animasyon için tüm parametreleri tanımlamanız gerekir. Bodymovin'e animasyonun yüklenmesini istediğiniz kabı söyleyin ve ardından animasyonu SVG elemanları olarak oluşturmasını söyleyin. Daha sonra, animasyona, yüklendiği anda oynamasını ve bittiğinde başa dönmeyi istediğinizi söyleyin.

Yol özelliği, bodymovin oyuncusuna animasyon için JSON veri dosyasını nerede bulacağınızı söyler. Menşe kaynağı kaynak paylaşım politikası (CORS) nedeniyle, JSON dosyasına erişmek için kullanacağınız teknik yalnızca bir sunucu veya yerel sunucudaysanız çalışır. Yerel olarak çalışmak için, bu Data.json'u nesneyi bir değişkene atayan bir javascript dosyasına dönüştürebilirsiniz. Bu durumda, kurulumunuz şöyle görünebilir:

& lt; script src = "js / data.js" & gt; / script & gt;
& lt; script & gt;
var konteyner = belge.getElementbyid ('anim_container');
// animasyonumuzu kur
var animdata = {
Konteyner: Konteyner,
RENKER: 'SVG',
AutoPlay: Doğru,
Döngü: Doğru,
AnimationData: Veri
};
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt;

Sayfayı yenileyin ve animasyonunuz kabın içinde oynatılmalıdır. Dev araçlarınızla seçin ve animasyondaki her öğenin şimdi bulunduğunu göreceksiniz. & lt; g & gt; Etiketler ve gerçek zamanlı olarak dönüştürülüyor.

Harika görünüyor, değil mi? Artık tarayıcıda gösterilen güzel, net bir animasyona sahip olmalısınız (görmede sefil bir video etiketi olmadan ...). Animasyon her zaman kabına uyacak şekilde ölçeklendirir, bu yüzden devam et ve havaya uçurun!

Bodymovin, yükledikten sonra animasyonu kontrol etmek için çeşitli güçlü yöntemlere sahiptir. Gibi bir yöntemi aramak anim.pause () veya anim.setDirection () Oynatmayı farklı şekillerde manipüle etmenizi sağlayacaktır. Bazı örneklere bakalım:

anim.setDirection (-1) animasyonu tersine oynayacak
anim.pause () ve anim.play () animasyonu başlayacak ve durduracak
anim.Setspeed (0.5) Animasyonu yarım hızda oynayacak

Etkileşim ekle

Bu bir sonraki adımda, JavaScript ile animasyonlarınıza etkileşim eklemenin farklı yollarından birkaçını keşfedin. Bu örnekte, iki bölümden sonra bir sonraki efekt animasyonunu dışa aktarırız: BÖLÜM A ve BÖLÜM B. KESİM A KULLANIMLARI Bir ila 20 (üçgen pogo çubuğunu tutuyor) Bölüm B, 20 ila 40 arasındaki çerçeveleri kullanır (Üçgen yukarı ve aşağı atlıyor bir pogo çubuğunda).

Şimdi, bölüm A'yı bir döngüde oynatmak istiyorsunuz (yalnızca kullanıcı tıklamalarından sonra) Play ve döngü bölüm B. Animasyonları bu şekilde bölmek için PlaySEGMESS özelliğini kullanabilirsiniz. Bu yöntem iki argüman alacaktır - başlangıç ve bitiş değerleri ve bir ikinci Boolean - IsFrame ile bir dizi olacaktır. Bunu doğru ayarlamak, animasyona başlangıç ve bitiş değerlerini çerçeveler olarak okumasını söyler, oysa yanlış bu değerleri zaman olarak okumayı söyler.

 anim.pause ();
anim.playsegments ([0,20], true);

Bunun eklenmesi Bodymovin'e ilk çerçevede duraklatır ve 0 ila 20 kare arasındaki animasyonu oynatır. Animasyonunuzu bir ile kurarken Döngü: Doğru Özellik Bu, bir daha ve tekrar bölümünü oynamaya devam edecektir.

Tüm örneği ayarlayalım. Bu örnek için bir animasyonun iki bölümünü kullanacaksınız, böylece iki işlev oluşturacaksınız:

VAR konteyner = belge.getElementbyid ('anim_container'); // animasyonumuzu kur var animdata = { Konteyner: Konteyner, RENKER: 'SVG', AutoPlay: False, Döngü: Doğru, Yol: 'Data.json' }; var anim = bodymovin.loadanimation (animdata); // Animasyon yüklendiğinde Firstloop işlevimizi çalıştırın anim.addeventlistener ('Domounded', Firstloop); // Çalma işlevlerimizi oluşturun fonksiyon firstloop () { anim.playsegments ([0,20], true); }; fonksiyon secondloop () { anim.playsegments ([20,40], true); }; // bir tıklama olayını dinleyin konteyner.addeventlistener ('Tıkla', İşlev (olay) { anim.addeventListener ('LoopComplete', Secondloop); });

Gitme zamanı! Artık animasyonunuz, kullanıcı tıklatana kadar döngü sürecek, sonra ikinci döngüyü başlatır. Şimdi tek sorun şu ki, bunun gibi bir atlamanın çok ani olduğu ve animasyonun pürüzsüzlüğünü mahvedebilir.

İdeal bir durum, animasyona üçüncü bir bölüm eklemek, pogo sopasını tutmaya geçer. Şimdi yapınız böyle bir şeye bakacak:

firstloop - Çerçeve 0 ila 20
geçiş - Çerçeve 20 ila 30
secondloop - Çerçeve 30 ila 50

Animasyonunuzun, tıklanıncaya kadar ilk döngüde kalmasını istiyoruz. Bu noktada, halihazırda bulunduğunuz döngünün sonunu beklemek ve geçişe geçmek isteyeceksiniz. Geçiş yapıldıktan sonra ikinci döngününüze gidin. Bu karmaşık geliyor ama benimle kal! İşte kodunuz tam olarak:

VAR konteyner = belge.getElementbyid ('anim_container'); // animasyonumuzu kur var animdata = { Konteyner: Konteyner, RENKER: 'SVG', AutoPlay: Yanlış, Döngü: Doğru, Yol: 'Data.json' }; var anim = bodymovin.loadanimation (animdata); // Animasyon yüklendiğinde Firstloop işlevimizi çalıştırın anim.addeventlistener ('Domounded', Firstloop); // Çalma işlevlerimizi oluşturun fonksiyon firstloop () { anim.playsegments ([0,20], doğru); }; fonksiyon geçişi () { anim.playsegments ([20,30], doğru); anim.removeeventListener ('loopcomplete'); anim.addeventListener ('LoopComplete', Secondloop); }; fonksiyon secondloop () { anim.playsegments ([30,100], true); anim.removeeventListener ('loopcomplete'); }; // bir tıklama olayını dinleyin konteyner.addeventlistener ('Tıkla', İşlev (olay) { anim.addeventListener ('LoopComplete', Geçiş); });

Tıkla, kullanıyorsunuz loopcomplete Dinleğin son karesine ulaşana kadar beklemek için dinleyicisi, sonra çalıştırın geçiş() işlevi. Burada son dinleyiciyi kaldırır, bir sonraki kare setini oynatın ve ardından tekrar aynısını yapın. Geçiş bittikten sonra arayacak secondloop () .

Bu kadar!

Bugün Bodymovin'in özelliklerinden birkaçı ile çalıştınız, ancak eklenti hakkında daha fazla bilgi edinmekle ilgileniyorsanız, hakkında bir sürü bilgi bulabilirsiniz. Bodymovin github sayfa. Daha fazla örnek için, hiç etkileyici bodymovin codepen koleksiyonuna göz atın.

Umarım bu eğitim, web için bazı süper soğutma animasyonu üretmek için efektler ve bodymovin'in kullanımını birleştirebileceğiniz farklı yollar hakkında bir fikir vermiş olacak!

finished animation with triangles on pogo sticks — Animasyonun her bir parçası için ayrı bir bölüm

Artık web için dışa aktarılacak animasyon kurabilir, dışa aktarılan dosyalarınızı tarayıcıya getirin ve animasyonunuzu tıklayın. Daha önce kullandığınız MP4 dosyalarının ötesinde düşünün ve gelecekte çok daha zengin bir web deneyimini oluşturmak için bodymovin'e bakın.

Animatörleri geliştirme sürecinde yakından tutabilmek, giderek daha önemli hale geliyor ve web animasyonu alanı inanılmaz derecede hızlı hareket ediyor. Sürekli büyüyen yeni uzantıların koleksiyonu, eklentiler ve çerçeveler, animatörler ve geliştiriciler bu işlemin zaman içinde daha kolay ve daha iyi olmasını bekleyebilirler. Birincisi, geleceğin ne tutacağını görmek için sabırsızlanıyorum.

Yedeklemek için çok fazla dosya var mı? Kontrol et Bulut depolama alır.

Bu makale başlangıçta ortaya çıktı net dergisi 2017'de. Abone olun .

Daha fazla oku:

SVG çokgenler oluşturun ve canlandırın
14 Şaşırtıcı Adobe Etkileri eklentilerden sonra
Web animasyonları için storyboard oluşturun

Efektlerden Sonra İhracat Animasyonları HTML5'e

Neden bodymovin kullanıyorsunuz?

Effect Dosyalarınızı Nasıl Hazırlanır?

Maskelerle iyi bak

Render

Animasyonu yükle

Etkileşim ekle

Bu kadar!

Nasıl Yapılır - En Popüler Makaleler

Instagram'da repost nasıl

Shapr3d ile giderken Nasıl KIBBASH

Character sheets for 3D modellers: 15 top tips

Bir fil nasıl çizilir

Stilize oyun sanat eseri nasıl oluşturulur

3ds Max'te bir meteor duşu oluşturun

Tasarım ve içerik sprintlerini çalıştırmayı öğrenir

Dijital dokulardan daha fazla nasıl elde edilir

Kategoriler