كيفية إنشاء VueConf Load Animation (أثناء التعلم عن Vue.js و SVGs في العملية)

أصدرت Vue.js مؤخرًا صفحة مقصودة جديدة لبرنامج VueConf 2017 تضمنت رسومًا متحركة لطيفة. ماذا عن عمل هذه الرسوم المتحركة ومعرفة المزيد حول Vue.js و SVGs؟

ما ستحصل عليه: كيفية إنشاء الرسوم المتحركة على الصفحة المقصودة لبرنامج VueConf 2017. على وجه التحديد ، سأخوض عملية إنشاء SVG ، وكسر الرسوم المتحركة ، واستخدام الرسوم المتحركة CSS لتكرار الرسوم المتحركة ، والتحكم تطبيق / توقيت الرسوم المتحركة باستخدام Vue.js. انها طويلة جدا ومفصلة. أوصي القيام بذلك في قطع إذا لزم الأمر. يمكنك استخدام Pocket لحفظ هذه المقالة بسهولة في وقت لاحق حتى لا تنسَ الرجوع إليها.

(التحديث 3/27/17): لقد بدأت عملية إنشاء دورة فيديو لتوفير تصنيف واضح ومفصل للغاية لملفات SVG. سأغطي شرح SVGs "تحت الغطاء" ، باستخدام Affinity Designer لإنشاء رسومات تفصيلية متجهة ، ورسوم متحركة باستخدام CSS ، و GreenSock ، و Mo.js ، و Anime.js ، بالإضافة إلى بعض التطبيقات العملية للرسوم المتحركة UX. يمكنك حجز الوصول هنا.

العرض / الكود النهائي: http://codepen.io/mikemang/pen/JWNOrr/

الخلفية

هذا البرنامج التعليمي مبهج للغاية بالنسبة لي لأن Vue.js هو ما أنقذني من متلازمة الدجال.

بعد التخرج مع شهادة البكالوريوس في علوم الكمبيوتر ، لم يكن لدي أي فكرة عما أردت القيام به في عالم التنمية وما زلت لا أشعر بالثقة في قدراتي. بسرعة ، لقد غرقت في متلازمة الدجال. قبل التخرج مباشرة ، تعرفت على الأعمال التجارية عبر الإنترنت وريادة الأعمال والشركات الناشئة من خلال بودكاست يسمى Smart Passive Income Podcast من إعداد Pat Flynn.

نظرًا لهذه التجربة ، فإن اكتشاف تطوير الويب الحديث بعد تخرجي كان بمثابة هواء منعش بسبب رائحة رائعة من الطاقة والحماس والميل إلى الريادة وعقلية البدء الذاتي. دفعني هذا إلى التركيز على إيجاد وظيفة في تطوير الويب.

لذا ، قفزت مباشرةً لتعلم كل تطوير الويب الحديث ، وأبرزها React. مثل كثير من الناس ، فقد وضعت عائقا ليصبح مطور ويب مكدس كامل.

لقد تحررت من خلال دورات الفيديو ، والوظائف المتوسطة ، وجميع أنواع الأشياء الجيدة الأخرى وشعرت أنني كنت أحرز تقدماً جيداً. في النهاية ، كنت قادراً على جعل هذه اللوحة التفاعلية لـ Wrigley Field.

بينما كنت أتعلم React ، كنت أبدأ أيضًا في إنشاء رسومات متجهة مع Affinity Designer. بدأ جعل الرسومات المتجهة بمثابة استراحة عقلية ممتعة من دعم العمل المجهد من 9 إلى 5 أثناء معرفة أنني أردت أن أكون مطور ويب ورائد أعمال ، ولم أكن أفعل ذلك.

لدهشتي ، بدأت أدرك أن الرسومات المتجهة ، ومهارات التصميم بشكل عام ، لم يكن كل ذلك معقدًا فقط للأشخاص الذين لديهم خلفية فنية. كنت أصنع صوراً باردة وجريئة من أشكال بسيطة ومجموعة من الألوان الجريئة.

بدأت أدرك أن مهاراتي في التصميم أصبحت فعليًا مشروعة. كنت استعيد الثقة. ومع ذلك ، ما زلت أحاول تعلم كيفية نقل مهارات التصميم الخاصة بي إلى الويب.

بعد إجراء بعض التجارب والتعليم الذاتي مع صور CSS نقية وملفات SVG وإنشاء مواقع ويب باستخدام Bootstrap ، صادفت Vue.js. كان Vue.js نفسًا آخر للهواء النقي. لقد وجدت أنه كان من السهل لف رأسي. كان ودودًا ومقروءًا وأقل ترويعًا من أي شيء صادفته أثناء تعلم تطوير الويب.

بدأت إقران Vue.js مع التركيز على الواجهة. لقد صنعت تطبيقات صغيرة مثل تطبيق Pokemon battle وتطبيق Mad Libs وساعة Pomodoro والمزيد. كما استخدمت Vue.js لرش الرسوم المتحركة وغيرها من المهارات الخاصة للغاية. الجزء المذهل حول Vue.js هو أنه يمكن استخدامه من شيء خاص مثل الرسوم المتحركة إلى واسعة مثل تطبيقات الويب الديناميكية.

بينما كنت أتعلم برنامج Vue.js وأحقق كل هذا ، تلقيت الشفاء الكامل من متلازمة الدجال. كنت أعرف أنني قد وجدت مهارة تسويقية محددة في تطوير الواجهة الأمامية مع التركيز على التصميم والإبداع.

ولدت Coding Artist رغبة في توفير الموارد بعد الموارد لمساعدة الناس على تجربة الرحلة التي وصفتها للتو لتعلم كيفية العثور على مجموعة من المهارات القابلة للتسويق في تطوير الواجهة الأمامية للتصميم الثقيل.

مع أخذ هذه القصة الخلفية في الاعتبار ، لم أستطع أن أبتسم عندما رأيت هذه الرسوم المتحركة الرائعة على صفحة الهبوط في VueConf التي صنعها داميان دوليس.

يعد Vue.js أحد الأسباب الرئيسية التي تمكنت من التغلب على متلازمة الدجال ، واكتسبت الثقة في مواجهة التحديات الجديدة مثل الرسوم المتحركة ، وفناني الترميز. الآن ، أتيحت لي الفرصة لكتابة إرشادات شاملة حول إنشاء الرسوم المتحركة المستخدمة في الصفحة المقصودة الجديدة لبرنامج VueConf. كما ذكرنا سابقًا ، يسعدني جدًا القيام بهذا البرنامج التعليمي.

علاوة على ذلك ، آمل أن يكون هذا البرنامج التعليمي دليلًا عمليًا آخر حول كيفية استخدام SVGs والرسوم المتحركة و Vue.js في تطبيقات العالم الحقيقي. إنها حقًا مهارة قابلة للتسويق بنسبة 100٪ لتركيز معظم انتباهك عليها.

مع كل هذا ، دعنا نصل إليه.

تحطيم المشكلة

عندما بدأت لأول مرة في رؤية استخدام SVGs والرسوم المتحركة مثل تلك التي نتناولها في هذا المنشور ، كان رد فعل "Ooh ، هذا رائعًا! أتمنى لو كان لدي أدنى فكرة عن كيفية القيام بذلك. "

بعد وضع الوقت المناسب للتعلم ، أدركت أن عمل رسوم متحركة كهذه ليس بالأمر الصعب للغاية إذا تمكنت من حل المشكلة بشكل صحيح. لذلك ، دعونا نفعل ذلك.

إليك ما نحتاج إلى كسره بالمعنى الأوسع / الأكثر وضوحًا:

  1. كيفية إنشاء الرسومات
  2. كيفية إنشاء الرسوم المتحركة

الآن ، لنفصل ما يتعين علينا القيام به بمعنى أكثر تحديدًا لكل نقطة.

ما يتعين علينا القيام به لإنشاء الرسومات:

  1. تفصيل ما الرسومات التي نحتاج إلى إنشاء
  2. تحطيم الأشكال التي تشكل كل رسم
  3. قم بإنشاء الأشكال لتكوين كل رسم كرسم متجه باستخدام أداة مثل Illustrator أو Sketch أو Affinity Designer (سأستخدم الأخير)
  4. تحسين الصور للتصدير
  5. تصدير الصور بتنسيق SVGs
  6. قم باستيراد SVGs وإضافة بعض التصميم لترتيب الرسومات في الموضع الذي ستكون فيه عند الانتهاء من الرسوم المتحركة

ما يتعين علينا القيام به لإنشاء الرسوم المتحركة:

  1. تبطئ الرسوم المتحركة كاملة
  2. تحديد الرسوم المتحركة لكل رسم معين بالمعنى غير الفني
  3. اكتب الرسوم المتحركة لـ CSS للقيام بالرسوم المتحركة التي حددناها في الخطوة 2
  4. تعرف على كيفية التعامل مع تنظيم الرسوم المتحركة باستخدام Vue.js

ملاحظة: سيتم إجراء الرسومات باستخدام Affinity Designer وسنقوم بترميزها عبر Codepen.

العرض / الكود النهائي: http://codepen.io/mikemang/pen/JWNOrr/

تحطيم الرسومات التي نحتاج إلى إنشائها

كممارسة جيدة ، حاول معرفة ما إذا كان يمكنك تحديد الرسومات التي نحتاج إلى صنعها وما هي الأشكال التي ستشكل كل رسم. تدوين هذا إلى أسفل ثم سنذهب أكثر من ذلك.

شعار VueConf

شعار VueConf هو شعار Vue.js رأسًا على عقب. اتضح أن النظر إليها من الخارج قد يجعل من السهل معرفة الأشكال التي نحتاجها.

نحتاج إلى ثلاثة مثلثات فوق بعضها: مثلث أبيض صغير ، مثلث أزرق متوسط ​​، مثلث أخضر كبير.

شمس

رسم الشمس سهل للغاية. هناك دائرتان فوق بعضهما البعض: دائرة بيضاء أصغر ودائرة خضراء أكبر.

دفع

الأدغال هي أيضا بسيطة جدا. إنها دائرتان: دائرة خضراء أكبر ودائرة خضراء أصغر تقع على الجانب الأيمن من الدائرة الأكبر.

الأشجار

تواصل الأشجار نمط البساطة. الشجرة اليسرى عبارة عن خط أزرق ودائرة خضراء أكبر ودائرة خضراء أصغر في الأعلى. الشجرة اليمنى هي مجرد خط أزرق ودائرة كبيرة.

عنوان

من أجل الوقت ، لن أفعل العنوان في هذا البرنامج التعليمي.

خلق الرسومات

سنقوم بإنشاء الأشكال لتشكيل كل رسم. يمكننا أن نفعل هذا باستخدام واجهة المستخدم الرسومية ناقلات الرسومات.

سأستخدم Affinity Designer في هذا البرنامج التعليمي ، ولكن يمكنك بدلاً من ذلك استخدام Sketch أو Adobe Illustrator أو Inkscape. Affinity Designer هو أرخص الخيارات المدفوعة بسعر 50 دولارًا والمفضلات الشخصية ولكن أي شيء سيفعله. إنكسكيب مجاني ولكنه محدود.

عندما تكون مستعدًا ، فلنبدأ.

شعار VueConf

لنبدأ بعمل المثلث الخارجي الأكبر.

في Affinity Designer ، يمكنني تحديد أداة المثلث مثل:

اسحب مثلثًا كبيرًا وتحديث اللون باستخدام هذا الرمز السداسي للون الأخضر:

# 41B883

لدينا الآن:

بعد ذلك ، يمكنك إما سحب مثلث آخر ليكون أصغر قليلاً ، أو يمكنك تكرار استخدام CMD + J وتغيير حجمه عن طريق سحب زاوية أثناء الضغط على SHIFT. (يمكنك رؤية جميع الاختصارات هنا)

يجب أن ينتقل هذا المثلث إلى أسفل المثلث الأكبر. ملاحظة ، قد تحتاج إلى ضبط الطبقات بحيث يكون هذا المثلث في المقدمة باستخدام ما يلي:

هنا اللون الأزرق:

# 35495E

يجب أن ينتهي بنا الأمر بما يلي:

يمكننا أن نكرر لإضافة مثلث أبيض أصغر. هنا هو رمز عرافة:

# FFFFFF

لدينا الآن الشعار الكامل.

الآن ، نريد تحسين شعارنا عند تصديره.

يمكنك تحديد أداة النقل والسحب فوق كل مثلث لتحديدها.

إليك مقطع من هذا المفهوم قيد التنفيذ:

بعد ذلك ، اضغط على CMD + G (أو مجموعة Layer → Group) لتجميع هذه الأشكال التي اخترناها.

بعد ذلك ، ألقِ نظرة على علامة تبويب الطبقات على الجانب الأيمن من الشاشة:

يمكننا أن نرى أننا قمنا بتجميع طبقاتنا / الأشكال. بعد ذلك ، مرر مؤشر الماوس فوق (Group) ، وانقر نقرًا مزدوجًا ، وقم بتسمية "شعار VueConf".

للممارسة الجيدة ، دعونا أيضًا نلغي المجموعة:

الآن ، اسم كل مثلث مع بناء الجملة التالي:

VueConf Triangle [اللون]

يجب أن لدينا الآن:

من خلال تجميع الشعار ، قلنا بشكل أساسي: "مهلاً ، هذه الأشكال المجمعة مع بعضها ستشكل رسمًا". الآن ، يمكننا تصدير هذا الرسم وسيتم إنشاء كتلة واحدة من رمز SVG. تحتوي كتلة SVG الخاصة برسم الشعار بالكامل على علامات لكل شكل. عن طريق تسمية كل شكل ، سنكون قادرين على التمييز بين العلامات لكل شكل في كود SVG الخاص بنا.

سيكون هذا أكثر منطقية عندما ندرس كود SVG ونستورده في مشروع Codepen الخاص بنا.

الآن ، دعنا نكرر كل هذه الخطوات لرسوماتنا الأخرى.

شمس

يجب أن تكون الشمس سهلة حقا.

باستخدام أداة القطع الناقص (الدائرة) ، يمكننا سحب دائرة خضراء أكبر.

بعد ذلك ، يمكنك تكرار وتغيير حجم أو سحب دائرة بيضاء أصغر أخرى.

أخيرًا ، يمكنك فقط سحب الدائرة البيضاء إلى منتصف الدائرة الخضراء.

إليك مقطع فيديو لهذا المفهوم قيد التنفيذ:

مرة أخرى ، إليك الألوان المطلوبة:

//أخضر
# 41B883
//أبيض
# FFFFFF

يجب أن لدينا الآن:

لاحظ أن موضع الرسومات لا يهم حقًا لأننا في النهاية سنقوم بذلك باستخدام CSS في مشروع Codepen الخاص بنا.

الخطوة الأخيرة هي تجميع وتسمية كل شكل مرة أخرى:

دفع

اسحب دائرة خضراء. ثم ، قم بإنشاء دائرة خضراء أخرى في الطريقة المفضلة لديك.

استخدم أداة النقل لسحب الدائرة الأصغر إلى مكانها الصحيح.

اللون الاخضر:

# 41B883

بمجرد الانتهاء من ذلك ، قم بتجميع الرسم ، وقم بتسمية الرسم ، ثم قم بتسمية كل شكل على حدة في هذا الرسم. ملاحظة: قمت بتسمية الدوائر Bush Circle Left و Bush Circle Right لأنهما يمتلكان نفس اللون.

يجب أن يكون لديك الآن تعليق هذه العملية.

الأشجار

يمكن صنع الشجرة الأولى ، شجرة اليسار ، بسحب مستطيل / خط أزرق رقيق.

اللون الأزرق:

# 35495E

بعد ذلك ، قم بتكرار هذا الشكل (CMD + G) مع الاستمرار في التحول أثناء سحبه إلى اليمين. سوف عقد التحول الاحتفاظ نفس الموقف العمودي.

من خلال قاعدة "شجرة اليسار" و "شجرة اليمين" ، دعونا نمضي قدمًا ونضيف دائرة متوسطة إلى "شجرة اليسار" ودائرة كبيرة إلى "شجرة اليمين" التي سنقوم بالتقاطها لتكون محورها أفقيًا على قواعد أشجارنا. هذا قد يستغرق بعض العبث في جميع أنحاء للحصول على الحجم المناسب والموقف.

اللون الاخضر:

# 41B883

أخيرًا ، نحتاج فقط إلى إضافة دائرة أصغر على شجرة اليسار.

الآن ، يمكننا الانتهاء من تجميع كل شجرة ، وتسميتها Tree Left و Tree Right ، وتسمية كل شكل داخل هذه الرسومات.

تصدير كـ SVGs

الخطوة التالية هي تصدير كل رسم كملف SVG.

للقيام بذلك ، ببساطة انقر فوق رسم ، انتقل إلى ملف → تصدير. ثم ، حدد رمز SVG واختر "تحديد بدون خلفية" ضمن المساحة. ضرب التصدير.

احفظ الملف محليًا مع تسميته [اسم الرسم] .svg (أي Bush.svg).

التحضير للاستيراد

افتح هذا القالب وشوكة: http://codepen.io/mikemang/pen/f8f28ae6adcc716d097a07a2bfb2d00d

كما ترون ، لقد قمت بالفعل بإنشاء صندوق والذي سيكون الحاوية للرسم الكامل لدينا.

استيراد SVGs

(التحديث 3/27/2017): أوصي باستخدام SVGOMG بدلاً من الطريقة التي أصفها أدناه لتحسين ملفات SVG والحصول على رمز SVG.

مع حفظ ملفات SVG ، فإن الخطوة التالية هي استيرادها إلى مشروع Codepen الخاص بنا.

أولاً ، نحتاج إلى الحصول على رمز SVG.

للقيام بذلك ، يمكننا سحب ملفات SVG إلى علامة تبويب Chrome. إليك مقطع من هذا الإجراء:

لنبدأ بعلامة التبويب VueConfLogo.svg.

انقر بزر الماوس الأيمن فوق الصورة وحدد عرض مصدر الصفحة.

نرى الآن رمز SVG الذي نحتاجه:

نحن فقط بحاجة إلى هذا:

شعار VueConf

 < g id = "VueConf-Logo">    

سأقدم ببساطة رموز SVG لبقية الرسومات لدينا.

شمس

 < g id = "Sun">  < ellipse id = "Sun-Circle-Green" cx = "44.28" cy = "43.2" rx = "26.88" ry = "26.224" style = "fill: #fff؛" />  

دفع

     

شجرة اليسار

      

شجرة الحق

     

دعنا نفرغ رمز SVG لشجرة Tree Right حتى نفهم معنى هذا الرمز.

باختصار ، علامة SVG بأكملها هي رسم / صورة واحدة. داخل الصورة ، كانت هناك أشكال مختلفة تم إنشاؤها لتشكيل تلك الصورة. في علامة SVG هذه ، لدينا علامات أخرى هي رمز للأشكال التي تم إنشاؤها.

في Tree Right ، كان لدينا دائرة واحدة ومستطيل واحد قمنا بتسميته قبل التصدير.

ألقِ نظرة مرة أخرى ولاحظ كيف أن القطع الناقص والمستطيل أعلى معرف الهوية بالاسم الذي حددناه:

بتسمية هذا قبل التصدير ، نحن نعرف الأشكال التي تشير إليها هذه العلامات.

إذا أردنا ذلك ، فبإمكاننا إضافة فئة إلى أي من علامات الأشكال ومعالجة خصائص CSS محددة لهذا الشكل المحدد في صورة Tree Right. بمعنى ، يمكننا أيضا إضافة الرسوم المتحركة لهذا الشكل واحد فقط.

رائع جدا ، هاه؟!

مع الاستمرار ، دعنا نضيف علامات SVG هذه إلى Codepen.

ابدأ برمز شعار VueConf والصقه مباشرةً تحت

. قم بإزالة قيم الطول والعرض في بداية علامة SVG وإضافة شعار فئة vueconf.

     

الآن ، الشعار هو الصحيح في وسط الحاوية. عادة ، يجب عليك إضافة حجم وموضع الفصل الذي أعطيته رمز SVG. ومع ذلك ، لقد كتبت بالفعل الطبقات لك في القالب.

كرر ما فعلناه للتو ، تأكد من استخدام اسم الفصل المناسب:

شمس
دفع
اليسار شجرة
شجرة الحق

عند الاكتمال ، لدينا الآن الرسومات الموضوعة في الأماكن الصحيحة:

الآن ، حان الوقت لإضافة الرسوم المتحركة.

تحطيم الرسوم المتحركة

لتسهيل الأمور ، قمت بإبطاء الرسوم المتحركة 8x حتى نتمكن من الحصول على فكرة جيدة عن كيفية عملها.

شاهد الفيديو واكتب ما تفعله الرسوم المتحركة بطريقة غير تقنية. تريد البحث عن الرسوم المتحركة وكذلك توقيت الرسوم المتحركة المختلفة لكل شكل في كل رسم.

وهنا ملاحظاتي:

شعار VueConf

ينزلق لأسفل من أعلى الشاشة ويتم توسيطه أفقيًا ، ويسقط مباشرةً بعد نقطة الوسط الرأسية والأفقية وينعكس على ارتفاع أعلى.

تقلب 180 درجة.

شمس

لم تتحرك من خارج الشاشة.

ينمو وينكمش.

دفع

لم تتحرك من خارج الشاشة.

بوش دائرة اليسار ينمو وينكمش.

Bush Circle Right يبدأ في النمو عندما ينمو Bush Circle Left بالكامل ثم ينكمش.

شجرة اليسار

تنمو قاعدة شجرة اليسار عموديا ثم تفرخ أسفل شجرة الدائرة اليسرى.

شجرة أسفل الدائرة اليسرى ينمو وينكمش. عند اكتماله ، يولد Tree Left Circle Top وينمو ويتقلص.

شجرة الحق

تنمو Tree Right Base عموديًا ثم تفرخ Tree Right Circle.

شجرة الحق دائرة ينمو وينكمش.

الآن ، نحتاج إلى تقديم ملاحظات حول توقيت ظهور كل رسم مقارنة بالرسومات الأخرى. (على سبيل المثال ، تفرخ قاعدة شجرة اليسار مباشرة بعد تدوير شعار VueConf)

وهنا ملاحظاتي:

اكتمال شعار VueConf.

قاعدة شجرة اليسار تفرخ وتبدأ في النمو.

مباشرة بعد نمو قاعدة شجرة اليسار بالكامل ، تفرخ قاعدة شجرة اليمين وتبدأ في النمو.

عندما تنمو Tree Right Base تمامًا ، يولد Bush Circle Left وينمو.

تشرق الشمس وتبدأ في النمو عندما تكتمل Tree Right.

مع هذه الملاحظات ، ينبغي أن يكون لدينا ما يكفي للبدء في كتابة الرسوم المتحركة CSS.

كتابة الرسوم المتحركة CSS

(التحديث 3/27/17): لماذا أستخدم الرسوم المتحركة لـ CSS وليس مكتبة للرسوم المتحركة مثل GreenSock؟ باختصار ، تعد الرسوم المتحركة لـ CSS أسهل في بدء الرسوم المتحركة. لا أرغب في تقديم مكتبة خارجية في منشور مدونة مفصل للغاية بالفعل. ومع ذلك ، فإنني أوصي GreenSock لأي شخص مرتاح لكيفية عمل الرسوم المتحركة في CSS. يمكنك حجز الوصول إلى هنا للحصول على دورة فيديو سأنشرها في تغطية الرسوم المتحركة لـ CSS و GreenSock و Mo.js و Anime.js باستخدام SVGs.

شعار VueConf

للبدء ، نحتاج إلى إكمال الرسوم المتحركة لشعار VueConf للقيام بما كان لدينا في ملاحظاتنا:

// 1
قم بالانزلاق لأسفل من أعلى الشاشة ، ثم يسقط إلى أسفل النقطة المركزية الرأسية والأفقية مباشرةً ثم يرتد أعلى.
// 2
تقلب 180 درجة.

سنكتب اثنين من الرسوم المتحركة المختلفة.

الجزء الأول يمكن أن نسميه slideInBounce. ها هي القشرة:

keyframes slideInBounce {

}

الآن ، نحتاج إلى إضافة تغييرات في خصائص CSS في نقاط محددة في الرسوم المتحركة.

keyframes slideInBounce {

0٪ {
    أفضل 100٪؛
  }
 70٪ {
    أعلى: 33 ٪ ؛
  }
  100٪ {
    أعلى: 25 ٪ ؛
  }
}

هنا ، نحدد أنه عند 0٪ من الرسوم المتحركة ، سيكون شعار VueConf أعلى الحاوية. عند 70٪ من الرسوم المتحركة ، نريدها أن تكون أقل قليلاً من وضعها النهائي. هذا يخلق تأثير الارتداد لأنه في 100 ٪ من الرسوم المتحركة سيعود إلى أعلى 0f 25 ٪ وهو وضع الراحة في وسط الحاوية الخاصة بنا.

يتعين علينا إضافة سطر واحد إضافي في كل نقطة من هذه النقاط.

في الرسوم المتحركة الأصلية ، يدخل شعار VueConf رأسًا على عقب من وضعه المريح. لذلك ، فإن الشعار يدخل في قلبه بالفعل وستقوم الرسوم المتحركة التالية بعكس الشعار مرة أخرى إلى وضعها الطبيعي.

نقلب الشعار رأسًا على عقب باستخدام التحويل: تدوير (-180deg).

keyframes slideInBounce {
  0٪ {
    تحويل: تدوير (-180deg) ؛
    أفضل 100٪؛
  }
 70٪ {
    تحويل: تدوير (-180deg) ؛
    أعلى: 33 ٪ ؛
  }
  100٪ {
    تحويل: تدوير (-180deg) ؛
    أعلى: 25 ٪ ؛
  }
}

استخدام السلبي سيكون له معنى بمجرد أن نرى هذا في العمل.

لتشغيل هذه الرسوم المتحركة ، نحتاج إلى إضافة بيان رسوم متحركة في فئة شعار vueconf.

.vueconf-logo {
الموقف: مطلق ؛
الارتفاع: 50٪
العرض: 50 ٪ ؛
أعلى: 25 ٪ ؛
اليسار: 25 ٪ ؛
الرسوم المتحركة: slideInBounce 1s 1؛
}

هنا ، لدينا ثلاثة أجزاء من بيان الرسوم المتحركة.

  1. اسم الرسوم المتحركة (slideInBounce)
  2. مدة الرسوم المتحركة (1s)
  3. عدد التكرارات (1)

الآن ، يجب أن نرى الرسوم المتحركة تعمل.

بعد ذلك ، دعونا نضيف رسمًا متحركًا آخر يسمى flip حتى يدور الشعار في اتجاه عقارب الساعة في وضعه المريح.

تضمين التغريدة
  0٪ {
    تحويل: تدوير (-180deg) ؛
  }
  100٪ {
    تحويل: تدوير (0deg) ؛
  }
}

نحدد الرسوم المتحركة تماما مثل السابق. هنا ، نريد فقط إجراء تغيير واحد من 0٪ إلى 100٪. نريد أن يدور الشعار 180 درجة من -180 درجة إلى 0 درجة.

يمكننا بعد ذلك إضافة بيان رسوم متحركة آخر إلى vueconf-logo:

.vueconf-logo {
الموقف: مطلق ؛
الارتفاع: 50٪
العرض: 50 ٪ ؛
أعلى: 25 ٪ ؛
اليسار: 25 ٪ ؛
الرسوم المتحركة: slideInBounce 1s 1 ،
الوجه 0.5s 1s 1 ؛
}

بإضافة فاصلة إلى البيان السابق ، يمكننا ربط سلسلة أخرى.

نحن ندعو لدينا الرسوم المتحركة الوجه لمدة 0.5 ثانية. 1s يشير إلى تأخير الرسوم المتحركة.

دعونا نفكر في هذا.

لدينا بيانان للرسوم المتحركة الآن. ومع ذلك ، نريد تشغيل الوجه بعد اكتمال slideInBounce. إذا استمر slideInBounce لمدة ثانية واحدة ، عندئذٍ يجب تأجيل التقلب 1 ثانية.

أخيرًا ، حددنا مرة أخرى تكرار 1.

لقد انتهينا الآن من شعار VueConf.

شجرة اليسار

شجرة اليسار قاعدة

أولاً ، دعنا نراجع ملاحظاتنا:

تنمو قاعدة شجرة اليسار عموديا ثم تفرخ أسفل شجرة الدائرة اليسرى.

نظرًا لأن كل رسومات أخرى تنتظر أن يكتمل شعار VueConf قبل ظهورها ، فسوف يتعين التعامل معها بطريقة مختلفة.

هناك طرق يمكننا من خلالها التمسك فقط برسومات CSS المتحركة ، ولكن يمكننا أيضًا استخدام Vue.js التي تبدو مناسبة.

قبل أن نضيف البدء في تنفيذ شفرة Vue.js الخاصة بنا ، دعنا نلخص كيف سنحتاج إلى التعامل مع الرسوم المتحركة لـ Tree Left حيث يتعين عليها انتظار انتهاء شعار VueConf.

  1. سنستخدم العرض الشرطي الخاص بـ Vue ، بحيث يتم عرض Tree Left Base و Tree Left Circle Bottom و Tree Left Circle Top فقط إذا تم تعيين العلم على true
  2. سيتم تعيين العلامة التي تتحكم في تقديم "قاعدة الشجرة اليسرى" على "صحيح" بعد ثانيتين لانتظار انتهاء شعار VueConf.
  3. باستخدام الربط الفصلي ، ستظهر Tree Left Base وتنمو رأسياً حتى تكتمل الرسوم المتحركة.
  4. باستخدام نفس التقنيات ، سيظهر Tree Left Circle Bottom عند اكتمال Tree Left Base وسيكون له رسم متحرك ينمو ويتقلص.
  5. بعد ذلك ، سنفعل نفس الشيء مع Tree Left Circle Top إلا أنه سيبدأ بعد اكتمال Tree Left Circle Bottom.

لنبدأ بإضافة غلاف مثيل Vue جديد يسمى التطبيق. لقد قمت بالفعل بتضمين البرنامج النصي Vue.js في القالب.

var app = vue new ({
  el: "#app" ،
  البيانات: {
    
  }،
  أساليب: {
    
  }
})

الآن ، دعنا نضيف div بمعرف التطبيق حتى نتمكن من إقامة اتصال بين HTML ونسخة Vue هذه.

رائع. الآن ، دعونا نضيف الأعلام الموجودة في بياناتنا والتي ستكون للعرض الشرطي لكل شكل في Tree Left.

var app = vue new ({
  el: "#app" ،
  البيانات: {
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ
  }،
  أساليب: {
    
  }
})

لقد قمنا بتعيين كل هذه الأعلام على "خطأ" لأننا نريد ألا يظهر كل شكل افتراضيًا.

بعد ذلك ، نحتاج فقط إلى إضافة v-if = "[اسم العلم]" لكل شكل في HTML الخاص بنا ، لذلك نجعل الاتصال مع مثيل Vue لتقديم الشكل بشكل مشروط.

 
  

لم يعد بإمكاننا رؤية شجرة اليسار كما هو مخطط لها.

رائع!

الخطوة التالية هي إضافة المنطق لتعيين showTreeLeftBase على "صحيح" بعد ثانيتين (عند اكتمال شعار VueConf). للقيام بذلك ، سوف نستخدم خطافات دورة حياة Vue.

مع مثال بسيط ، يعتمد العرض الشرطي عادةً على إدخال المستخدم. على سبيل المثال ، قد يتم استدعاء وظيفتي بنقرة زر واحدة لتعيين علامة على "صحيح" وسبب ظهور شيء ما.

في المثال الخاص بنا ، نريد استدعاء دالة من شأنها أن تحدد showTreeLeftBase وتتسبب في تقديم Tree Left Base بعد ثانيتين (بدون إدخال مستخدم).

للقيام بذلك ، نضيف دورة الحياة التالية:

var app = vue new ({
  el: "#app" ،
  البيانات: {
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ
  }،
  أساليب: {
    
  }،
  خلقت () {
    / / استدعاء دالة من شأنها أن تحدد setTreeLeftBase إلى صحيح
  }
})

الطريقة التي تعمل بها دورة الحياة هذه هي أنه يمكننا استدعاء وظيفة عند إنشاء التطبيق لدينا. من خلال القيام بذلك ، يتم تشغيل وظيفة من خلال دورة حياة ، عند إنشاء التطبيق ، بدلاً من إدخال المستخدم.

دعنا نجعل دالة تسمى toggleTreeLeftBase ونضيف المكالمة في دورة الحياة التي تم إنشاؤها:

var app = vue new ({
  el: "#app" ،
  البيانات: {
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ
  }،
  أساليب: {
    toggleTreeLeftBase: function () {
      
    }
  }،
  خلقت () {
    this.toggleTreeLeftBase ()
  }
})

بعد ذلك ، دعونا نضيف السطر الذي يضبط setTreeLeftBase على "صحيح" في هذه الوظيفة الجديدة.

var app = vue new ({
  el: "#app" ،
  البيانات: {
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ
  }،
  أساليب: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = صحيح
    }
  }،
  خلقت () {
    this.toggleTreeLeftBase ()
  }
})

تظهر قاعدة شجرة اليسار الآن.

بعد ذلك ، نحتاج إلى إضافة المنطق بحيث لا يتم استدعاء الوظيفة حتى تمر ثانيتان بعد دورة الحياة التي تم إنشاؤها منذ أن ينتهي شعار VueConf.

يمكننا استخدام setTimeout لمثل هذا:

خلقت () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    ، 2000)
  }

ملاحظة: قد يبدو هذا بناء جملة غريبًا لأنه ES6 (بناء جملة JavaScrip الحديث). "() =>" مجرد اختصار لـ "function ()".

يعمل setTimeout على التأخير عند تشغيل التعليمات البرمجية داخلها. في حالتنا ، ستسمى this.toggleTreeLeftBase () 2000 مللي ثانية (2 ثانية) بعد الإنشاء ، مما يعطينا التأخير الثاني لندع شعار VueConf ينتهي.

يمكننا أن نرى الآن تفرخ قاعدة شجرة اليسار بعد انتهاء شعار VueConf.

حلو!

نريد أن قاعدة شجرة اليسار لديها الرسوم المتحركة ، ولكن. توفر Vue بعض الطرق التي يمكننا من خلالها القيام بذلك. أحد الخيارات هو استخدام تأثيرات الانتقال التي تسمح لنا بتحديد الرسوم المتحركة لـ CSS عندما يظهر شيء يتم تقديمه بشكل مشروط. أنا أتحدث عن هذا بالتفصيل الطويل في دورة الفيديو الخاصة بي. إنه الخيار الأفضل ، ومع ذلك ، أعتقد أنه من الأسهل الانتقال مع خيارنا الآخر نظرًا لوجود الكثير في هذا المنشور بالفعل.

الخيار الثاني الذي سنستخدمه هو الربط الطبقي مع Vue.js. باستخدام ربط الفصل ، يمكننا التحكم ديناميكيًا في الفئات ، أو الفئات ، النشطة حاليًا على div في HTML الخاص بنا.

إليك ما يتعين علينا القيام به لإنجاز هذا الأمر:

  1. اكتب فصلاً ستنمو فيه رسوم متحركة تحتوي على قاعدة شجرة اليسار عموديًا في تكرار واحد.
  2. في نفس الوظيفة التي تفرخ بها Tree Left Base ، سنضيف الفئة مع رسم متحرك ليكون نشطًا في div Left Base div.

من خلال القيام بذلك ، سوف نحصل على الرسوم المتحركة التي نحتاجها.

أولاً ، دعنا نكتب غلاف الفصل الذي سيسمي الرسوم المتحركة. يمكننا أن نسميها growActive.

.growActive {
  
}

ثانياً ، دعنا نعرّف غلاف الرسوم المتحركة التي سوف نسميها تنمو.

@ إطارات مفتاحية تنمو {
  
}

نريد أن تنمو Tree Left Base عموديًا ، ومن 0٪ إلى الرسوم المتحركة إلى 100٪ في الرسوم المتحركة ، نحتاج إلى تغيير الارتفاع من 0٪ إلى 100٪.

@ إطارات مفتاحية تنمو {
  0٪ {
    الارتفاع: 0٪
  }
  100٪ {
    الارتفاع: 100 ٪ ؛
  }
}

بعد ذلك ، يمكننا إضافة بيان الرسوم المتحركة في growActive لاستدعاء هذه الرسوم المتحركة مرة واحدة. يجب أن يعمل النمو مرة واحدة لمدة 0.5 ثانية ، لذلك نحن نفعل:

.growActive {
  الرسوم المتحركة: تنمو 0.5s 1 ؛
}

الآن ، دعنا نخبر HTML الخاص بنا أننا نريد أن يتحكم مثيل Vue في الفصل النشط. سوف نستخدم v-bind: class.

في الكود أعلاه ، أضفنا v-bind: class = "TreeLeftBaseClass" إلى علامة الشكل لقاعدة Tree Left Base الموجودة في رمز SVG لـ Tree Left. الآن ، سيتم تحديد الفئة النشطة على هذا الشكل بالبيانات الموجودة في مثيل Vue الخاص بنا والتي تسمى treeLeftBaseClass ، والتي نحتاج إلى تعريفها.

var app = vue new ({
  el: "#app" ،
  البيانات: {
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""
  }،
  أساليب: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = صحيح
    }
  }،
  خلقت () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    ، 2000)
  }
})

الآن ، لدى Tree Left Base فئة يتحكم بها treeLeftBaseClass في مثيل Vue الخاص بنا. لم نقم بتعيين أي فئة بشكل افتراضي لأننا نريد فقط إضافة الفئة عند تحميل Tree Left Base.

الخطوة الأخيرة لـ Tree Left Base هي تغيير treeLeftBaseClass داخل دالة toggleTreeLeftBase والتي يتم فيها تبديل Tree Left Base.

var app = vue new ({
  el: "#app" ،
  البيانات: {
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""
  }،
  أساليب: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = صحيح
      this.treeLeftBaseClass = "growActive"
    }
  }،
  خلقت () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    ، 2000)
  }
})

لدينا الرسوم المتحركة تعمل الآن باستخدام ملزمة الفصل!

هناك مشكلة واحدة بسيطة. نريد أن ينمو من أسفل حتى نحتاج إلى ضبط الرسوم المتحركة الخاصة بنا بسرعة.

@ إطارات مفتاحية تنمو {
  0٪ {
    تحويل: يترجم (100 ٪) ؛
    
  }
  100٪ {
    convert: translatey (0٪) ؛
  }
}

باستخدام هذه الرسوم المتحركة ، تنمو الآن من الأسفل.

سأعترف بأنه من المغري المضي قدماً لأن هذا سيتطلب بعض الشرح حول سبب نجاح ذلك. ومع ذلك ، أشدد دائمًا على أنني سأبذل قصارى جهدي مطلقًا لعدم وضع افتراضات في التدريس. لذلك ، سأذهب إلى الأمام وأشرح ذلك.

يتم استخدام translateY لتحريك شيء لأعلى أو لأسفل (فكر في الإحداثي y على الرسم البياني). إليك نفس الرسوم المتحركة التي يتم تطبيقها على مستطيل في مشروع مختلف:

يبلغ ارتفاع المستطيل الأسود 20٪ (بالنسبة إلى النافذة بأكملها). translateY (100٪) تدفعه لأسفل بنسبة 100٪ من طوله ، أي 20٪. يعود إلى ترجمة (0٪) ، وليس الضغط على الإطلاق ، في نهاية الرسوم المتحركة. لا يوجد تأثير متزايد ولكن تأثير متغير.

فلماذا هذا العمل في مثالنا؟

دعنا نتعرف على شجرة اليسار. أضف حدًا إلى الفصل الأيسر للأشجار:

.tree يسار {
  الموقف: مطلق ؛
  الارتفاع: 25 ٪ ؛
  العرض: 30 ٪ ؛
  اليسار: 0 ٪ ؛
  أسفل: 25 ٪ ؛
  الحدود: 3px الأحمر الصلبة.
}

نرى أن شجرة اليسار داخل صندوق.

تغيير عرض .tree اليسار إلى 20 ٪.

يتحكم الارتفاع والعرض في المربع المحيط بشجرة اليسار.

ما الذي يجري هنا؟

تمثل SVGs رسومات متجهة قابلة للتحجيم. باختصار ، لا يعمل مثل الصورة التقليدية التي يمكنك فرض ارتفاع وعرض محددين. لن تتمكن من الحفاظ على الارتفاع الصحيح تلقائيًا حسب نسبة العرض.

كما في الصورة أعلاه ، يمكنك الحصول على صورة في الأصل 200 × 200 بكسل يمكن تحويلها إلى حجم مختلف دون الحفاظ على النسبة. بدلاً من ذلك ، فإنه قادر على توسيع نطاق والحفاظ عليه.

للحصول على فهم مفصل لهذا ، سأحاول أن أوصي بهذا المقال الرائع من CSS-Tricks.

كل ما تحتاج إلى فهمه لفهم الرسوم المتحركة translateY لدينا هو وجود مربع حول Tree Left لأغراض التحجيم. إذا دفعنا شجرة اليسار إلى أسفل الصندوق ، فلن نتمكن من رؤيتها.

مع وضع ذلك في الاعتبار ، دعنا نزيل الحدود ونعيد فحص الرسوم المتحركة المتنامية:

@ إطارات مفتاحية تنمو {
  0٪ {
    تحويل: يترجم (100 ٪) ؛
    
  }
  100٪ {
    convert: translatey (0٪) ؛
  }
}

هنا ، ندفع Tree Left Base لأسفل بنسبة 100٪ ، نظرًا للترجمة Y (100٪) ، لذلك فهي أقل تمامًا من العلبة وغير مرئية.

عندما ينزلق للخلف ، بسبب الترجمة (0٪) ، ينتقل من أسفل المربع تمامًا إلى الصندوق. حتى يتم الوصول إلى الترجمة الكاملة لـ Y بنسبة 100٪ ، سيكون هناك جزء من Tree Left Base يتم قطعه. لهذا السبب ، لدينا تأثير "نمو" من أسفل إلى أعلى من خلال "الكشف" عن قاعدة شجرة اليسار على مدار الفترة الزمنية.

حسنا. لنأخذ نفسًا عميقًا ونلخص. لدينا الآن رسم متحرك يعمل لـ Tree Left Base عندما يظهر.

كنا قادرين على القيام بذلك عن طريق رش تجسيد Vue الملزم والشرطي على الرسوم المتحركة CSS الخاصة بنا.

شجرة أسفل الدائرة اليسرى

والخبر السار هو أنه مع خروج "قاعدة الشجرة اليسرى" ، يجب أن يكون كل شيء آخر سهل الفهم والاستكمال.

دعنا ندفع ونضيف أسفل شجرة الدائرة اليسرى.

أولاً ، دعنا نراجع ملاحظاتنا على الرسوم المتحركة.

شجرة أسفل الدائرة اليسرى ينمو وينكمش.

نحتاج أيضًا أن نضع في اعتبارنا التوقيت. يجب أن يظهر هذا بعد اكتمال الرسوم المتحركة Tree Left Base. لنبدأ بمجرد الظهور في الوقت المحدد. بعد ذلك ، يمكننا إضافة الرسوم المتحركة.

يمكننا استخدام نهج مماثل لتأخير الرسوم المتحركة باستخدام setTimeout. هذه المرة ، ومع ذلك ، فإن setTimeout سيكون داخل toggleTreeLeftBase

أساليب: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = صحيح
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
      
      ، 500)
    }
  }،

إذا كنت تتذكر ، يتم استدعاء هذه الوظيفة في دورة حياة الإنشاء التي تم تأخيرها لمدة ثانيتين باستخدام setTimeout:

خلقت () {
    setTimeout (() => {
      this.toggleTreeLeftBase ()
    ، 2000)
  }

عندما يتم استدعاء هذه الوظيفة ، تفرخ قاعدة شجرة اليسار وتعطي فصلاً مع رسم متحرك يدوم 0.5 ثانية.

لذلك ، من خلال إضافة setTimeout داخل toggleTreeLeftBase ، يمكننا استدعاء دالة تسمى toggleTreeLeftCircleBottom بعد 0.5 ثانية (500 مللي ثانية) للسماح للرسوم المتحركة Tree Left Base بالانتهاء.

دعنا نضيف الدعوة إلى toggleTreeleftCircleBottom التي سنكتبها قريبًا.

أساليب: {
    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = صحيح
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
      ، 500)
    }
  }،

بعد ذلك ، دعنا نضيف toggleTreeLeftCircleBottom والمنطق حتى نتمكن من رؤية أسفل الشجرة اليسرى.

toggleTreeLeftCircleBottom: function () {
  this.showTreeLeftCircleBottom = صحيح
}

يجب أن يظهر الآن أسفل دائرة الشجرة اليسرى بعد انتهاء قاعدة شجرة اليسار كما كنا نأمل.

الآن ، نحن بحاجة إلى التعامل مع الرسوم المتحركة.

سوف نستخدم مرة أخرى ملزمة الصف.

أولاً ، دعنا نضيف v-bind: class في علامة شكل Tree Left Circle Bottom في HTML الخاص بنا.

ثانيًا ، يمكننا إضافة بعض البيانات إلى مثيل Vue الخاص بنا والذي سيعين الفصل.

البيانات: {
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""،
    treeLeftCircleBottomClass: ""
  }،

الآن ، نجري الاتصال بحيث يتم التحكم في فئة Tree Left Circle Bottom بواسطة treeLeftCircleBottomClass. لا نريد أن نبدأ أي فصل ، وسنضيف فصلًا يحتوي على رسوم متحركة في نفس الوظيفة عندما نبدأ تشغيلها. دعونا نفعل هذا الآن وتعيين فئة "growShrinkActive".

toggleTreeLeftCircleBottom: function () {
  this.showTreeLeftCircleBottom = صحيح
  this.treeLeftCircleBottomClass = "growShrinkActive"
}

بعد ذلك ، دعونا ننشئ فئة تسمى growShrink في CSS لدينا.

.growShrinkActive {
  
}

والخطوة التالية هي تحديد الرسوم المتحركة التي تسمى growShrink.

تضمين التغريدة
  0٪ {
    تحويل الأصل: مركز.
    تحويل: مقياس (0) ؛
  }
  50٪
    تحويل الأصل: مركز.
    تحويل: مقياس (1.3) ؛
  }
  100٪
    تحويل الأصل: مركز.
    تحويل: مقياس (1) ؛
  }
}

هنا ، نستخدم convert: scale ([scale scale]) للتعامل مع تأثير النمو والانكماش.

نحن نستخدم تحويل أصل: center لتحديد أننا نريد أن ينمو ويتقلص من وسط الدائرة ، مثل الرسوم المتحركة التي نحاول تكرارها.

للاطلاع على هذا ، دعنا نضيف بيان الرسوم المتحركة إلى growShrinkActive.

.growShrinkActive {
  الرسوم المتحركة: growShrink 0.5s 1؛
}

في بيان الرسوم المتحركة هذا ، ندعو growShrink إلى آخر 0.5 ثانية وللعمل مرة واحدة فقط.

يمكننا أن نرى الآن أنها تعمل كما هو متوقع.

فوردعالم! شجرة أسفل الدائرة اليسرى كاملة!

شجرة اليسار دائرة أعلى

من خلال تعلم كيفية التعامل مع Tree Left Base و Tree Left Circle Bottom ، فإن بقية هذه العملية أسهل وأسرع في إكمالها.

سيتم التعامل مع Tree Left Circle Top تمامًا مثل Tree Left Circle Bottom.

التغيير الوحيد هو أنه ينتظر "أسفل شجرة الدائرة اليسرى" حتى النهاية.

أولاً ، نضيف setTimeout ستستدعي وظيفة تُسمى toggleTreeLeftCircleTop.

toggleTreeLeftCircleBottom: function () {
   this.showTreeLeftCircleBottom = صحيح
   this.treeLeftCircleBottomClass = "growShrinkActive"
   setTimeout (() => {
    this.toggleTreeLeftCircleTop ()
   ، 500)
}

ثانياً ، نحدد الوظيفة التي اتصلنا بها للتو ونضيف المنطق للتبديل على Tree Left Circle Top.

toggleTreeLeftCircleTop: function () {
  this.showTreeLeftCircleTop = صحيح
}

بعد ذلك ، نضيف v-bind: class إلى علامة الشكل في HTML الخاص بنا.

الآن ، سيتعين علينا تعريف treeLeftCircleTop في مثيل Vue الخاص بنا وتعيين فصل دراسي لـ Tree Left Circle Top.

البيانات: {
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""،
    treeLeftCircleBottomClass: ""،
    treeLeftCircleTopClass: ""
}،

كما فعلنا من قبل ، دعنا نكتب المنطق في toggleTreeLeftCircleTop لتعيين growShrinkActive.

toggleTreeLeftCircleTop: function () {
  this.showTreeLeftCircleTop = صحيح
  this.treeLeftCircleTopClass = "growShrinkActive"
}

لاحظ ، لقد حددنا بالفعل growShrinkActive لـ Tree Left Circle Bottom. نحن نفعل هذا لأنه هو نفس الرسوم المتحركة. سيتم تطبيقه فقط في وقت مختلف.

WOAH! يجب أن نكمل مع شجرة اليسار دائرة الأعلى.

شجرة الحق

نظرًا لأننا أكملنا شجرة اليسار ، ستكون شجرة اليمين متطابقة تقريبًا. سيكون الأمر أسهلًا نظرًا لأن لدينا دائرة واحدة فقط. لهذا السبب ، سأقوم بزيادة السرعة وأقل شمولاً في التفاصيل.

قاعدة شجرة الحق

دعنا نبدأ بالتحقق من الملاحظات الخاصة بتوقيتنا في قاعدة الشجرة الصحيحة.

مباشرة بعد نمو قاعدة شجرة اليسار بالكامل ، تفرخ قاعدة شجرة اليمين وتبدأ في النمو.

أولاً ، نحتاج إلى إعداد تجسيد مشروط لأننا نريد تقديم هذا عندما تنمو Tree Left Base بالكامل.

سنحتاج إلى تحديد العلامة للتعامل مع ذلك في بيانات مثيل Vue لدينا ، كما أضفت العلم إلى Tree Right Circle.

البيانات: {
    // شجرة الاشياء اليسرى
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""،
    treeLeftCircleBottomClass: ""،
    treeLeftCircleTopClass: ""،
    // treeRight الاشياء
    showTreeRightBase: false ،
    showTreeRightCircle: خطأ
  }،

بعد ذلك ، نحتاج إلى إعلام HTML الخاص بنا بأن Vue.js ستتعامل مع العرض.

نقوم بذلك عن طريق إضافة v-if = "[اسم العلم]" في كل من علامات شكل Tree Right Base و Tree Right Circle.

أصبح إصدار "شجرة الشجرة" الآن أطول منذ أن تم تعيين الأعلام على "خطأ".

في احسن الاحوال. بعد ذلك ، نحتاج إلى التعامل مع وجود Tree Right Base وتطبيق الرسوم المتحركة عند ظهورها.

في ملاحظاتنا ، ذكرنا أن قاعدة الشجرة اليمنى تفرخ بعد نمو قاعدة الشجرة اليسرى. هذا هو الوقت نفسه الذي يظهر فيه Tree Left Circle Bottom. لذلك ، يمكننا استدعاء دالة للتبديل على Tree Right Base في نفس setTimeout التي تستدعي الوظيفة للتبديل على Tree Left Circle Bottom.

    toggleTreeLeftBase: function () {
      this.showTreeLeftBase = صحيح
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
        this.toggleTreeRightBase ()
      ، 500)
    }،

بعد ذلك ، نكتب toggleTreeRightBase والمنطق للتبديل على Tree Right Base.

toggleTreeRightBase: function () {
  this.showTreeRightBase = صحيح
}

يتم تطبيق GrowShrinkActive للفئة على قاعدة الشجرة اليسرى عندما تفرخ. ثم سنفعل الشيء نفسه بالنسبة لـ Tree Right Base.

أولاً ، دعنا نخبر HTML الخاص بنا أن Vue.js ستتعامل مع الفصل المخصص لـ Tree Right Base.

ثانيًا ، سنقوم بتعريف treeRightBaseClass في بيانات مثيل Vue الخاصة بنا.

البيانات: {
    // شجرة الاشياء اليسرى
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""،
    treeLeftCircleBottomClass: ""،
    treeLeftCircleTopClass: ""،
    // treeRight الاشياء
    showTreeRightBase: false ،
    showTreeRightCircle: خطأ ،
    treeRightBaseClass: ""
  }،

ثم ، نحن بحاجة إلى تعيين فئة growShrinkActive عندما تفرخ شجرة اليمين.

  toggleTreeRightBase: function () {
    this.showTreeRightBase = صحيح
    this.treeRightBaseClass = "growShrinkActive"
  }

لدينا الآن لدينا قاعدة شجرة الصحيح تعمل بشكل كامل.

شجرة الدائرة اليمنى

مثل أسفل شجرة الدائرة اليسرى ، نحتاج إلى هذا لتفرخ مباشرة بعد نمو القاعدة. لذلك ، يمكننا إضافة setTimeout في toggleTreeRightBase الذي سيقوم بإجراء مكالمة إلى دالة تسمى toggleTreeRightCircle عندما تنتهي Tree Right Base من الرسوم المتحركة.

    toggleTreeRightBase: function () {
      this.showTreeRightBase = صحيح
      this.treeRightBaseClass = "growShrinkActive"
      setTimeout (() => {
         this.toggleTreeRightCircle ()
      ، 500)
    }

بعد ذلك ، يمكننا تحديد toggleTreeRightCircle وتضمين المنطق لتبديل Tree Right Circle on.

toggleTreeRightCircle: function () {
  this.showTreeRightCircle = صحيح
}

تظهر لدينا شجرة الحق دائرة الآن في الوقت المحدد.

للإنهاء ، سنقوم بتشغيل ربط الفصل مع Vue.js في HTML الخاص بنا ، ونحدد البيانات التي ستعين الفصل النشط ، ثم نقوم بتعيين growShrinkActive في نفس الوظيفة التي يتم تبديلها على Tree Right Circle.

لتشغيل ربط الصف مع Vue.js في HTML الخاص بنا ، يمكننا القيام بما يلي:

بعد ذلك ، نحدد هذه البيانات لتعيين الفصل النشط.

البيانات: {
    // شجرة الاشياء اليسرى
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""،
    treeLeftCircleBottomClass: ""،
    treeLeftCircleTopClass: ""،
    // treeRight الاشياء
    showTreeRightBase: false ،
    showTreeRightCircle: خطأ ،
    treeRightBaseClass: ""،
    treeRightCircleClass: ""
}،

لهذه الغاية ، يمكننا ضبط treeRightCircleClass للنموالسرعة النشطة في toggleTreeRightCircle.

    toggleTreeRightCircle: function () {
      this.showTreeRightCircle = صحيح
      this.treeRightCircleClass = "growShrinkActive"
    }

تماما مثل ذلك ، يتم شجرة الحق!

دفع

أصعب الأجزاء ، الأشجار ، تتم. الآن ، يجب أن يكون لدينا فهم للعملية. لهذا السبب ، سأقوم فقط بتقديم الكود لكل خطوة مع بعض الأسطر الوصفية للأدغال والشمس الباقية.

لنراجع الملاحظات الخاصة ببوش.

بوش دائرة اليسار ينمو وينكمش.
Bush Circle Right يبدأ في النمو عندما ينمو Bush Circle Left بالكامل ثم ينكمش.
//توقيت
عندما تنمو Tree Right Base تمامًا ، يولد Bush Circle Left وينمو.

بوش دائرة اليسار

الخطوة 1: إضافة التقديم الشرطي (سيشمل أيضًا دائرة بوش إلى اليمين)

HTML

 <

JS

البيانات: {
    // شجرة الاشياء اليسرى
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""،
    treeLeftCircleBottomClass: ""،
    treeLeftCircleTopClass: ""،
    // treeRight الاشياء
    showTreeRightBase: false ،
    showTreeRightCircle: خطأ ،
    treeRightBaseClass: ""،
    treeRightCircleClass: ""،
    // شجيرة الاشياء
    showBushCircleLeft: ""،
    showBushCircleRight: ""
}،

الخطوة 2: استدعاء toggleBushCircleLeft من setTimeout في toggleTreeBaseLeft. إضافة وظيفة مع المنطق للتبديل على.

toggleTreeLeftBase: function () {
      this.showTreeLeftBase = صحيح
      this.treeLeftBaseClass = "growActive"
      setTimeout (() => {
        this.toggleTreeLeftCircleBottom ()
        this.toggleTreeRightBase ()
        this.toggleBushCircleLeft ()
      ، 500)
    }،
//في وقت لاحق
toggleBushCircleLeft: function () {
  this.showBushCircleLeft = صحيح
}،

الخطوة 3: إضافة ربط فئة في HTML و JS. تعيين فئة GrowShrinkActive في toggleBushCircleLeft.

HTML

JS

البيانات: {
    // شجرة الاشياء اليسرى
    showTreeLeftBase: false ،
    showTreeLeftCircleBottom: false ،
    showTreeLeftCircleTop: خطأ ،
    treeLeftBaseClass: ""،
    treeLeftCircleBottomClass: ""،
    treeLeftCircleTopClass: ""،
    // treeRight الاشياء
    showTreeRightBase: false ،
    showTreeRightCircle: خطأ ،
    treeRightBaseClass: ""،
    treeRightCircleClass: ""،
    // شجيرة الاشياء
    showBushCircleLeft: ""،
    showBushCircleRight: ""،
    bushCircleLeftClass: ""
  }،
// تحت الأساليب
 toggleBushCircleLeft: function () {
   this.showBushCircleLeft = صحيح
   this.bushCircleLeftClass = "growShrinkActive"
}،

يجب أن يكون بوش اليسار الدائرة الآن تعمل تماما كما نريد!

بوش دائرة اليمين

نظرًا لأن Bush Circle Right هي نفس الخطوات والمنطق بالضبط ، سأقوم بكل بساطة بتقديم كافة تحديثات التعليمات البرمجية.

HTML

JS

    // تحت البيانات
    // شجيرة الاشياء
    showBushCircleLeft: ""،
    showBushCircleRight: ""،
    bushCircleLeftClass: ""،
    bushCircleRightClass: ""
    //أساليب
    toggleBushCircleLeft: function () {
      this.showBushCircleLeft = صحيح
      this.bushCircleLeftClass = "growShrinkActive"
      / / انتظر 0.25 ثانية لأننا نريد أن يفرز Bush Circle Right عندما ينمو Bush Circle Left
     setTimeout (() => {
        this.toggleBushCircleRight ()
      ، 250)
    }،
    toggleBushCircleRight: function () {
      this.showBushCircleRight = صحيح
      this.bushCircleRightClass = "growShrinkActive"
    }،

تماما مثل ذلك ، يتم بوش مع بقاء أحد فقط! أخيرا!

شمس

الشمس هي أسهل الرسوم المتحركة. بدلاً من الاضطرار إلى تقديم كل شكل محدد وتحريكه بشكل مشروط ، يمكننا فقط تطبيقه على الرسم بأكمله لأنه لا يحتوي على رسوم متحركة مميزة وتوقيت لأشكاله.

الشمس تنمو وتنكمش.
//توقيت
تشرق الشمس وتبدأ في النمو عندما تكتمل Tree Right.

الخطوة 1: إضافة التقديم الشرطي

HTML

JS

// تحت البيانات
// أشعة الشمس
showSun: خطأ

الخطوة 2: إنشاء وظيفة للتبديل على أحد. يجب استدعاء هذا في setTimeout جديد أسفل toggleTreeRightCircle نظرًا لأن Sun تحتاج إلى الظهور عند نمو Tree Right Circle.

   toggleTreeRightCircle: function () {
      this.showTreeRightCircle = صحيح
      this.treeRightCircleClass = "growShrinkActive"
      setTimeout (() => {
        this.toggleSun ()
      }، 250)
      / / ننتظر 250 ثانية لأن هذه هي النقطة عندما تنمو Tree Right Circle وليس عندما تنتهي
    }،
   //في وقت لاحق
   toggleSun: function () {
    this.showSun = صحيح
   }

الخطوة 3: إضافة فئة ملزمة وتعيين growShrinkActive مباشرة بعد أن يتم تبديل Sun. سألاحظ أيضًا أن الطبقة الملزمة هنا ستكون مختلفة قليلاً. نظرًا لأننا نطبق هذا على الشمس بأكملها ، فهناك بالفعل فئة صن في علامة SVG. ستتم إزالة هذا الوضع ، وستكون الشمس هي الفئة المعينة افتراضيًا. نظرًا لأن لدينا فئات متعددة في CSS ، فسيتم تعيين كل من شمس الفئة و growShrinkActive مباشرةً بعد ظهور Sun.

HTML

JS

//البيانات
// أشعة الشمس
showSun: خطأ ،
sunClass: "sun"
//أساليب
toggleSun: function () {
  this.showSun = صحيح
  this.sunClass = "sun growShrinkActive"
}

حبوب فاصولياء رائعة! لقد أكملنا الرسوم المتحركة!

العرض / الكود النهائي: http://codepen.io/mikemang/pen/JWNOrr/

أفكار ختامية

بعد 15 ساعة من كتابة هذا المنشور ، أدرك أن هذا ليس نسخة طبق الأصل مثالية والكثير لتستوعبها. آمل أن لا تزال هناك بعض القطع والقطع المفيدة التي استخلصتها من قراءة هذا.

إذا كنت تبحث عن مزيد من التدريب باستخدام الرسوم المتحركة ، فإنني أشجعك على القيام بما قمنا به في هذا المنشور. كسر الرسوم المتحركة واستكمالها قطعة قطعة. أوصي بشدة بالبدء بمثال أسهل والتقدم.

إذا كنت تبحث عن رسوم متحركة حقيقية وعملية لتحطيمها وتكرارها ، فإنني أوصي بـ Product Hunt. يحتوي Product Hunt على الكثير من الارتباطات بالصفحات المقصودة التي لا بد أن تكون حديثة وتستخدم على الأقل بعض الرسوم المتحركة.

إذا كنت تبحث عن شيء أكثر تنظيماً ، فيمكنك حجز الوصول إلى دورة SVG القادمة التي ستغطي كل شيء بدءًا من أساسيات SVG وحتى إنشاء رسومات متجهية مفصلة باستخدام Affinity Designer ، وجميع الطرق لتنشيط SVGs باستخدام مكتبات خارجية ، والتطبيقات العملية مثل إنشاء مكتبة الرموز ، وإنشاء صفحة مقصودة متحركة ، ورسوم UX المتحركة.

أي ردود فعل هو موضع ترحيب وتقدير.

في صحتك،
مايك مانجالاردي
مؤسس فنان الترميز