101- دروس جافا سكربت – DOM – JS DOM Animations

### مقدمة إلى تحريك DOM في JavaScript

تحريك DOM (Document Object Model) في JavaScript هو عملية تغيير خصائص عناصر HTML ديناميكيًا لتوفير تأثيرات بصرية تفاعلية. تُمكِّن هذه التحريكات من تحسين تجربة المستخدم على الويب من خلال إضافة أبعاد حركة وانتقالات سلسة.

### مفهوم DOM

DOM هو نموذج برمجة يمثل وثائق HTML وXML في شكل شجرة [شركة برمجة مصرية] حيث كل عقدة تمثل جزءًا من الوثيقة. يمكن لـ JavaScript التفاعل مع DOM لتغيير بنية المستند أو مظهره أو محتواه.

### كيفية عمل التحريكات في DOM

تتم التحريكات في DOM باستخدام JavaScript لتغيير خصائص CSS لعناصر HTML. يمكن أن تشمل هذه الخصائص الألوان، المواقع، الأحجام، أو حتى الخصائص المعقدة مثل التحولات (transforms) والتراكبات (transitions).

### أدوات التحريك في JavaScript

#### 1. **setInterval() و setTimeout()**

يمكن استخدام `setInterval()` و `setTimeout()` لتحديث خصائص العناصر على فترات زمنية محددة؛ مما يخلق تأثير الحركة.

**مثال:**

let position = 0;
const box = document.getElementById("box");

function moveBox() {
  position += 1;
  box.style.left = position + 'px';

  if (position < 300) {
    requestAnimationFrame(moveBox);
  }
}

moveBox();

#### 2. **CSS Transitions**

يمكن استخدام JavaScript لتطبيق فئات CSS التي تحتوي على انتقالات.

**HTML:**

“`html

Move Right
“`

**CSS:**

“`css
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transition: left 2s;
}

.box.move-right {
left: 200px;
}
“`

**JavaScript:**

function moveRight() {
  const box = document.querySelector('.box');
  box.classList.toggle('move-right');
}

#### 3. **CSS Animations**

يمكن التحكم بالتحريكات التي تم إنشاؤها بواسطة CSS باستخدام JavaScript من خلال إضافة أو إزالة الفئات.

**HTML:**

“`html

Animate Circle
“`

**CSS:**

“`css
@keyframes grow {
from { transform: scale(1); }
to { transform: scale(1.5); }
}

.circle {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
animation: grow 2s infinite alternate;
}
“`

**JavaScript:**

function animateCircle() {
  const circle = document.getElementById('circle');
  circle.style.animationPlayState = circle.style.animationPlayState === 'paused' ? 'running' : 'paused';
}

### [شركة برمجة مصرية] استخدام مكتبات التحريك

هناك العديد من المكتبات التي تُسهِّل عملية التحريك في DOM، مثل GSAP و Anime.js، والتي توفر واجهات برمجية متقدمة لعمل تحريكات معقدة بجهد أقل.

**مثال باستخدام GSAP:**

gsap.to("#box", {duration: 2, x: 300, rotation: 360});

### خاتمة

تحريك DOM باستخدام JavaScript هو مهارة قوية تساهم في تحسين التفاعل والتجربة البصرية للمواقع. من خلال استخدام أساليب وأدوات مختلفة، يمكن للمطورين خلق تجارب ديناميكية وجذابة للمستخدمين. سواء كنت تستخدم طرقًا بسيطة مثل `setInterval` أو تستفيد من المكتبات المتقدمة، فإن فهم تحريكات DOM ضروري لأي مطور ويب حديث.