4 Kasım 2014, Salı

Karakter Yürüyüş Döngüsü @keyframes Sprite Animasyon Css Eğitimi

Bu egzersizi her hell yeah biz teçhizat kadar yürüyüş döngüsü animasyon gidiyoruz Binlerce sprite sayfaları var ve sizin için uyanma başlayabilirsiniz yönlendirebilir uygulama amaçlı ve kendi gelecek elektronik tablo tasarımları için ilham kazanmak için İlk elimizdeki bitiş ürünü bir göz atalım Doğu ve altında yürüyen bir karakter sprite sac ve yapabilirsiniz Ya elektronik tablo 12 3 45 67 vardır 8 kare yüzden üzerinde sekiz kare adım gidiyoruz çok benzer bir kod kullanmak için bu animasyon üzerine üretmek için bu yüzden seken topu oluşturmak için kullanılan kod yüzden şimdi diyelim hede

f olduğunu CSS ile yaptığımız Beni arka plan koyacaktır o özellikleri vererek başlamak Biz she rağmen kullanmak istediğiniz Imagepath için URL Bu Adam PNG o sprite sac ile olduğunu Ben gonna yürüme döngüsü için

sekiz kare bu dosyayı kullanılabilir hale Size çevrimiçi sen adamlar yapmak test amaçlı yakala edebilirsiniz % uh bu fiyat levha ile 960 piksel her hücrenin 120 piksel genişliğinde olduğu anlamına gelir ya

“Ders Kodu: http://www.developphp.com/video/CSS/Character-Walk-Cycle-keyframes-Sprite-Animation-Tutorial Teçhizat CSSkeyframes kural ve animasyon özelliğini kullan...”
Adam Khoury

da her bir kare 120 piksel genişliğinde ve yükseklik üzgünüm ama 180 120 ile ve yükseklik tek biz herhangi bir tarayıcıda bu bakmak seksen şüphe biz ilk kareyi bakın ancak şimdi biz eklemek yapmak zorunda önemli bir kare animasyon olarak adlandırılan yürüyüş yönlendirir animasyon özelliği Doğu oynamak ve ben Ames animasyon tutmak bir saniyelik süre ayarlanmış olacak: böylece sizi olmak istediğiniz hız var hızlı bu sayı gider Eğer yavaş olmak istiyorum düşür

Karakter Yürüyüş Döngüsü @keyframes Sprite Animasyon Css Eğitimi Resim 1 Karakter Yürüyüş Döngüsü @keyframes Sprite Animasyon Css Eğitimi Resim 2 Karakter Yürüyüş Döngüsü @keyframes Sprite Animasyon Css Eğitimi Resim 3 Karakter Yürüyüş Döngüsü @keyframes Sprite Animasyon Css Eğitimi Resim 4

mek Bu sayı sadece hız yürüme size yüksek olmalıdır çerçeveleri atarsınız ve adım Bu animasyon dizisi vardır bizim sprite sac dizisi beri 8 çerçeveleri biz adımlarla 8 koymak zorunda ve biz döngü için Yarımadası'nda koymak ve bu da biz sıçrayan topu hepimiz için yaptığımız gibi şimdi bir numara olabilir Gerek yürüyüş Background-pozisyonu ayarlanır olacak Doğu anahtar kareler animasyon: bu şekilde bu sprite sac için uygun kareleri gösteriyor sırayla bu yüzden anahtar kare animasyon var denilen Doğu yürüdü ve sıfır pikse

l arka plan pozisyon alır Negatif 960 piksel ve birileri neden burada olumsuz ne koymak dün sordu ve sadece normal 960 ve benim çerçeveleri çalıştırmak böylece negatif yıllar koymak Benim sprite sayfasında ortaya koydu olan aynı yolu İleri ben counterintuitive gelebilir demek ama bu animasyon dizisini yapar doğru okumak gibi sol çalıştırmak ve numaralandırma bu kendiniz test edebilirsiniz tüm tüm hücreleri tüm çerçeveler sadece onlara küçük numara koymak ve bunu ileriye sırayla bu şekilde çalışır görürsünüz onların da kare negatif alırsak geriye çalışacak Eğer olabilirsiniz senin sprite sayfasını kurmak farklı şekillerde bir sürü gerçekten Sadece tasarım kötüye ama o geriye ortaya koydu olabilir ve daha sonra uzaktan bu olumsuz orada olabilir ama benim çerçeveleri mantıksal sırayla ortaya koydu istedi ileri AAA tablomda tamam şimdi Şimdi bu önizleme edelim Elimizdeki ve internet explorer Firefox karakter yürüyüş döngüsü çalışan önizleme bu Google Chrome ve herhangi bir WebKit tabanlı tarayıcı çalışan sen koymak zorunda olduğunu WebKit animasyon çizgi üzerinde önceden sabitlenmiş ve diğer tüm tarayıcılar için bir satır ekleyin ben Firefox ve Internet Explorer gibi Syntex standardı saygı Google Chrome'a ​​bu fazladan bir satır eklemek zorunda ve ayrıca var katma Bütün diğer ekstra anahtar kareler kuralı bu kadar iyi üzerinde WebKit öneki Burada parlak böyle benim soğuk olsaydı ve ben ama onlar kaldır olduğunuzu bu tüm iş duymak olduğunu tüm tarayıcılar krom dosya önizleme gitmek nah Şimdi krom çalışan animasyon var Yeni dosya önizleme Internet Explorer'da hala Internet Explorer'da çalışır Internet çünkü Kâşif Ben ana kareler için sözdizimi standart saygı olduğunu ve animasyon güneş WebKit öneki kaldırmak Siz herhangi bir eski tarayıcılar için kendi X bu insanları ekleyebileceğinizi sen hem de desteklemek istiyorsanız tamam burada yazabilirsiniz Google'a gidin ev ödevi var Daha sonra döngü sprite sayfasını yürümek ve iyi yapabilirsiniz şimdi görüntüleri vurmak sprite sayfaları ödünç bunları indirebilirsiniz ve sadece pratik amaçlar için programda bunları kullanmak ve kurulum için nasıl ilham kazanmak için ve kendi tablonuzu tasarım ve anlamada üretilen video oyun tasarımı ve tamam tüm bu şeyler hakkında Böylece tüm bu kontrol edebilir ve söz konusu fark edeceksiniz bazı sprite sayfaları Eğer bir şey yazarsanız burada birkaç sprite sac Gölü kuş sana sahip olacağım yapmanız gereken tek şey içinde çırparak kuş kanatlı tabloları Bu kadar kulesi ama teçhizat yukarı olanlar çerçeveleri ve bir animasyon kuşu gerekecek ya da yapabilirsiniz Böyle video oyunları ve şeyler için oluşturulan nasıl animasyonlu kuş bakın hatta Google Doodle için Google en Google Doodle animasyonları görmek ana Sayfa O bir sürü sprite iştir ki video oyun sprite sayfasında yazın ve sen animasyon dizileri her türlü sahip olduğunu görürsünüz büyük bir resim dosyası ve bu geleneksel var olan Doğru, o hemen hemen yapabilirsiniz için kullanmak ancak tüm video oyun grafikleri üzerinde birine sprite sac böylece Google resim arama gitmek ve kelime önce bir şey koymak insanlar savaşçı gibi sprite sac Eğer savaşçı sprite sayfaları alırsınız Böyle savaşçıları ve şeyler ben aynı olduğumu biliyorum Adam Khoury giderseniz hemen nokta com ve sonra sprite programlama ustalık ebook görürsünüz e-kitap vurdu Şimdi bile bazı diğer önizleme bilgi almak için kitap satın almak zorunda değilsiniz Sadece yük ve aşağı kaydırmak için önizleme PDF bekleyin Önizleme bilgi Özetle görürsünüz ve dinamik animasyon tanıtım tıklayın ve gerçekleştirmek mümkün olacak Howell video oyun yaratıcıları bir yaptıklarını tüm işi Eğer tanıtmak istersen yapacaksın hiçbir javascript var çünkü ben senin sprite programlama içine dinamikleri doğrudan kontrol edebilirsiniz hiçbir şekilde iş akışı dinamik tüm sprite sac animasyon dizileri Örneğin sprite ile artık bu e-tablo bakmak Programlama ustalık kitap böyle bir sprite sayfası var nasıl yapmanız gerektiğini gösteriyor tek Bütün bu küçük karelerde biri olan görüntü dosyası karakter, sadece ayakta olan bir kare olabilir ileriye bakmak ve kullanıcı, belirli bir tuşa bastığında ya da belli bir düğmeye vurur, sonra ne zaman Daha sonra karakter Doğu yürümeye başlayabilir ve o farklı bir düğme vardı ve karakter batı ve bunun gibi diğer şeyler her türlü yürümeye başlayabilirsiniz Tüm% uh görünümü grafik önceden yüklenmiş olduğunda yazılım ilk yüklendiğinde ve herhangi bir bu animasyon dizileri yönlendirebilirsiniz Büyük hırs tarzı sprite yaprak Ben küçük tartışma bir delik gördüm yaklaşık sprite sac arma yardımcı olduğunu kanıtlamıştır ve bazı hatta ilham biraz kazma başlatmak için sizi seviyorum içine daha derin Eğer bir lotta ilham alabilirsiniz hatırlıyorum Google resim arama üzerinde bulunan bu hazır sprite sayfaları Sadece yeni bir yazılım bunları kullanamazsınız hatırlıyorum ama sizin için bunları kullanabilirsiniz uygulama ve ilham.

Açıklama

Ders Kodu: http://www.developphp.com/video/CSS/Character-Walk-Cycle-keyframes-Sprite-Animation-Tutorial Teçhizat CSSkeyframes kural ve animasyon özelliğini kullanarak bir sprite sacdan bir karakter yürüyüş döngüsü animasyonu öğrenin. Sprite Levhalarının png Görüntü Dosyası https://www.adamkhoury.com/demo/sprite_sheets/adam.png

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.7/10

  • 160
    Olumlu
  • 4
    Olumsuz
  • 28
    Yorum
  • 13801
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Good Creative Academy

    Good Creativ

    19 Kasım 2009
  • J Medema

    J Medema

    11 EKİM 2006
  • UKF

    UKF

    2 Aralık 2009

ANKET



Bu sayfa işinize yaradı mı?