TAMAM.
O halde burada başlayalım.
Ve bu video, Paperchase'i kurmaya ve bazı basit basit animasyonları yapmaya odaklanacak.
Ses yok henüz.
İlk önce belirttiğim şey, yarattığım yeni bir dizinde olduğum.
Ses dizinini buraya ekledim.
Bu yüzden mutlaka bu video için yapmanız gerekmediğinden emin olun, çünkü sesleri
çalmayacaksınız.
Ancak takip etmek isterseniz, bir dizin oluşturarak bu ses klasörünü içine sürüklediğinizden veya kopyaladığınızdan
emin olun.
Yapmanız gereken şey, dosyamı doğru dizine kaydetmek için bir dosya
yapacağım ve her seferinde daireler diyeceğim.
Şey benim h tim L. iskelet elbette bunun gibi ve biz şimdilik bunun üzerinde bırakacağız.
O halde açalım, gerçekten hiçbir şey görmemeliyiz.
Şimdi kağıt zekasına geçelim.
Yine bundan gerçekten çok hoşlanıyorum.
Ancak bundan uzaklaşacağız ve başlamak için indirmeye gideceğiz.
Ve yapacağımız ilk şey, daha önce yapmış olduğum en yeni sürümü indirmek.
Bu işi bitirdikten sonra, bunun gibi görünecektir.
Ve yapabileceğimiz ilk şey sadece examples dizinine bakmak.
Şimdi hareketli animasyon yıldızına bir göz atalım.
Bununla oynamak eğlencelidir beni baş döndürdü, böylece kapatacağım.
Ancak diğerlerinden de bazılarına göz atabilirsiniz.
Şeker kırma.
Yapabileceğiniz harika bir animasyon var.
Burada küçük bir fizik var.
Elimizde başka ne var.
Bu serin çizgi animasyon ve bir sürü diğerleri sizsiniz.
Farenizi hareket ettirdiğinizde bu tür bir paralaks efekti gerçekten seviyorum.
TAMAM.
Yani bunu yaparken saatlerce harcayabilirsiniz.
İsterseniz bunlardan herhangi birini açabileceğiniz harika örnekler var.
Nasıl çalıştığına bir göz atın.
Öyleyse o mekana, kağıt J.'yi eklediğimizi göreceğiniz ilk şey olarak bakalım. S. Elbette ki kütüphaneye ihtiyacımız olan dosyaya Jay Querrey'ye ihtiyaç duyuyoruz.
Ancak daha önce görmediğiniz bir şey var, bu
da, bir komut dosyası türünün, metin eğik çizgi kağıt komutuna eşit olduğuna işaret ediyor.
Yani belirli bir dosya türü
ya da yazdırabileceğimiz bir betik var, bu kağıt betiği, temelde kağıt çantası için özel olarak yapılmış bir dil olan alana özgü bir dildir.
Bu yüzden Paperchase dahil olmadıkça işe yarayacak bir şey değil.
Ve ayrıca, bu tuval özniteliği tuvalinin tuvalle eşit olduğunu görüyorsunuz.
Bu nedenle tuval ne yaşlı bir ilah unsuru olduğu tuhaf.
Yani aslında burada yaptığımız her şey var.
Bunu şimdi de incelemeni göstereceğim.
Bu çalışma sürümü veya son sürümüdür.
Nasıl çalıştığını göstermek için önce bir göz atarsam.
Yine de bir göz atarsam ve bu siyah zemini incelersem ceset değildir.
Kanvas adı verilen bir şeydir ve kanvas temelde animasyonlar
ve grafikler yapmak için bir yer görevi gören bir HMO öğesidir.
DN'ye gidersem tuval
için bir görünüm, Javascript'te bir betik olmak için grafikler çizmek için her sigara esrar elemanından beş yaş kokusunu eklediğini görebilir.
Bu gerçekten de öyle.
Tuvalde, javascript olmadan kendi başına bir şey yapmayan bir unsurdur.
Ama sonra gidip javascript'in dikdörtgen yapmak gibi şeyleri söylemek için eklediğimizde
burada yeşil bir 3B şekil yaparak bu animasyonu yapıyoruz ve hepsini Javascript ile yapıyoruz.
Yani kağıt J. S. Bir tuval unsuru kullanır.
Tüm grafiklerin tüm animasyonlarında eklediği sahne budur.
Dolayısıyla, bu alan örneğinde görebileceğiniz gibi sayfamızda bir tuval olması gerekir.
Vücuttaki en alt noktaya gidersem, buradaki bir tuval
budur ve tuvale eşit ID ve ayrıca arka plan da siyah olur.
Bu yüzden Id eşittir kanvas burada bu satıra karşılık gelir.
Tuval tuval ile aynı.
Bu yüzden, sadece bu
kağıt betiği dosyasını veya bu kağıt betik komut dosyasını, hangi tebliğ için bakacağını, örnekte sadece kanvas olarak adlandırdıklarını söylüyoruz.
Bu yüzden buna çok benzer bir şey yapacağız.
Ancak oraya gelmeden evet kağıt eklediğimizden emin olmamız gerekiyor.
Dolayısıyla indirmeye gittiğinizde.
Ve örnekler açmaktan ziyade, dizine eklenmiş halde görüneceğiz
ve sonra ya tam dolu kağıtları ya da erkeklerle dolu kağıtları seçip burada tam olarak anlıyoruz.
Bu yüzden dosyayı dizine kopyalayacağım,
böylece kağıt Dasch tam, ancak o zaman kendi uygulamanızda bunu eklemeyi unutmamamız gerekiyor.
Yani Source, kağıt gibi Dasch tam japlarla aynı ve kaydetmek.
Ve sonra yapacağımız, Chrome'da sayfayı yenilemek.
Bir hata yapmadığımızdan emin olun.
Harika.
Böylece dosyanın iyi olduğunu fark etti.
Şimdi, kağıt cennetinin dokümanlarına gidelim ve derslere bakalım, bu yüzden aslında bunu erken yapmadım.
Fakat JSA'nın hangi kağıttan aldığının açıklamasını okumak isterim.
Bu, benim beş tuvalime yaşın üstünde çalışan, açık kaynak kodlu bir vektör grafik betikleme çerçevesidir.
vektör grafikleri ve Bezier eğrileri ile düzgün bir şekilde tasarlanmış
tutarlı ve temiz bir programlama arabiriminde tamamlanmış ve oluşturulan güçlü işlevsellik sunar.
Temiz bir sahne çizelgesi eğik çizgi belge nesne modeli ve
Biraz dolandırıcı.
Temelde bir tekme eşek çizim kütüphane animasyon kütüphanesi grafik kütüphanesi.
Bu gerçekten çok popüler.
Dışarıda bir kaç
tane var, yani neredeyse bir DOM manipülasyon kitaplığı olduğu bir sorgu gibi değil.
Bir olay işleme kütüphanesi.
söyleyerek kendinden eminim.
Orada grafik şeyler bir sürü var ama kağıt en popüler olduğunu
Tamam, derslere geri dönelim ve başlamak için bir göz atalım.
Bence evet kağıtla çalışmaya başlıyoruz.
Evet.
Aşağı doğru ilerleyip buradaki örneklerine bir göz atalım.
Yapabileceğimiz şey, bütün bu şeyi kopyalamaktır.
Ancak, nasıl çalıştığını görmeniz için teker teker yapmak istiyorum.
Bu kanvasın kopyalanmasıyla başlayalım sadece tüm satırı kopyalayın ve bedenimize koyalım.
Yani tuval I. D. tuvalime eşittir ve sayfayı yenilersem hiç bir şey göremeyiz.
Orada bir tuval olduğunu göreceğimizi
düşünüyorsak, ancak geri dönersek, bu betik metnini veya türünü kopyalayalım çünkü metin boyutu kağıt betik tuvali tuvalimdir.
Ve onu buraya koyup yapıştıralım.
Burada neler olup bittiğine bakarsak, hoş bir
yorum var, çizgi çizmek için kağıt G-S yolu oluşturduğunu söylüyor.
Dolayısıyla bir yol oluşturuyoruz ve burada hiç görmediğiniz çok sayıda sözdizimi göreceksiniz.
Ve yine önemli nokta bu.
Mesele, sizi dokümanları okumak için yeni şeyler görmeye zorluyorum.
Seni bu hisse duyarlı hale getirebilir,
ne yaptığımı bilmiyorum, nasıl çalıştığını bilmeden önce bu kodu hiç görmedim.
Kütüphanenin noktası budur.
Özellikle animasyonlar gibi bir şey için nasıl çalıştığını bilmek zorunda değilsiniz.
Bir başkasının sizin yerinize baktığından memnun olun.
Ben kesinlikle hayatımı çok fazla kurtardım.
Dolayısıyla, onu bir değişkene kaydetmek için yeni bir yol oluşturduk.
İnme rengini siyah olarak değiştirip 100 virgül 100'de başlangıç ​​noktası oluşturduktan
sonra yolumuzu bu başlangıç ​​noktasına taşıdık ve daha sonra başlamak için bir çizgi çiziyoruz, artı 100 X ve negatif 50 y.
Bu yüzden sana tam olarak ne yapacağını göstereceğim, ancak 100 100'den başlayarak bir çizgi çiziyor ve
sonra bu satırı taşıyor veya ilk noktayı 300 virgül 50'ye bağlıyor.
Eğer bir göz atarsak, taze olursak, her şeyin çalıştığından emin olun.
Sonunda bir çizgiyle bitiyoruz.
Bunun gibi yeni bir şey yaşadığınızda yapılacak en iyi şey oyun etrafında oynamaktır.
Bu yüzden değiştirmeyi deneyin.
Yani kırmızı ve başlangıç ​​0 100.
İşte gidiyoruz sadece çizgimizi değiştirdik veya bunu 500 gibi daha sert bir şey olarak değiştirmek için izin verelim.
Böylece gün boyu bununla oynayabilirsiniz.
Ancak şunu gerçekten belirtmek isterim
ki, metin olmayan bir kağıt komut dosyası metni oluşturuyoruz, bu yüzden javascript kağıt betiği
ve bu tuval öznitelik tuvalini, tayin ettiğimiz ad veya kimlik olan tuvalime eşit olarak ayarlıyoruz.
Bu yüzden bunlar
eşleşmelidir ve bunun bütün noktası, sadece bu kağıt betik dosyasına şeylerin nereye çizileceğini söylemektir.
Hangi tuval kullanılacak.
Böylece biraz daha fazla oynayabiliriz.
Ve videoyu durdurmanızı
ve ders kitaplarına bir göz atmanızı öneririm. Başka şeyler deneyin.
Bu yüzden size yolu kullanacağım önceden tanımlanmış şekillere işaret edeceğim.
Buradaki başvurumuzla daireler yapacağız.
Bu yüzden yapmamız gereken şey bu.
yapmak için bir nokta vermek zorundasınız.
Bu kodu burada kopyalayalım, böylece Pat yeni yol yuvarlak daire ve sonra bir daire
Ve sonra yarıçapı benziyor.
Böylece bir açıklama olduğunu
görebilirsiniz; bu nedenle, x 100 y 70 merkez noktası ve 50 yarıçapı ve ardından bir dolgu rengi gerekir.
Bu yüzden bir göz atalım bunu kodumuzun altına kopyalayıp ne olacağını görün.
J S ve benzeri kütüphanelerle çok şey yaptınız.
Sadece deney yap.
Böylece yarıçapı 10 olacak şekilde değiştirelim.
Işte gidiyorsun
Bu yüzden, başka bir satıra kopyalamayı başka bir satıra kopyalayarak da deneyebiliriz.
Diyelim ki var omurga 2 eşittir yeni yoldaki nokta.
Ve bu işi gerçekten büyük ve mor yapalım.
Yeni bir nokta ve 50'ye koyalım.
50 yaşına gel ve çok büyük olacak.
Bu yüzden ona 300 yarıçapı verdikten sonra, mor renge eşit doldurmak için daire doldurulur.
Tıpkı bu tazeleme gibi.
Ve biz, aslında tuvalimiz ekranın tüm genişliğini kaplamamış
olduğundan aslında ne kadar büyük olduğunu söyleyemediğiniz devasa çemberle karşılaştığımızı görebilirsiniz.
O halde bir sonraki yapalım, çünkü tuvalimiz tüm genişliği almasını istiyoruz.
Dolayısıyla ben gidip yeni bir stil sayfası yapacağım, böylece
bağlantı etiketini ekledim. Tref, var olmayan bir dairenin nokta SS'sine eşit.
Ve sonra
Circle Stut adlı bir dosyayı kaydedelim, değerlendirelim ve ne yapacağız yüzde 100 ile tuvale ekleyelim.
Ve ayrıca, siyahın arka planını da verelim.
Ve eğer biz tazeysak, yakın olduğumuzu görebilirsin ama bir kaç şeye sahibiz.
Birincisi, vücudumuzun aslında her yere gitmemesi.
Böylece tuval genişliğin yüzde 100'ünü alır.
Fakat şu an yüzde 100'lük bir yüksekliğe sahip
olsak bile, aslında istediğimiz yolu değiştiremeyecek.
O halde kurtulmak istediğimiz bu marjımız da var.
Bunun yerine çok fazla zaman geçirmeden, sana ne yapmamız gerektiğini göstereceğim.
Sadece yüksekliği yüzde 100 ve kenar boşluğu sıfır olarak ayarlayın.
Ve şimdi sayfayı yenileyebilirim, tam ekranı kaplıyor.
Dolayısıyla, daha detaylı bilgi almak ve neden bu kodu eklemeden
önce cesedi inceledikten sonra tam olarak neden anladığınızı anlamak isterseniz, cesedi yeniden inceleyin ve ne olacağını göreceksiniz.
Temelde sadece vücudun tüm genişliği ve yüksekliği kapladığından emin oluyoruz ve kenar
boşluğumuz yok, bu nedenle tuvalimiz o zaman tüm alanı kaplayacak şekilde genişleyecektir.
TAMAM.
Dolayısıyla bir tuval yaratmıştık, şimdi bu videoda yapacağımız en son şey budur.
Sadece evrakların kağıt betik komut dosyalarımıza nasıl sahip olduğunu size tanıtmak istedim.
Ona bir tuval veriyoruz ve daha önce hiç görmediğiniz bazı kodları buraya koyduk.
Bu videoyu oluşturana kadar veya bu video için bu projeyi yapana kadar daha önce hiç görmediğim çok şey var.
Daha önce de görmüştüm.
Bu tam video.
Ama asıl konu yeni.
İşte bu yüzden bunu yapıyoruz.
Kod redoksunu alıp temel olarak kopyalayıp değiştirmek için gerçekten önemli bir yetenektir.
Harika.
Bir sonraki videoda
sana hızlı bir isteğe bağlı egzersiz yapacağım, böylece sadece projeye ulaşmak ve ne dersen istersen öğrenme deneyimini atlamak istiyorsan.
Ancak, yalnızca ödeyecekseniz bir sonraki videoyu atlayın.
Bunu yapmanızı tavsiye ederim.
En etkileyici şey
yapmayacağız, ancak bazı çevrelerle bir egzersiz yapacağım.
Çok heyecan verici.
Biliyorum.
TAMAM.
Görüşürüz o zaman.