3 Kasım 2014, PAZARTESİ

Sprite Sayfası Animasyon Adımları Css Zıplayan Top Eğitimi Programı

Eğer biz son zamanlarda birçok istek alıyorum oldum yapmalıyım nasıl merhaba herkes sprite sac programlama öğreticiler Ben sprite programlama gelişmiş kavramları gösteremez ise ustalık kitabı Ben kitaptan bazı ücretsiz temel önizleme malzemesi gösterebilen Burada bu egzersiz videoda temel CSS ortaya koyacak işler sprite sac animasyon dizisi Bir zıplayan top biz içine girmeden önce bitiş ürünü bir göz atalım Eğer biz bir programlama eğer öyleyse sıçrayan basketbol var görebilirsiniz Biz web üzerinde gidiyoruz video oyunu Böyle bir çeşit kod kullanmak isteyebilirsiniz: var istedim Bir ba

sketbol maçı ayrıca sprite sayfasını kendisi göstermek bana izin CC bu yıl bu animasyonu kılan sprite levhasıdır Biz raporuna tane var Bu sprite sayfasında 6 kare ve her çerçeve 50 piksel 50 piksel Size Sizin 6 diğe

r düşünebiliriz eğer Bu sprite sac içinde kareler her biri aynı zamanda 50 ile 50 Pics olurdu Her beyin 50 piksel elli şimdi koşucular giymek için yeterince bas tüm bu çerçeveler aracılığıyla çalıştırmak yap

“Ders Kodu: http://www.developphp.com/video/CSS/Sprite-keyframes-Animation-Bouncing-Ball-Tutorial CSSkeyframes ve animasyon özelliğini kullanarak teçhizat bir top ...”
Adam Khoury

mak zorunda pürüzsüz bir animasyon ve biz bu yüzden bir örnekle içine gidelim istediğiniz herhangi bir hızda oynamak yapabilirsiniz HTML dosyası ve olacak bu dave yaptığı ile başlayalım let bizim topu temsil bu yüzden topun eşit kimliği verdi ve o yerde bir stil öğesini koyalım şimdi HTML için var Yukarıda şimdi stil öğesi içinde en önde gidip topu hedef izin onun kimliği ile şimdi arasında bizim stil kuralı koyabilirsiniz ilk şey yapacak günlük olarak bunu

Sprite Sayfası Animasyon Adımları Css Zıplayan Top Eğitimi Programı Resim 1 Sprite Sayfası Animasyon Adımları Css Zıplayan Top Eğitimi Programı Resim 2 Sprite Sayfası Animasyon Adımları Css Zıplayan Top Eğitimi Programı Resim 3 Sprite Sayfası Animasyon Adımları Css Zıplayan Top Eğitimi Programı Resim 4

bir arka plan özelliği vermek URL ImagePath yüzden benim görüntü var benim topum ben PNG sekti sprite sac bu göreli görüntüleri klasör değil örnek nokta HTML biraz burada tekrar o bu görüntüyü görmek istiyorum Ben sadece arka plan görüntüsü olarak bu sprite sayfasını kullanarak şimdi ben ve yükseklik topu olabilmesi için söz konusu istiyorum O bütün sprite sac I görünmüyor yolu 50 piksel 50 piksel Sadece göstermek istedim tek kadran ya da bir bölümü bir kare Varsayılan olarak% uh işte doğru o şimdi olsun sonuç var herhang

i bir tarayıcıda bu bakarsanız sadece ilk kare% uh sprite sac ama sprite sayfaları için kullanılabilir bulunuyor Onlar yok birçok şey bir animasyon için bir sprite kullanılacak o sadece can tutmak Web uygulamaları için tüm grafik İhtiyacımız yazılım veya web sitesi artık bir sonraki şey ve animasyon CSS ayarı Bu hat ne yaptığınızı için biz topu sıçrama aradığınız olduğunu animasyon bu top elemanı çalıştırmak için bu yüzden önemli bir kare animasyon olarak adlandırılan topu sıçrama koymak zorunda ve sadece daha yapacak İkinci fakat animasyon hız olacak points7 saniye ya da daha süresi Bu Speedie ise edecek daha hızlı gitmek istiyorum sadece düşünmek 0,7 saniye Eğer bu sayı daha yüksek hale bu yavaş gitmek istediğiniz düşük bir sayı yapmak Şimdi adımlar kaç doğrudan göredir çerçeveleri bizim animasyon içindedir ve açıkça biz 12 olduğunu görebilirsiniz Hasta burkulma tarafından rapor ve bir sprite sac animasyon dizisi Şimdi bu anahtar kare burada ilk karedir 1 ve bunlar bu animasyonu makyaj arasındaki tüm geçiş kareleri vardır Böylece biz sadece birkaç adım bir anahtar kare animasyon kadar batacak konum Onlar adımları koymak neden altı çerçeveleri 6 ve biz bir kez daha oynamak istedim sonsuz döngü istiyorum bu yüzden on kez oynamak istiyorsanız sonsuz oraya koymak Sadece on kat çıkma ya da animasyon sırasının 10 kez oynayabilir ve koyun Orada on ama sadece sonsuza oynamak pooping tutmak istedi Şimdi ihtiyacımız olan en son şey basit küçük top sıçrama olduğunu anahtar kareler animasyon işte tamam kurmak elimizde bunun için boş bir kabuk var Anahtar kare animasyon bu eleman topu demektir yani bir top sıçrama isim o isimde bu animasyon ayarını kullanarak beri bir top sekti Bu top oynayacağız, bu anahtar kare animasyonlar bağlıdır Bu anahtar kare animasyon şimdi ayarlayabileceğiniz ve iki çerçeve tutmak zorunda bir animasyon 8 yapmak Bir çanta çerçevesi ve son kare ve ne bir sprite sayfası yapmak için ne çok hızlı bir şekilde oynadı biz geçmesi olduğunu background-position: so ayarını en o background-konumunu ayarlamak atalım: Ben ilk karede başlamak istedim çünkü olacak 0 piksel koyuyorum Bu sprite sayfasında ilk görüntü ve ben sadece bu satırı kopyalayıp koyabilirsiniz iki ve yapacağız negatif 300 piksel gideceksin ve tutmak çerçevesi kadar bu irade kız ve geçiş çerçeveleri oynayacak olmasına rağmen sırayla size ikinci ilk karesini ayarı konum otomatik böylece hangi anahtar kare 1 ve ardından anahtar karedir son kareyi hedefleyen ve tüm spor geçiş beyinleri arasındaki oynayacakları otomatik şimdi en önde gidelim ve Firefox'ta bu önizleme bu yüzden biz bir zıplayan topu var görebilirsiniz oldu önizleme bu ve Internet Explorer güzel zıplatma top animasyon ve en çok çalmıyor ki Google Chrome'da bu önizleme izin Google chrome sahip oldukları diğer tarayıcılar ile henüz hızlandırmak için değil, çünkü oldu Bütün bu şeyler için çok hepinizi standart I sözdizimi kendi öneki kaldırmak lazım yapmak burada gitmek bu satırı kopya olduğunu ancak animasyon çizgi üstü diğeri sağ ve sonra vardı şimdi WebKit koymak WebKit öneki ile animasyon özellik Bu WebKit tarayıcılarda çalışması için bu yüzden sadece bir web bedava resimler olsun koymak zorunda Anahtar kare animasyon üzerinde Burada ıslak Kate koymak, bu yüzden de kural animasyon için ekstra bir satır ve sonra WebKit öneki üzerindeki ekstra tuş çerçeveleri animasyon koymak o o zaman şimdi tüm modern çalışır Google Chrome'da bu test edebilirsiniz tarayıcılar ve biz hala WebKit öneki kullanmak zorunda popo bir ağrı türüdür ama o çok yakında umarım Google Chrome uzağa gitmek Geliştirme ekibi hemen o olsun ve tüm bunların önek kaldırır Bütün bu css animasyon şeyler Diğer tüm tarayıcılar bir süre önce var çünkü bu yüzden kendi web de siz her şeyi önek olsun izin vereceğim Seni çok yakında bile ihtiyaç olmayacaktır çünkü kaldırmak ve bu kod örneği sayfada var ve bu PNG dosyaları boyutlarını 50 piksel yüksekliğinde ve 300 piksel genişliğinde thats olacak o burada var 6 çerçeve 50 piksel her kurmak ve ben de bu kazık mevcut kazanacağız ediyorum Eğer video doğru dışarı bu grafikleri kopyalamak için zor olabilir çünkü yapılabilir ama grafikleri kopyalamak için zor olabilir doğru dışarı video ama Adam Khoury de kullanılabilir yapacağız nokta com Ben uh açıklama% olarak siz aslında gidebilirsiniz videoyu bir bağlantı koyacağım ve Bu dosyayı almak ve sonra sadece iktidara videodan kodu kullanın Bu sprite sac yüzden oraya kaydetmek Mb noktası yedi iki nokta bu almak Bu şey CC sekerek ne kadar hızlı izlemek için Sizinle yapamaz şey Animasyonlu bu sprite kılan alır çok daha özel aslında pek çok yönden onları programlayabilirsiniz, çünkü şeyler yapmak ve dinamik yapamaz için animasyonlu alır ve bazı insanlar istiyorum gözardı sprite ve sadece animasyonlu kullanın hediyeler ama onlar tüm dünyayı dinamiklerini göz ardı ediyoruz Bana video oyun grafikleri için. video oyun grafikleri herhangi bir şey Çar web sitesi deri yüzme için tüm yol ve bütün bu iyi şeyler oldukça serin sprite sayfaları ile gerçekleştirilebilir ve daha tartışıyor olacağız bu konuda Ben bütün gelişmiş bilgi koyamazsınız ustalık ebook programlama sprite ama tüm ücretsiz önizleme malzemesi gösterebilir ben yapacağım budur Sadece elektronik tablo programı E biraz ilgi oluşturmak için.

Açıklama

Ders Kodu: http://www.developphp.com/video/CSS/Sprite-keyframes-Animation-Bouncing-Ball-Tutorial CSSkeyframes ve animasyon özelliğini kullanarak teçhizat bir top zıplatma sprite sac animasyon öğrenin. Sprite Levhalarının png Görüntü Dosyası https://www.adamkhoury.com/demo/sprite_sheets/ball_bounce.png Sprite Programlama ustalık - eBook Malzeme https://www.adamkhoury.com/ebook/Sprite-Programming-Mastery

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.8/10

  • 116
    Olumlu
  • 2
    Olumsuz
  • 24
    Yorum
  • 7967
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • DJAndrewRyan

    DJAndrewRyan

    22 Ocak 2007
  • Harvest: Greg Laurie

    Harvest: Gre

    6 HAZİRAN 2006
  • Ryan Billy

    Ryan Billy

    30 EKİM 2006

ANKET



Bu sayfa işinize yaradı mı?