هذا الكودبن مستوحى من عمل ستين هوغارد

الاستعدادات

لنقم بإنشاء حاويتين لتطبيقات مختلفة للرسوم المتحركة:

 
Animated text
  



 
Click on me!
  

لقد قمت بإنشاء ملف SVG باستخدام برنامج Adobe Illustrator، ويجب أن تكون الميزة الرئيسية له هي الارتفاع الصغير والعرض الكبير.
من المهم الإشارة إلى أن svg هو عنصر فرعي لعنصر الرأس حيث أننا سنضع svg بالنسبة إليه.

CSS

نقوم بتحويل حاوياتنا إلى صناديق مرنة لوضع كل شيء في المركز بشكل أنيق.

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

يتم استخدام السطر لتقليل عرض العنصر إلى محتواه حيث أن svg سيعتمد عليه

بعد ذلك، يجب علينا وضع svg بالنسبة إلى الرأس:

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

نستخدم الطريقة القياسية لوضع العنصر النسبي في وسط الأصل. لضبط SVG على النص، يجب علينا تطبيق الحد الأدنى للعرض والحد الأدنى للارتفاع.

منطق الرسوم المتحركة مع جافا سكريبت

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

الإطارات الرئيسية

دعونا نحلل وظيفة getDrawingParameters، التي تعطي خصائص للتكرار عليها:

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

أولاً، نحتاج إلى معرفة المدة الفعلية لمسارنا، باستخدام طريقة svg getTotalLength:

const length = path.getTotalLength();

الآن، يجب أن نستخدم الطول المحسوب لمحاكاة الرسم. دعونا نحدد نقطة البداية لدينا. نحتاج إلى السمة strokeDasharray:

path.style.strokeDasharray = length;

هنا، نطلب من هذه السمة أن ترسم مسارًا بالتناوب بين شرطة واحدة (الحجم=الطول) وفجوة واحدة (الحجم=الطول).

السمة التالية، حيث نحتاج إلى الطول هي stroke-dashoffset:

path.style.strokeDashoffset = length;

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

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

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

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

خيارات

الوسيطة الثانية للطريقة المتحركة هي الخيارات:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

قمنا بتعيين الرسوم المتحركة لدينا على تكرارات لا نهائية ومدة 10 ثوانٍ. تذكر الإزاحة؟ تستغرق الرسوم المتحركة "النشيطة" الخاصة بنا 1.5 ثانية فقط.