منذ أكثر من أسبوع بقليل ، كجزء من مسابقة Telegram ، اضطررت إلى الانغماس في "العالم السحري" من svg ، الصيغ الرياضية ، والتحسين والرسوم المتحركة. كانت مهمة المنافسة إنشاء مخطط بسيط إلى حد ما على JS ، ولكن بعض الفروق الدقيقة في المهمة والتركيز على الأداء جعلها مثيرة للاهتمام. بالنظر إلى الرغبة في إنشاء شيء مع المطالبة بالفوز ، كان من الضروري الغوص أعمق قليلاً من العلامة المعتادة للمشاريع النموذجية (وليس كذلك) من عالم التطوير الأمامي.
لم تنجح مع الانتهاء من العمل ، ولكن هذه المرة لم يضيع. كان الاكتشاف الرئيسي هو القدرة على العمل بشكل كامل مع رسومات ثلاثية الأبعاد في SVG! إنشاء نماذج ، بالتناوب على محور محدد ، رسوم متحركة للنصوص ، وأكثر من ذلك بكثير - كل هذا متاح هنا والآن.
الشيء الأكثر أهمية
تهيئة عنصر SVG كـ 3D:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true">
الدوران على محور معين:
polyLine.rotateX(45); polyLine.rotateY(90);
إضافة مشاهد وبدء الرسوم المتحركة:
polyLine.addAnimScene('rotateX', 45); polyLine.addAnimScene('rotateZ', 60); ... polyLine.runAnimScene(delay);
عرض
https://shtange.imtqy.com/svg-3d/ ( المصادر )