Animation Basics
Make things move! Learn to build bouncing balls, spinning coins, glowing buttons, and game sprites you can drop straight into your own games and websites.
What You'll Learn
Description
الرسوم المتحركة هي ما يجعل الألعاب والمواقع تبدو نابضة بالحياة. زرّ يتوهّج عند تمرير المؤشر فوقه، عملة تدور، كرة ترتد، شخصية تنزلق عبر الشاشة — كل هذا رسوم متحركة، ويمكنك بناء كل جزء منها بنفسك.
في هذا الدرس، يرافقك الأفاتار الخاص بك من Vibe Coding Academy عبر شيفرة حقيقية يمكنك نسخها ولصقها. ستبدأ بتأثيرات تمرير بسيطة، ثم ترتقي إلى رسوم متحركة متكررة بـ @keyframes، ثم تتحكم في الحركة إطارًا بإطار باستخدام JavaScript — نفس الحيلة التي تستخدمها الألعاب الحقيقية. كل مقطع شيفرة ملك لك تلصقه وتشغّله وتعدّله.
في النهاية ستحصل على أزرار متحركة، وكرة مرتدّة، وعملة دوّارة، وشخصية (sprite) يمكنك تحريكها بمفاتيح الأسهم — بالإضافة إلى أوامر الذكاء الاصطناعي لإنشاء المزيد متى شئت.
What's Inside
4 hands-on chapters • about 1.5 hours of fun.
- 1مقدمة — ما هي الرسوم المتحركة حقًا + أول تأثير تمرير لك
- 2تحريك الأشياء — @keyframes، كرة مرتدّة وعملة دوّارة
- 3تأثيرات رائعة وتوقيت — transform، التنعيم، ونبضة متوهّجة
- 4حرّك مشروعك الخاص — شخصية لعبة بـ JavaScript يمكنك التحكم بها
