الشروع في العمل مع مكتبة الرسوم المتحركة Mojs: The Burst Module

Arabic (العربية/عربي) translation by Hamdan Veerlax (you can also view the original English article)

لقد بدأنا هذه السلسلة من خلال تعلم كيفية تحريك عناصر HTML باستخدام mojs. في البرنامج التعليمي الثاني ، انتقلنا إلى الرسوم المتحركة لأشكال SVG المضمنة باستخدام وحدة الشكل. غطى البرنامج التعليمي الثالث المزيد من الطرق لتحريك أشكال SVG باستخدام وحدات ShapeSwirl و stagger.

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

خلق الرسوم المتحركة الأساسية انفجر

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

تحدد الخواص اليمنى واليسرى الوضع الأولي للرشقة بدلاً من الجسيمات الموجودة بداخله. وبالمثل ، تحدد الخواص x و y تغيير الرشقة بالكامل بدلاً من الجسيمات الفردية.

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

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

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

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

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

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

var burstA = new mojs.Burst({
  count: 20
});

var burstB = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: 10
});

var burstC = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstD = new mojs.Burst({
  degree: 180,
  radiusX: 10,
  angle: -90,
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstE = new mojs.Burst({
  count: 20,
  degree: 3600
});

يمكنك أن ترى أن بورستاA وبرستE تختلف فقط في عدد الدرجات التي لديهم لتغطية. نظراً للجسيمات في بورستاA لتغطية 360 درجة (القيمة الافتراضية)، فإنها توضع 360/20 = 18 درجة عن بعضها البعض. من ناحية أخرى، توضع الجسيمات في burstE 3600/20 = 180 درجة عن بعضها البعض. ابتداء من الصفر، يتم وضع الجسيمات الأولى في درجة صفر، والتالي يوضع في 180 درجة.

ثم يوضع الجزء الثالث في 360 درجة، الذي هو أساسا يساوي 0 درجة. ثم يتم وضع الجزء الرابع في درجة 540، ولكن هذا أساسا يساوي 180 درجة. وبعبارة أخرى، يتم وضع جميع الجسيمات المرقمة فردياً في 0 درجة، وتوضع جميع الجسيمات عدد زوجي في 180 درجة. وفي النهاية، تشاهد فقط جزيئات اثنين لجميع الآخرين يتراكب مع الأولين.

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

التعامل مع الفرد انفجر الجسيمات

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

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

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

var burstA = new mojs.Burst({
  count: 20,
  children: {
    shape: 'line',
    stroke: 'black',
    radius: 20,
    angle: {
    0: 180
    }
  }
});

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

هنا هو التعليمة البرمجية JavaScript لإنشاء خمس حركات الاندفاع مختلفة استخدام جميع المفاهيم التي تعلمناه حتى الآن.

var burstA = new mojs.Burst({
  count: 20,
  angle: {
    0: 180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "polygon",
    stroke: "black",
    radius: 20,
    angle: {
      0: 360
    },
    duration: 4000
  }
});

var burstB = new mojs.Burst({
  count: 20,
  angle: {
    0: 180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "polygon",
    fill: ["yellow", "cyan", "orange"],
    stroke: "black",
    radius: 20,
    scale: {
      1: 2
    },
    duration: 2000
  },
  isShowEnd: false
});

var burstC = new mojs.Burst({
  count: 20,
  angle: {
    0: -180
  },
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "black", "blue"],
    radius: {
      10: "stagger(5, 1)"
    }
  }
});

var burstD = new mojs.Burst({
  count: 6,
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "yellow", "blue"],
    scale: {
      1: "rand(1, 10)"
    }
  },
  isShowEnd: false
});

var burstE = new mojs.Burst({
  count: 6,
  radius: {
    0: 100
  },
  children: {
    shape: "circle",
    fill: ["red", "yellow", "blue"],
    stroke: "black",
    scale: {
      1: "rand(1, 10)"
    }
  }
}).then({
  angle: {
    0: 360
  },
  radius: {
    100: 0
  },
  scale: {
    1: 0
  }
});

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

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

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

في الرسم المتحرك الخامس ، نستخدم الأسلوب then() من البرنامج التعليمي لوحدة نمطية الشكل لتشغيل تسلسل رسوم متحركة آخر بعد انتهاء الجزء الأول.

افكار اخيرة

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

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

إذا كان هناك أي شيء ترغب في توضيحه في هذا البرنامج التعليمي ، فيرجى إبلاغي بذلك في التعليقات.