Slick web animations -- Polycasts #23YouTube↗  IA↗(long shot)
Science & Technology  37.9K views 404 likes 7 dislikes   12 Aug 2015
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
مرحباً جميعاً. ما الأخبار؟
Herkese merhaba. Nasıl gidiyor? Ben Rob Dodson.
أنا روب دودسون. وأهلاً مجدداً لـPolycast.
Polycast'e tekrar hoş geldiniz.
مؤخراً، قام البعض منكم بوضع تعليقات
Yakınlarda bazılarınız <i> neon-animation</i> elementleri ile
والسؤال حول إمكانية صنع حلقة عن عناصر neon المتحركة.
ilgili bir bölüm yapabilir miyim şeklinde yorum bıraktı.
الآن، بما أننا قد صنعنا حلقة عن السلوكيّات مسبقاً،
Daha önce davranışlarla ilgili bir bölüm yaptıysak da,
أظن أن هذا وقتٌ رائع للغوص بأمور التحريك.
şimdi animasyon konularına bakmak için harika bir zaman olduğunu düşünüyorum.
فأهلاً بك في ولنبدأ العمل.
O zaman tablet şehrine gelin ve işe girişelim.
إذاً، ماهي neon-animations، وماهي هذه الأشياء حقاً؟
<i>Neon-animations</i> tam olarak nedir?
تحريكات neon هي مجموعة من العناصر والسلوكيّات، التي تتيح لك استخدام تحريكات الويب.
Neon-animations web animasyonlarını kullanmanızı sağlayan davranış ve element koleksiyonudur.
وإن لم تكن سمعت عن تحريكات الويب من قبل،
Daha önce web animasyonlarını duymadıysanız,
هي عبارة عن مجموعة جديدة من المعايير،
Temelde CSS ve JavaScript animasyonlarını
والتي توحّد التحريكات لكل من CSS و JavaScript .
birleştiren yeni bir set standarttır.
لذا يمكنك كتابة التحريكات باستخدام JavaScript ،
Animasyonunuzu JavaScript'te yazabilir
وعمل شيء رائع وبرمجيّ،
ve gerçekten programatik ve harika bir şeyler yapabilir,
ومن ثم تشغيله على GPU كتحريك من نوع CSS.
ama CSS animasyonu gibi CSS'de çalıştırabilirsiniz.
يمكنك هذا من تحويل استمارة تسجيل الدخول المملة نوعاً ما،
Bu sizin sıkıcı kayıt formlarınızı ve benzerlerini bu çılgın,
إلى هذا الشيء الوثّاب الرائع.
harika, canlı şeylere dönüştürmenizi sağlar.
وأعلم أنها مبالغ بها بعض الشيء،
Bunun bir fazla olduğunun farkındayım, ama her neyse.
لكن المهم أن تكون قد وصلتك الفكرة.
Siz anladınız.
لذا ماسنقوم بفعله اليوم،
Bugün yapacağımız şey,
هو التركيز على السلوكيّات في مجموعة تحريك neon.
<i>neon-animations</i> setindeki davranışlara odaklanmak.
ومن ثم في حلقةٍ لاحقة،
Ve sonraki bölümde ise, peşini bırakmayıp
سأقوم بالمتابعة واستكمال العناصر، مثل صفحات المتحركة ب neon.
neon-animasyonlu sayfalar gibi elementleri işleyeceğim.
إن لم تكن متأكداً من ماهية السلوكيّات،
Eğer davranışların ne olduğundan emin değilseniz,
عليك تفقّد هذا الفيديو هنا،
buradaki videolara göz atıp
وتعلّم السلوكيّات حتى تعرف كيفية عملها.
davranışları öğrenebilirsiniz, böylece nasıl işlediklerini öğrenmiş olursunuz.
وما أن تشاهد هذا، عد إلى هنا،
Ve bunu görünce,
وتفقّد هذا الفيديو.
gelip bu videoya bakın.
إذاً السلوكيات التي سنعمل عليها اليوم هي سلوك neon-animatiable
Bugün üzerinde çalışacağımız davranışlar, <i>neon-animatable-behavior</i> ile
وسلوك neon-animation-runner.
<i>neon-animation-runner-behavior</i>.
إذاً لدينا سلوك neon-animatable،
<i>neon-animatable-behavior</i>
وما سيقوم به هو السماح لك بإضافة تحريكات لعنصرك.
elementlerinize animasyonlar eklemenizi sağlar.
لذا يمكنك إضافة تحريك التلاشي،
Böylece <i>fade-in</i> animasyon veya <i>scale-up</i> animasyon
أو تحريك التكبير، أو العديد من الأشياء الرئعة هنا.
gibi pek çok harika şeyi ekleyebilirsiniz.
ولكنه لايسمح لك بتشغيل هذه الحركات حقاً.
Ancak bunun yapmadığı şeyse aslında bu animasyonları
حيث أنه لايوجد تشغيل متضمن في هذا الشيء.
oynatmaya izin vermemek. Buna yerleşik bir geri oynatım yok.
لذا من أجل دعم التشغيل،
Yani geri oynatım desteği için ihtiyacınız olan şey
يلزمك حينها سلوك neon-animation-runner.
<i>neon-animation-runner-behavior</i>.
وهذا مايسمح لنا بالتشغيل.
İşte o bize geri oynatımı verir.
الآن، ماهو رائع حقاً بسلوك neon-animation-runner،
<i>neon-animation-runner-behavior</i>
هو أنه ينفّذ سلوك animatable أيضاً.
ile ilgili gerçekten harika olan şey, <i>animatable-behavior</i>'u aslında uygular.
لذا من أجل العناصر التي سنقوم ببنائها اليوم،
Bugün oluşturmaya başlayacağımız elementler için
سنحتاج فقط للعمل مع سلوك neon-animation-runner،
tek çalışmamız gereken davranışlar
وهذا رائع حقاً.
<i>neon-animation-runner</i>, ki bu harika.
قد تتسائل، لماذا هذا السلوك موجود في الأصل؟
Şimdi bu davranışın neden var olduğunu sorabilirsiniz?
حسناً، سيصبح neon-animatable أكثر أهمية،
Bir sonraki bölümde animasyonlu sayfalar elementine
عندما ننظر إلى عنصر الصفحات المتحركة في الحلقة القادمة.
gidip baktığımızda <i>neon-animatable</i> daha önemli hâle gelecek.
لكن اليوم، سنعمل فقط على neon-animation-runner.
Ama bugün sadece <i>neon-animation-runner</i> üstüne çalışacağız.
وماسنقوم ببنائه اليوم، هو نوع من نافذة منبثقة أو استمارة تسجيل.
Oluşturacağımız şey açılan bu küçük kayıt formu.
يمكنك ملاحظة أنني أضغط على زر الفتح، وهذا يتحرّك.
Burada gördüğünüz gibi Aç düğmesine tıklıyorum, harekete geçiyor.
أضغط على زر الإغلاق، وتتلاشى.
Kapa düğmesine tıklıyorum, kayboluyor.
الآن، أنا أدرك وجود عنصر ورقة حوار.
Bir kâğıt diyalog elementinin olduğunun farkındayım.
إن كنت تبني استمارة تسجيل، يجب ١٠٠٪ حتماً أن تستخدم هذا العنصر.
Eğer bir kayıt formu oluşturuyorsanız, kesinlikle %100 kâğıt diyalog elementi kullanın.
أنا أنشأت عنصري الخاص كأداة تعليمية فحسب.
Kendiminkini öğretmeye yardımcı olması için yarattım,
لأنه سيقوم بمساعدتنا حقاً على تمثيل العديد من الأفكار
çünkü <i>neon-animation</i> set'i içinde bir sürü
في مجموعة تحريك neon-.
konsept göstermemize yardımcı olacak.
إن كنت تبني استمارة تسجيل دخول،
Elbette aslında kayıt formu oluşturuyorsanız,
استخدم ورقة الحوار.
kâğıt diyaloğu kullanın.
من أجل عنصري، ها هو ملف bower.json.
Kendi elementim için <i>bower.json</i> burada.
يسمى عنصري login-panel.
Elementim <i>login-panel</i> olarak adlandırılıyor.
والأمر الممتع هنا، بالتمرير للأسفل وتفقّد التوابع،
Buradaki ilginç olan şey sadece aşağı inip bağımlılıkları kontrol edin.
يمكنك ملاحظة أنني أستورد عنصري paper-elements 1.0،
Gördüğünüz gibi <i>paper-elements 1.0</i>
و neon-elements 1.0.
ve <i>neon-elements 1.0</i>'ı içe aktarıyorum.
وأنا عادةً كسولٌ جداً.
Çoğunlukla biraz tembelim.
أقوم باستيراد كامل مجموعتي paper- و neon-element ،
Geliştirdiğim sırada tüm kâğıt ve neon element setlerini içe aktarırım,
عندما أقوم بالتطوير، وذلك لأنه، وبحسب وجهة نظري،
çünkü benim bakış açıma göre,
لا يهم حقاً إن كنت قد سحبت كل هذه المجموعات إلى بيئة تطويرك.
geliştirme ortamına bütün bu setleri çekmeniz fark etmez.
وإنما حجم ملفك، وما ينتقل فعلياً إلى الإنتاج،
Dosya büyüklüğünüz, üretime esasen ne gönderdiğiniz,
هو فقط ماتقوم باستيراده وإدخاله.
yalnızca içe aktardığınız ve vulkanize ettiklerinizdir.
لذا انا كسول عادةً.
Yani bazen tembelim.
سأقوم بسحب كامل المجموعات،
Bütün setleri çekiyorum ki
حتى أحصل على وقت أسهل للتطوير.
geliştirirken daha kolaylık olsun.
الآن وبداخل محرر النصوص البرمجية،
Şimdi editörüm içinde <i> login-panel</i> elementimin
هذا هو تعريف عنصر login-panel.
tanımı bu.
يمكنك رؤية بعض التنسيقات لدينا هنا.
Burada bazı stillerimizin olduğunu görebilirsiniz.
مايجب ملاحظته هو هذا الذي على عنصر المضيف،
Not edecek bir şey, <i>host</i> elementinde
ولدينا من الاعدادات الافتراضية عدم عرض شيء.
varsayılan olarak <i>display</i>, <i> none</i> olarak atandı,
لذا لايمكنك رؤيته في البداية.
bu yüzden başlangıçta onu göremeyeceksiniz.
وبالتمرير للأسفل، يمكنك رؤية النماذج.
Ardından aşağı inersek, şablonları göreceksiniz.
وهي من نوع vanilla Polymer.
Güzel vanilya polymer.
لدينا عنصر من نوع paper-material،
<i>paper-material</i> elementimiz var,
والذي سوف يعطينا بطاقة صغيرة،
ki bu bize küçük bir kart verecek
ولدينا مدخلات الصفحة، من أجل استمارة الدخول.
ve kayıt formlarımız için <i>paper-inputs</i> var.
وأسفل ذلك، لديك التعريف الفعليّ للعنصر،
Ve aşağıda burada JavaScript'te element için
في الأسفل هنا داخل JavaScript.
gerçek tanımımız var,
هذه أمورٌ نموذجية.
yani oldukça tipik şeyler.
قمت باستدعاء login-panel.
Buna <i>login-panel</i> dedim.
ولديها حالياً خاصية واحدة، هذا البوليان المفتوح.
Şimdi bir özelliği var, bu Boolean'ı açtı
ولديّ هاتين الطريقتين، إظهار وإخفاء.
ve sonra iki metodum Göster ve Sakla var.
وماستفعله هاتان هو تغيير نوع العرض،
Bunların yapacağı şey, gösterim şeklini göstermesine
من inline-block إلى none،
ve saklamasına bağlı olarak <i> inline-block</i>'tan
بالاعتماد على الظهور والاختفاء.
<i>none</i>'a değiştirecek.
إن قمت باستدعاء هاتين الطريقتين الآن،
Eğer şimdi bu metotları çağırırsanız,
سيقوم العنصر بما يشبه الومض على الشاشة،
element ekranda sadece göz kırpıp
ومن ثم سيختفي بسرعة كبيرة جداً.
sonra hızlıca kaybolacak.
لكنني أريد لهذا الشيء أن يتحرك، صحيح؟
Hareketlendirmek için buna ihtiyacım var, değil mi?
لذا سأقوم ببعض الإضافات.
Biraz enerji katmak istiyorum.
لفعل هذا، سأنتقل لأعلى العنصر،
Bunu yapmak için elementin tepesine geri dönüp
وسأقوم باستيراد بعض التحريكات.
bazı animasyonlar için içe aktarımlar ekleyeceğim.
والأمر الرائع هو أن مجموعة تحريكات neon-
Hoş olan şeyse, <i>neon-animations</i> seti
تأتي بالحقيقة بتحريكات مبنية مسبقاً،
kullanabileceğiniz önceden yapılan birkaç
يمكنك إسقاطها فحسب.
animasyonla birlikte geliyor.
لذا سأقوم بسحب تحريك scale-up،
Bir <i>scale-up</i> animasyonu,
وتحريك fade-out،
bir <i>fade-out</i> animasyonu getireceğim ve sonra
ثم سأقوم بسحب سلوك animation-runner.
<i>animation-runner-behavior</i>'ı getireceğim.
لذا تفقد مسارات الملف هنا،
Buradakini görmenizi istediğim için
لأنني أرغب منك برؤيتها.
bu dosya yollarına göz atın.
إذاً كل مالديّ آتٍ من مجموعة تحريك neon-،
Her şey <i>neon-animation</i> paketinden geliyor
ولدي هنا دليل التحريكات هذا.
ve sonra da animasyon dizini var.
هنا حيث توجد التحريكات المعدّة مسبقاً.
Önceden yapılan animasyonlar işte burada bulunur.
ولدي أيضاً رزمة neon-animation،
Ve sonra <i>neon-animation</i> paketinde de
وسأقوم بسحب هذا السلوك.
bu davranışı getiriyorum.
وها نحن جاهزين.
Hepimiz orada tamamız.
يمكنني الآن التمرير للأسفل وإضافة هذا السلوك إلى تعاريف عناصري.
Şimdi aşağı inmeye hazırım ve davranışı element tanımlarıma ekleyebilirim.
لذا في مجموعة السلوكيات،
Yani davranış dizilimimde
سأضيف سلوك neon-animation-runner.
<i>neon-animation-runner-behavior</i> ekliyorum.
وماسيقوم به هذا هو إعطائي إمكانية الوصول إلى خاصية animationConfig.
Ve bunun yapacağı şey, <i>animationConfig</i> özelliğine erişim vermek.
لذا تذكّر، إن طريقة عمل السلوكيات تكمن بدمج الطرائق والخصائص
Hatırlayın davranışların işleme şekli, özellikleri ve metotları elementlerinize karıştırırlar.
إلى عنصرك. وبإضافة هذا السلوك،
Yani bu davranışı ekleyerek
أصبحت قادراً على الوصول إلى animationConfig.
bu gerçekten hoş <i> animationConfig</i>'e erişimim var.
حيث يمكنني هناك إعداد كافة التحريكات
Ve elementlerimde bütün animasyonlarımı
الخاصة بعنصري.
kurabildiğim yer burası.
لفعل هذا، سأعيد كائناً،
Bunu yapmak için, bir objeyi geri döndüreceğim
وسيكون كل مفتاح داخل هذا الكائن
ve bu objenin içindeki her anahtar
هو اسم لتحريك أريد تشغيله.
çalıştırmak istediğim bir animasyonun adı olacak.
إذاً سأقوم بإنشاء واحدٍ يدعى entry.
<i>entry</i> adında bir tane yaratıyorum.
وقيم كائن entry هذا، الاسم،
Ve <i>entry</i> objesinin değerleri, adı
سيكون اسم التحريك االذي يجب أن ينفذّه.
çalıştırması gereken animasyonun adı olacak,
والذي هو تحريك scale-up الذي استورناه.
ki içe aktardığımız büyütülmüş animasyondur.
ومن ثم العقدة، وهذه هي هدف التحريك.
Ve sonra <i>node</i> ise animasyonun hedefidir.
في هذه الحالة، سنقول،
Bu durumda bu elementin kendisini
أريد لهذا العنصر أن يحرّك نفسه.
hareketlendirmesini istediğimizi söylemeliyiz.
سأقوم إذاً بتمرير هذا.
Bu yüzden sadece <i>this</i> diyorum.
ولكن إن احتوى على أبناء هنا وتريد تحريكهم،
Ama buranın içinde hareketlendirmek
يمكنك استخدام شيء كـPolymer's automatic node finding.
istediğiniz çocukları olsaydı, Polymer'in otomatik düğüm bulma gibi bir şeyini kullanabilirdiniz.
يمكنك أن تقول، أريد هذا .$.
<i>this .$.child</i>'ın hedef olmasını
سيتم استهداف ابن.
istiyorum diyebilirdiniz.
أريد عوضاً عن ذلك لهذا الشيء أن يتحرك.
Onun yerine bu hareketlensin.
لكن في هذه الحالة، نحن نقول،
Ama bu durumda bu <i>entry</i> animasyonuyla
سأحرّك نفسي، باستخدام تحريك entry.
kendimi hareketlendirmek istiyorum diyoruz.
ومن ثم يمكننا انشاء تحريك الخروج.
Sonra da bir <i>exit</i> animasyonu yaratabilirim.
إذاً سأقوم هذه المرة باستدعاء fade-out من أجل تحريك الخروج.
Bu sefer <i>exit</i> animasyonu için
سأتجه بعد ذلك إلى الأسفل حيث طرائق العرض والإخفاء،
<i>fade-out</i> diyeceğim. Ve sonra aşağıya Göster ve Sakla metotlarına
وأضيف استداعائان لتشغيل التحريك.
gidiyorum ve animasyonu oynatmak için iki çağrı ekliyorum.
تذكّر إذاَ، قلت أن طريقة animatable هي ما تسمح لك بإضافة تحريكات إلى عنصرك.
Hatırlayın <i>animatable-behavior</i> dedim, ki bu aslında animasyonları bir elemente eklememizi sağlar.
ومن ثم تقوم طريقة animation-runner بإعطائنا دعم لإعادة التشغيل.
Ve sonra <i>animation-runner-behavior</i> bize geri oynatma desteğini verir.
إذاً هذا يفسّر وجود الطرائق.
İşte metotların geldikleri yer burası.
مرة أخرى، نحن نقوم باستدعاء التحريكات المسمّاة والتي أنشأناها في الأعلى.
Ve tekrar yukarıda yarattığımız isimdeki
قد تلاحظ أمراً إن كنت فطناً ومنتبهاً،
animasyonları çağırıyoruz. Fark edebileceğiniz bir şey, eğer akıllıysanız ve buraya biraz dikkat ediyorsanız,
هنا داخل الإخفاء، إعدادات العرض مضبوطة على عدم العرض قبل تنفيذ التحريك.
<i>hide</i> içinde burada, animasyonu yürütmeden önce <i> display</i>'i <i>none</i>'a ayarlıyoruz.
ما يعني أن هذا الشيء سيومض على الشاشة ولن نشاهده أبداً.
Bunun anlamı bunların ekranda yanıp söneceği
لذا يمكننا إلغاء هذا.
ve hiç göremeyecek olmamız. Bu yüzden bunu çıkarabiliriz.
يمكننا في الحقيقية حذف هذا السطر هنا.
Aslında buradaki satırı kaldırabiliriz.
سأزيله بتعليق صغير .
Kısa bir yorumla kaldıracağım.
لكننا سنحتاج لزيارة هذا بعد قليل، وسأريك حينها السبب.
Ama kısa bir süre sonra yine buna gelmemiz gerek
لكن أولاً، لنعاين العنصر خاصتنا.
ve size nedenini göstereceğim. Ama önce elementimizi önceden izleyelim.
إذاً عندما أنقر على زر الفتح هنا، سيقوم باستدعاء طريقة العرض.
Burada Aç düğmesine tıkladığımda <i>show</i> metodunu çağıracak.
وعندما أنقر على زر الإغلاق، سيقوم باستدعاء طريقة الإخفاء.
Kapa düğmesine tıkladığımda,
اضغط إذاً فتح، يتحرّك ليتكبر.
<i>hide</i> metodunu çağıracak. Bu yüzden Aç'a tıklıyorum, büyüterek harekete geçiriyor.
ثم بالضغط على اغلاق، وألاحظ ماسيحدث.
Sonra Kapa'ya tıklıyorum ve neler olacağını izleyin.
تتلاشى، ثم سرعان ما تظهر كما كانت من قبل.
Kayboluyor, ama sonra önceki durumunda tekrar açılıyor.
ما الذي يحدث هناك؟
O zaman burada neler oluyor?
حسناً، لا تقوم تحريكات الويب بالاحتفاظ بالتغيرات التي تطبّقها على حالة العنصر.
Web Animasyonları aslında elementlerinizin durumuna yaptığınız değişiklikleri korumazlar.
لذا إن كنت تقوم بتغيير خصائص CSS أو ماشابه، فلن يتم الاحتفاظ بها.
Yani eğer CSS özellikleri ve benzeri şeyleri değiştiriyorsanız korunması yoktur.
وأصبت بادئ الأمر بالخيبة.
İlk başta bunun kötü olduğunu düşündüm.
وتمنيت أن يقوم بحفظ التغييرات.
Bu değişiklikleri korumasını istedim.
لكنني أدركت الصعوبة المحتملة في تصحيح الأخطاء.
Ama hata ayıklamada bunun potansiyel olarak çok zor
إن كان لديك تحريك معقّد وأضفت العديد من التنسيقات والخصائص للعنصر،
olacağını fark ettim. Eğer bir elemente bir sürü stil ve özellik uygulayan karmaşık bir animasyonunuz varsa,
سيصح فيما بعد من الصعب جداً معرفة، مثلاً،
ileride bu şeyin büyüklüğünün ne zaman değiştiği
متى تم تغيير حجم هذا الشيء أو ماشابه.
ve benzeri şeyleri bulmak çok zor olacak.
لذا يخبرك تحريك الويب، أن الأمر عائدٌ لك.
Yani Web Animasyonu bunun sizin elinizde olduğunu söylüyor.
يجب عليك الاحتفاظ بكل تغييرات الحالة التي تفعلها.
Yaptığınız durum değişikliklerini korumanız gerekecek.
ويمكنك ذلك عن طريق إضافة صنف، أو التلاعب بخاصية التنسيق كما نفعل.
Ve bunu bir sınıf ekleyerek veya yaptığımız gibi stil özelliğini değiştirerek yapabilirsiniz.
كيف نقوم بذلك إذاً؟
Peki bunu nasıl yaparız?
حسناً، بالعودة إلى تعريف العنصر، سأقوم بإضافة كائن مستمع.
Elementler tanımımıza dönersek, <i>listeners</i> objesi ekliyorum.
وإن لم تكن قد عملت مع كائن مستمع من قبل، هو مفيد جداً.
Daha önce <i>listeners</i> objesi ile çalışmadıysanız,
الآن، هذا شيء تحصل عليه كافة عناصر Polymer.
gerçekten çok yararlıdır. Bu tüm Polymer elementlerinin aldığı bir şeydir.
وكائن المستمع هو بالأساس اختزال لـAddEventListener.
Ve <i>listeners</i> objesi esasen <i> AddEventListener</i>'in kısaltmasıdır.
إذاً سنقول حسنًا، أريد منك إنشاء مستمع لحدث NeonAnimationFinish.
Yani şöyle diyeceğiz, <i>NeonAnimationFinish</i> olayı için bir <i>listeners</i> yaratmak istiyorum.
وأريد منها استدعاء طريقة onNeonAnimationFinish.
Ve buna <i>onNeonAnimationFinish</i> metodu demek istiyorum,
والتي سأقوم بتعريفها هنا في الأسفل.
ki burada aşağıda tanımlayacağım.
لذا ما أن ينتهي العنصر من التحريك، سيستدعي هذه الطريقة.
Element harekete geçmeyi bitirince, <i> this</i> metodunu çağırın.
وبداخل هذه الطريقة، سنتفقّد إن كانت مفتوحة أم لا.
Ve <i>this</i> metodu içinde, <i>opened</i> olup olmadığına bakacağız.
إن كانت غير مفتوحة، سنخبرها بعدم عرض شيء.
Ve eğer açıksa, <i> none</i> göstermesini söyleyeceğiz.
يمكننا العودة الآن وتفقّد التحريك.
Şimdi geri gidip animasyonumuza göz atabiliriz.
إذاً اضغط زر الفتح، ويتحرّك كما في السابق.
O zaman Aç düğmesine tıklayın ve eskisi gibi harekete geçer.
والآن عندما أضغط إغلاق، يتم الاحتفاظ بهذه الحالة.
Şimdi de Kapa'ya tıklayınca, o durumda kalır.
رائع.
Harika.
ماذا لو أردت إضافة عدّة تحريكات لعنصرك،
Eğer elementinize aynı zamanda oynayan
والتي تعمل جميعها في نفس الوقت.
bir sürü animasyon eklemek isterseniz ne olur?
في الواقع، هذا سهل التنفيذ جداً.
Aslında bunu yapmak çok kolay
ويمكنني تعليمك كيفية ذلك من هنا.
ve burada size bunu yapmayı gösterebilirim.
لكن أولاً، لنستورد بعض التحريكات للعمل معها.
Ama önce çalışacak birkaç animasyon daha içeri aktaralım.
سأقوم بسحب تحريك fade-in، وسأسحب أيضاً مايسمى بـ slide-down.
Bundan dolayı <i>fade-in</i> animasyon ile <i>slide-down</i> adı verilen bir diğerini getireceğim.
وبداخل كائن animationConfig، وبدلاً من امتلاك كائن entry وحيد هنا،
<i>animationConfig</i> objemde, burada tek bir <i>entry</i> objesi yerine,
يمكنني في الحقيقة الحصول على مجموعة.
esasen bir dizim olabilir.
إذاً يمكنني امتلاك مجموعة كائنات تحريك التي أريد إضافتها.
Oynatmak istediğim bir dizi
تلاحظ أنني قمت بإعداد الأول، اسم التحريك slide-down،
animasyon objem olabilir. Burada ilk animasyon adını <i> slide-down-animation</i> olarak ve sonra ikincisini <i>fade-in-animation</i>
ومن ثم الثاني، تحريك fade-in.
olarak belirlediğimi görebilirsiniz.
وسيعمل هذان التحريكان بالتوازي.
Ve bunlar paralel olarak oynayacak iki animasyon.
أي سيحدثان في نفس الوقت.
Yani ikisi de aynı zamanda olacak.
لنستعرض هذا إذاً على Chrome لنرى ماسيحصل.
O zaman ne yaptığını görmek için gidip Chrome'da
إذاً سأضغط على زر الفتح،
ön izleme yapalım. Aç düğmesine tıklayacağım
وسترى أنه يتحرك وينزلق في ذات الوقت.
ve aşağıya inip aynı zamanda da hareket ettiğini
إذاً هو يتلاشى وينزلق للأسفل في نفس الوقت.
göreceksiniz. Kaybolup aynı zamanda da aşağı kayar.
رائع، ولكن ماذا لو أردت تغيير توقيت هذا قليلاً؟
Harika, peki bunun zamanlamasını değiştirmek
قد ترغب أن تعمل تحريكاتك بالتعاقب،
isteseniz ne olurdu? Belki animasyonunuzun art arda oynamasını
أو ربما توازنهم قليلاً.
veya biraz kaymış olmasını istiyorum.
حسناً، هذا سهل التنفيذ جداً.
Bunu yapmak da çok kolay.
لكلّ كائن تحريك كائن توقيت اختياري يمكنك اعطاؤه إياه.
Her animasyon objesi, verebilecek bir opsiyonlu
ولكائن التوقيت هذا بعض الخصائص التي يمكنك العمل بها.
zamanlama objesine de sahiptir. Zamanlama objesi çalışabileceğiniz birkaç
يمكنك ضبط المدّة.
özelliğe sahiptir.
إذاً سأقول أن تحريك slide-down،
Süreyi ayarlayabilirsiniz. Yani <i>slide-down-animation</i>'ın 2.000 milisaniye,
يجب أن يملك ٢٠٠٠ ميلي ثانية، أي ثانيتان.
yani iki saniye süresi olmasını söyleyeceğim.
وتحريك fade-in سيملك مدة ١٠٠٠، أي ثانية، وبتأخير قدره ١٠٠٠.
Ve <i>fade-in</i> animasyonun ise süresi 1.000, yani bir saniye ve gecikmesi 1.000 olmalıdır.
إذاً سينتظر مدة ثانية قبل أن يشتغل،
Oynamaya başlamadan önce bir saniye bekleyecektir
ومن ثم سيعمل بطول ثانية.
ve sonra bir saniye uzunluğunda olacak,
مما يجعله ينتهي في نفس توقيت تحريك slide-down.
böylece <i>slide-down-animation</i> ile aynı zamanda bitecek.
يمكنك الاستفادة من التأخير لجعل تحريكات تعمل واحداً تلو الآخر.
Ve animasyonlarınızın birbiri ardına oynaması için gecikme kullanabilirsiniz.
أو إن أردت للأشياء أن تبدو متوازنة، كأن يكون واحداً فوق الآخر،
Veya nesnelerin biraz kaymış olmasını istiyorsanız, yani bir nevi birbiri üstünde,
يمكنك فعل هذا أيضاً.
bunu da yapabilirsiniz.
وماسيفعله بالحقيقة هو تغيير شعور التحريك،
Ve bunun yapacağı şey bu animasyonun verdiği hissi değiştirmek.
شاهد هذا وقارنه بما كنا نفعله بالسابق.
O zaman bunu seyredip daha önce
الآن عندما أضغط فتح،
yaptığımız şeyle karşılaştırın.
أصبحنا نرى انتقالاً أكثر تدرجاً، أكثر مرونة نوعاً ما،
Aç'a tıkladığımda, orada gördüğümüz daha aşamalı, bir nevi daha yumuşak bir geçiş,
لأنها لا تبدأ التلاشي حتى تكون قد أنهت تقريباً نصف تحريك slide-down.
çünkü <i>slide-down-animation</i>'un yarısına gelinceye kadar kaybolmaya başlamıyor.
إذاً بتغيير هذه الخصائص البسيطة،
Sadece bu küçük özellikleri değiştirerek,
استطعنا تغيير شعور التحريك.
animasyonun verdiği hissi ayarlayabildik,
وهذا رائعٌ حقاً.
ki bu çok harika.
ما رأيك الآن بكتابة تحريكك الخاص؟
Peki şimdi kendi animasyonunuzu nasıl yazarsınız?
قد تبدو هذه مهمةً صعبة،
Gerçekten göz korkutucu olsa da
لكنها في الحقيقة بغاية السهولة.
aslında çok kolay.
وما أفعله عادةً هو النظر إلى إحدى التحريكات المعدة سابقاً في مجموعة التحريك.
Ve genelde yaptığım şey, önceden yapılmış animasyon setlerinden birine bakmak
ومن ثم استخدامه كنقطة بدء.
ve sonra onu başlangıç noktası olarak kullanmak.
إذاً هذا تعريف تحريك fade-in.
İşte <i>fade-in</i> animasyonun tanımı bu.
وإن قمنا بالتمرير إلى هنا،
Eğer buralarda dolaşırsak,
تلاحظ أنه يشابه أي عنصر polymer آخر.
diğer bir Polymer elementine benzediğini görebilirsiniz.
هناك بعض المستندات للاختيارات التي تدعمه.
Desteklediği tercihler için bazı dokümantasyonlar var.
وننزل للأسفل ونرى تعريفه،
Ve aşağı iniyoruz ve tanıma bakıyoruz,
تلاحظ هنا أنه يملك خاصية واحدة فقط هي لأسمه.
adı için burada <i>is</i> özelliği olduğunu görüyorsunuz.
وينفّذ سلوك NeonAnimationBehavior.
Bu <i>NeonAnimationBehavior</i>'unu uyguluyor.
لم نتحدث عن هذا بعد،
Bunun hakkında henüz konuşmadık,
ولكن هذا سلوك يجب تنفيذه إن أردت إنشاء تحريكك الخاص.
ama eğer kendi animasyonunuzu yaratıyorsanız, uygulamanız gereken davranış bu.
وثم لديه وظيفة config.
Ve sonra bu <i>config</i> fonksiyonu var.
وهذا هو جوهر التحريك هنا،
Ve animasyonun özü aslında bu
وليس معقدّاً على الإطلاق.
ve o kadar da karmaşık değil.
تلاحظ أن العقدة التي يستهدفها هي أي عقدة نقوم بتمريرها في configuration.
Hedeflediği düğümün konfigürasyonumuza geçirdiğimiz düğüm neyse o olduğunu görürsünüz.
وتنشئ بعد ذلك مايسمى بـ KeyframeEffect.
Ve sonra <i>KeyframeEffect</i> adındaki şeyi yaratır.
وهذه هنا، هي واجهة برمجة تطبيقات تحريك الويب.
Ve buradaki geçerli Web Animasyonu API.
سننشئ إذاً كائن KeyframeEffect.
O zaman <i>KeyframeEffect</i> objesi yaratıyoruz.
وسنخبره أي عقدة سيستهدف،
Ona hangi düğümü hedefleyeceğini söylüyoruz
ومن ثم سنمرره إلى مجموعة إطارات أساسية،
ve onu JavaScript'te yazılan
والتي تكون مكتوبة بواسطة JavaScript.
bu anahtar çerçeve dizilerine iletiyoruz.
ومافعلناه هنا هو قولنا أننا نريد نقله من ٠ إلى ١ بالنسبة للشفافية،
Burada ışık geçirmezlik açısından 0'dan 1'e gitmesini
ومن ثم سنمرر مايتعلق بالتوقيت.
istediğimizi söylüyoruz ve aynı zamanda zamanlamayı iletmemiz gerekiyor.
هذا سهلٌ جداً.
Yani oldukça kolay.
يمكنك بسهولة ملاحظة كيفية محاكاة هذا وتنفيذ تحريكك الخاص.
Bunu nasıl hemen kopya edebileceğinizi ve kendi animasyonunuza uygulayacağınızı gördünüz
وهذا مافعلته تماماً.
ve yaptığımız şey de aynen bu.
قمت بإنشاء تحريك bounce-in.
<i>bounce-in</i> animasyonunu yarattım.
والذي سيقوم بعمل تأثير القفز.
Yani bir nevi sıçrama efekti yaratacağız.
وأخذت تحريك scale-up الذي عملناه به مسبقاً،
Daha önce çalıştığımız <i>scale-up</i>
ونسخته ولصقته هنا.
animasyonunu aldım. Buraya kopyalayıp yapıştırdım.
يمكنك ملاحظة وجود العديد من الخيارات المشابهة لما عملنا به.
Biraz önce üzerinde çalıştığımız şeyle oldukça benzer tercihlere sahip olduğunu görebilirsiniz.
والفرق الوحيد حقاً يكمن في transformOriginconfiguration هنا،
Gerçekten de tek farkı buradaki bu <i> transformOrigin</i> konfigürasyonu
والذي يتيح لك بتحديد نقطة الأصل التي سننطلق منها.
ki bu ölçeklendireceğimiz başlangıç noktasını ayarlamamızı sağlar.
لكن الباقي متشابه تماماً.
Ama onun dışındaki her şey aynı.
ومافعلته هو أنني قمت بإضافة كافة الإطارات الأساسية على طوله.
Ve yaptığım şey bu sırada bu farklı anahtar çerçeveleri
إذاً ابدأ القياس عند ٠، ارفعه إلى ١،
eklemekti. Yani ölçek 0'dan başla, ölçek 1'e kadar git
وها هي الإطارات الأساسية تكبر وتصغر، ثم تكبر وتصغر .
ve sonra güzel bir sıçrama efekti elde edinceye kadar çok büyük ve çok küçük, çok büyük ve çok küçük olması için,
حتى يصبح لديك مايشبه تأثير قفز جميل.
işte aradaki anahtar çerçeveler.
حقاً، هذا هو كل مافي الأمر.
Gerçekten işte hepsi bu.
وإن أردت، يمكنك دمج الأشياء سوية هنا.
Ve eğer isterseniz, aynı zamanda bence burada farklı şeyleri
يمكنك تشغيل تحويل وشفافية وبعض الأشياء أيضاً،
karıştırabilirsiniz. Yani <i>transform</i> ile ışık geçirmezlik ve diğer birkaç şeyi
جميعها في نفس الوقت.
aynı zamanda çalıştırabilirsiniz.
ويعطينا هذا القدرة على الذهاب إلى كائن animationConfig.
Ama bu bize <i>animationConfig</i> objemize gitme kabiliyeti verir.
ويمكننا استبدال تحريك entry بتحريك bounce-in،
<i>entry</i> animasyonu <i>bounce-in</i> animasyonla değiştirebiliriz
ومن ثم يمكننا استيراد تعريفه.
ve sonra tanımını içe aktarabiliriz.
وما أن وضعنا هذا في محله، أصبح كل شيءٍ رائعاً.
Ve bu yerli yerindeyken her şey iyidir.
يمكننا العودة والضغط على زر الفتح.
Gidip Aç düğmesine tıklayabiliriz.
وترى الآن أننا حصلنا على تأثير القفز هذا، والذي يبدو غريباً.
Ve göreceksiniz ki biraz çılgınca olan <i>bounce-in</i> efekti alırız.
لنعد إذاً.
O zaman geri gidiyoruz.
ولنضف بعض التوقيت إلى هذا الشيء.
Bu şeye biraz zamanlama ekliyoruz,
وسنطيل المدة قليلاً.
süreyi biraz uzatıyoruz.
ونشغّله الآن، أصبح تحريكاً أكثر قبولاً.
Ve şimdi oynattığımızda, daha sindirimi olan bir animasyon.
أكثر مرونة.
Biraz daha yumuşak.
الآن، الإطارات الأساسية هذه التي عرضتها عليك،
Şimdi size gösterdiğim bu anahtar çerçeveler,
توّزع جميعها بشكلٍ متساوٍ على دورة حياة التحريك أو مدته.
bunlar hayat döngüsü veya animasyon süresi boyunca eşit dağıtılıyor.
حتى تأخذ جميعا مدة الوقت ذاتها،
Yani tam olarak aynı süreyi alırlar,
ولكن هذه ليست الطريقة التي يعمل بها التحريك،
ki gerçekte animasyon böyle çalışmaz.
أحياناً، تريد لبعض الأجزاء أن تأخذ وقتاً أطول،
Bazen bazı bölümlerin daha uzun, bazılarınınsa
وللبعض الآخر وقتاً أقصر.
daha kısa olmasını isteriz.
لذا إن كنت تريد فعل ذلك، فهو سهلٌ جداً.
Ve eğer bunu yapmak isterseniz, bu da çok kolay.
يمكنك إضافة offsets لإطار التحريك الأساسي.
Anahtar çerçeve animasyonlarınıza <i> offset</i> ekleyebilirsiniz
يمكنك الملاحظة أنني هنا جعلت offsets من ٠ وسنتقدم باتجاه ١.
ve burada gördüğünüz gibi 0'dan <i>offset</i> ederek 1'e kadar gidiyoruz.
يمكنك تخيّل هذا كـ٠٪ من مدة تحريكك،
Bununla ilgili animasyonun %0 süresi ile
إلى ١٠٠٪ من مدة التحريك.
animasyonun %100 süresi arasında düşünebilirsiniz.
وهذه هي مدة الوقت التي يجب أن تكون بين هذه.
İkisi arasında geçmesi gereken
إذاً ما بين ٠ إلى ٨٠٪ من عمر التحريك،
zaman miktarı budur. Yani easen 0'dan animasyonun %80'e kadar hayatı süresince
أريد أن يمضي هذا الوقت بالتكبير إلى ١.٥،
bütün zamanı 1,5'a doğru ölçeklemek istiyorum, burada sadece o başlangıç
أي أن يبقى الإطار الأساسي هنا.
anahtar çerçeve arasını yapıyoruz.
وأريد للـ٢٠٪ الباقية من التحريك،
Ve sonra animasyonun diğer %20'sinde
أن تحدث بالأجزاء القافزة في النهاية.
en sonunda sıçrayan bitlerin olmasını istiyorum.
إذاً ستكون ستكبر، ومن ثم ستقفز بسرعة حتى النهاية.
Yani uzun bir artış ve sonra burada sonda gerçekten hızlı bir sıçrama yapacak.
إذا ذهبنا لمعاينة هذا،
Eğer gidip bunu ön izlersek,
سترى أنه تكبير أطول، ونحصل على القفز في النهاية.
artık daha uzun bir artış olduğunu ve sonunda da daha fazla sıçramamız olduğunu göreceksiniz.
رائع حقاً.
Çok güzel.
وهذه طريقة سهلة جداً لتتحكم بشكل التحريك وشعوره ،
Görüntüyü arayarak animasyonunuzu hissetmek için
بالطريقة التي تريدها تماماً.
oldukça kolay bir yol, böylece tam istediğinizi alırsınız.
آخر ما أريد ذكره،
Bahsetmek istediğim son şeyse,
بينما كنت أسجّل هذا، واجهني خلل صغير في نظام التحريك،
bunu kaydettiğim sırada, animasyon sisteminde küçük bir hataya denk geldim, burada seyredebilirsiniz.
تفقّد هذا،
Aç düğmesine tıklayacağım.
سأضغط على زر الفتح.
Animasyonumu oynatacağım.
سأشغّل تحريكي. ومن ثم سأضغط زر الإغلاق، وسأضغطه مرتين.
Ve sonra bu Kapat düğmesine tıklayacağım ve Kapat düğmesine iki kez tıklayacağım.
وعندما أضغط زر الفتح مرة أخرى، لا أرى التحريك.
Ve şimdi tekrar Aç'a bastığımda, artık animasyonumu görmüyorum.
ما الذي حدث هنا.
Burada ne oluyor?
حسناً، يبدو هذا كخلل حيث تعطّل مكدّس التحريكات ،
Animasyonunuzun yığıldığında kırılabileceği noktada
مايعني أنه حان وقت استدعاء أصدقائنا،
bir hata var gibi, ki bu da
"الحيل الجميلة"
eski dostumuz Sweet Hacks'i çağırma zamanı demek.
مرّ بعض الوقت منذ أن شاهدناهم، وها قد عادوا الآن.
Onları göreli biraz zaman geçti, ama şimdi geri döndüler.
ما سأفعله الآن، في معالجي،
İşleyicimde yapacağım şey,
سأقوم بإضافة استدعاء إلى طريقة CancelAnimation.
bu <i>CancelAnimation</i> metoduna bir çağrı eklemek.
وعندما أستدعي CancelAnimation،
<i>CancelAnimation</i>'ı çağırdığımda,
ستقوم بإلغاء كافة التحريكات التي كانت تعمل مسبقاً.
diğer animasyonun zaten oynattığı şeyi gönderir.
والآن عندما أضغط على زر الفتح، تقفز.
Ve şimdi Aç'a bastığımda, sıçrar.
أضغط مرتين على زر الإغلاق، تُغلق.
Kapat'a iki kez tıklıyorum, kapanıyor.
أضغط زر الفتح، وها هي تعمل من جديد.
Aç'a tıklıyorum ve yine çalışıyor.
وعدنا للعمل.
Tekrar işler yolunda.
أنا أدرك أن هذا خلل مزعج،
Bunun can sıkıcı bir hata olduğunun farkındayım,
ولكني أردت إعطائك نصيحة محترف في حال واجهتك هذه المشكلة.
ama birisi daha bu soruna rastlarsa diye sizin için küçük bir ipucu dâhil etmek istedim.
حسناً.
Tamam.
غطيّنا العديد من الأشياء اليوم.
Bugün bir ton şey gördük.
وعليّ أن أعترف، عندما بدأت هذا،
İtiraf etmeliyim ki buna başladığımızda,
لم أكن أعرف هذا القدر عن نظام التحريك.
animasyon sistemiyle ilgili aslında çok şey bilmiyordum.
لذا كان من الرائع لي أن أتعلّم.
Öğrenmek benim için harika oldu
وأتمنى أن تكونوا قد استمتعتم أيضاً.
ve umarım siz de beğenmişsinizdir.
الآن، سوف أقوم بحلقة متابعة لعنصر الصفحات المتحركة.
Hareketlenen sayfa elementleriyle ilgili takip eden bir bölüm
لذا قم بالضغط على زر الاشتراك حتى لا تفوتك.
yapacağım. O zaman bu küçük Kaydol düğmesine basarak bunu kaçırmayın.
كالعادة، شكراً للمشاهدة،
Her zamanki gibi izlediğiniz için teşekkürler
أراك المرة القادمة.
ve bir dahaki sefere görüşürüz.
مرحباً، أنا روب.
Merhaba Polycastercılar. Ben Rob.
حان وقت الأسئلة.
Soru ve cevap zamanı.
يسأل أليكس شو،
Alex Shaw yazmış ve şöyle sormuş,
ما هي النصيحة التي تعطيها لمن ينتقل من Polymer 0.5 إلى 1.0؟
"Polymer 0.5'den Polymer 1.0'e geçen birine verebileceğiniz ipucu nedir?"
سؤال جيد، أليكس.
Çok iyi bir soru Alex.
قام حديثاً أحد أعضاء فريق Polymer
Geçenlerde Polymer ekibinden bir kişi
بكتابة هذه الوحدة الرائعة التي تسمّى polyup.
<i>polyup</i> adında gerçekten harika bir modül yazdı.
والتي تأخذ النص البرمجي لـPolymer 0.5،
Ve bu eski Polymer 0.5 kodunuzu alır
وتقوم بهذه المكائد الغريبة وتنتج نص برمجي لـPolymer 1.0.
ve ona yaptığı çılgınca entrikalardan sonra Polymer 1.0 kodunu çıkarır.
وهي رائعة حقاً.
Gerçekten müthiş.
يمكنك اتباع الرابط هنا، لتتفقد موقع polyup.
Polyup web sitesine göz atmak için buradaki bağlantıyı izleyebilirsiniz.
هناك القليل من التبديل في مكان النص البرمجي،
Kodunuzu koyacağınız küçük bir çoğaltıcı var
وسيقوم هذا بتحويله تلقائياً.
ve onu otomatikman çevirecektir.
وهناك أيضا وحدة MPM،
Ve yükleyip komut satırınızdan
التي يمكنك تنصيبها وتشغيلها من سطر الأوامر،
çalıştırabileceğiniz bir MPM modülü de var,
لذا هناك أيضاً العديد من الأشياء الرائعة هناك.
yani gerçekten çok harika şeyler.
مرة أخرى، شكراً لك أليكس لإرسالك سؤالك لنا.
Bu soruyu gönderdiğin için tekrar teşekkürler Alex.
سأدع الموظفين يتواصلون معك،
Yardımcılarımızı gönderip
ويرسلون لك هديتك.
size bir ganimet paketi vereceğiz.
إن كانت لديك أسئلة، تأكد من تركها في التعليقات في الأسفل.
Sorunuz varsa yorumlara bıraktığınızdan emin olun
وقد نعرضها في حلقة مقبلة من Polycast.
ve size Polycast'in gelecekteki diğer
شكراً للمشاهدة جميعاً،
bir bölümünde yer verebiliriz. Hepinize izlediğiniz için teşekkürler
سأراك في الحلقة المقبلة.
ve sonraki sefere görüşmek üzere.
Similar videos:

Give your element an API -- Polycasts #16
Google for Developers
22.9K views 242 likes 1 dislikes 18 May 201530% match

Polymer's Animation System (The Polymer Summit 2015)
Chrome for Developers
7.8K views 54 likes 1 dislikes 15 Sep 201529% match

Authentication with Firebase -- Polycasts #57
Chrome for Developers
23.7K views 353 likes 2 dislikes 16 Nov 201626% match


Settings Privacy About Contact Donate