انیمیشن

متحرک نظام جو متحرک، عملدرآمدی، اور اظہار پر مبنی انیمیشن بنانے کے لئے ہے جو سادہ کی فریمز سے آگے بڑھتا ہے۔

انیمیشن کی اقسام

انیمیشن نظام روایتی کی فریمز کے علاوہ کئی اقسام کی حمایت کرتا ہے:

• اظہار: جاوا اسکرپٹ اظہار جو ہر فریم پر جانچے جاتے ہیں
• عملی: بلٹ ان عملی انیمیشن پیٹرن
• ترتیب: مرحلہ وار ترتیب والے انیمیشن
• راستہ: بیزیئر راستوں کے ساتھ حرکت

یہ جدید انیمیشنز عناصر کی animations صف میں متعین کی گئی ہیں۔

نوڈ انیمیشنز بمقابلہ کی فریمز

نوڈ انیمیشنز (animations صف):

• عملی، اظہار پر مبنی، یا راستہ پر چلنے والی انیمیشن
• ہر فریم پر جانچی جاتی ہیں
• کی فریمز سے زیادہ ترجیح
• کی فریم کی اقدار کو اوور رائڈ کر سکتی ہیں

کی فریمز (keyframes صف):

• متعین نکات کے درمیان سادہ پراپرٹی انٹرپولیشن
• کم ترجیح
• متوقع، ایڈٹ کرنے میں آسان

انیمیشن کی ترجیحات

جب متعدد انیمیشن کے طریقے ایک ہی پراپرٹی کو نشانہ بناتے ہیں:

1. سب سے زیادہ: نوڈ انیمیشنز (اظہار، عملی، راستہ، ترتیب)
2. درمیانہ: کی فریم انیمیشن
3. سب سے کم: جامد پراپرٹی کی قدریں

اظہار انیمیشنز

اظہار جاوا اسکرپٹ کوڈ ہیں جو ہر فریم پر جانچے جاتے ہیں، انیمیشن سیاق و سباق کی متغیرات تک رسائی کے ساتھ۔

دستیاب سیاق و سباق کی متغیرات

{
  time: number; // موجودہ مطلق وقت (سیکنڈ)
  localTime: number; // عنصر کے آغاز کے لحاظ سے وقت
  duration: number; // عنصر کی دورانیہ
  progress: number; // معمول کے مطابق پیشرفت (0-1)
  index: number; // گروپ میں عنصر کی انڈیکس
  total: number; // گروپ میں کل عناصر
  fps: number; // فی سیکنڈ فریم
  width: number; // کینوس کی چوڑائی
  height: number; // کینوس کی اونچائی
  value: any; // موجودہ پراپرٹی کی قیمت
}

اظہار کی مثال

ریباونس انیمیشن جو ریاضی کی فنکشنز کا استعمال کرتی ہے:

{
"id": "element-1",
"type": "Image",
"start": 0,
"duration": 5,
"animations": [
  {
    "type": "expression",
    "target": "y",
    "enabled": true,
    "expression": "100 + Math.abs(Math.sin(localTime * 3)) * 200",
    "startTime": 0,
    "duration": 5,
    "loop": true
  }
]
}

پیچیدہ اظہار

متعدد اثرات کو ملا کر:

{
"animations": [
  {
    "type": "expression",
    "target": "rotation",
    "expression": "(localTime * 2 * Math.PI / duration) + Math.sin(localTime * 4) * 0.1",
    "loop": true
  },
  {
    "type": "expression",
    "target": "scaleX",
    "expression": "1 + Math.sin(localTime * 5) * 0.2",
    "loop": true
  }
]
}

عملی انیمیشنز

بلٹ ان انیمیشن پیٹرن جن کے متغیرات کو ترتیب دیا جا سکتا ہے۔

عملی اقسام

• wiggle: بے ترتیب ارتعاش (ہینڈ ہیلڈ کیمرہ اثرات کے لئے مفید)
• wave: سائن/کوسائن لہری حرکت
• bounce: لچکدار باؤنس اثر
• pulse: تال کے مطابق پیمائش

ویگل کی مثال

{
"animations": [
  {
    "type": "procedural",
    "proceduralType": "wiggle",
    "target": "rotation",
    "enabled": true,
    "frequency": 2,
    "amplitude": 0.1,
    "loop": true
  }
]
}

ترتیب انیمیشنز

مرحلہ وار انیمیشن جو مخصوص وقفوں پر قیمتوں کو تبدیل کرتی ہیں۔

ترتیب کی مثال

متن مختلف سائزوں میں گردش کرتا ہے:

{
"animations": [
  {
    "type": "sequence",
    "target": "fontSize",
    "enabled": true,
    "values": [24, 32, 40, 32, 24],
    "stepDuration": 0.5,
    "loop": true
  }
]
}

راستہ انیمیشنز

عناصر کو بیزیئر منحنی خطوط کے ساتھ متحرک کریں۔

راستہ کی مثال

مدور حرکت:

{
"animations": [
  {
    "type": "path",
    "target": "position",
    "enabled": true,
    "path": "M 100,100 a 200,200 0 1,1 0,1 Z",
    "autoRotate": true,
    "duration": 4,
    "loop": true
  }
]
}

پراپرٹی راستہ کی نحو

target پراپرٹی نقطہ نوٹیشن کا استعمال کرتی ہے تاکہ نیسٹڈ پراپرٹیز کو متعین کیا جا سکے:

• سادہ: "x", "y", "rotation"
• نیسٹڈ: "scale.x", "position.y"
• ایری: "colors[0]", "points[2].x"

ہدف کی وضاحت کی مثالیں

{
  "target": "x"              // عنصر کی x پوزیشن
  "target": "scaleX"         // افقی اسکیل
  "target": "alpha"          // شفافیت
  "target": "fill.color"     // بھرنے کا رنگ (اگر بھرنا آبجیکٹ ہو)
  "target": "points[0].x"    // پہلے نقطے کی x کوآرڈینیٹ
}

ملاوٹ کے طریقے

یہ کنٹرول کرتا ہے کہ جب متعدد انیمیشنز ایک ہی پراپرٹی کو نشانہ بناتی ہیں تو وہ کیسے ملتے ہیں:

تبدیل کریں (ڈیفالٹ)

{
  "blendMode": "replace",
  "blendWeight": 1.0
}

پراپرٹی کی قیمت کو مکمل طور پر تبدیل کرتا ہے۔

شامل کریں

{
  "blendMode": "add",
  "blendWeight": 0.5
}

موجودہ قیمت میں شامل کرتا ہے (وزن دار)۔ انحرافات کو جمع کرنے کے لئے مفید۔

ضرب دیں

{
  "blendMode": "multiply",
  "blendWeight": 1.0
}

موجودہ قیمت کو ضرب دیتا ہے۔ پیمائش کے اثرات کے لئے مفید۔

متعدد انیمیشن کی مثال

مختلف انیمیشن کی اقسام کو ملانا:

{
"id": "animated-element",
"type": "Shape",
"animations": [
  {
    "type": "expression",
    "target": "x",
    "expression": "width / 2 + Math.sin(localTime * 2) * 300",
    "blendMode": "replace",
    "loop": true
  },
  {
    "type": "procedural",
    "proceduralType": "wiggle",
    "target": "rotation",
    "frequency": 3,
    "amplitude": 0.2,
    "blendMode": "add",
    "blendWeight": 0.5
  },
  {
    "type": "sequence",
    "target": "alpha",
    "values": [1, 0.8, 1],
    "stepDuration": 0.3,
    "loop": true,
    "blendMode": "multiply"
  }
],
"keyframes": [
  {
    "id": "kf-1",
    "time": 0,
    "stateObj": { "scaleX": 1 }
  },
  {
    "id": "kf-2",
    "time": 2,
    "stateObj": { "scaleX": 1.5 }
  }
]
}

اس مثال میں:

• اظہار افقی پوزیشن کو کنٹرول کرتا ہے (تبدیلی کا طریقہ)
• عملی ویگل ہلکی گھماؤ کی تبدیلی شامل کرتا ہے
• ترتیب شفافیت کو دھڑکتا ہے
• کی فریم عنصر کو پیمانہ بناتا ہے (کم ترین ترجیح)

اہم نوٹس

اظہار سینڈ باکس

• اظہار محفوظ سیاق و سباق میں چلتے ہیں
• صرف انیمیشن سیاق و سباق کی متغیرات تک رسائی
• DOM، خارجی لائبریریوں، یا Node.js APIs تک رسائی نہیں
• جانچ کی غلطیاں انیمیشن کو غیر فعال کر دیں گی

کارکردگی

• اظہار: ہر فریم پر جانچے جاتے ہیں - انہیں سادہ رکھیں
• عملی: بلٹ ان فنکشنز کو بہتر بنایا گیا - بہت مؤثر
• ترتیب: کم سے کم اوور ہیڈ، مخصوص تبدیلیوں کے لئے اچھا
• راستہ: درمیانی قیمت، راستہ کی پیچیدگی پر منحصر

وقت

• startTime اور duration عنصر کے start وقت کے لحاظ سے ہیں
• اظہار میں localTime عنصر کے آغاز پر 0 سے شروع ہوتا ہے
• انیمیشن عنصر کی مجموعی duration کی حد کی تعظیم کرتی ہیں

ڈیبگنگ

• اگر کوئی انیمیشن کام نہیں کرتی تو چیک کریں:
  • enabled: true
  • عنصر پر target پراپرٹی موجود ہے
  • اظہار کی نحو درست جاوا اسکرپٹ ہے
  • startTime عنصر کی دورانیہ کے اندر ہے
  • کوئی پراپرٹی راستہ کی غلطیاں نہیں

عام استعمال کے کیسز

ہموار پیروی اثر

{
  "type": "expression",
  "target": "x",
  "expression": "value + (targetX - value) * 0.1"
}

لچکدار باؤنس

{
  "type": "expression",
  "target": "scaleY",
  "expression": "1 + Math.exp(-localTime * 3) * Math.cos(localTime * 8) * 0.5"
}

کیمرہ ہلنا

{
  "type": "procedural",
  "proceduralType": "wiggle",
  "target": "x",
  "frequency": 10,
  "amplitude": 5
}

ترتیب میں متحرک (گروپ میں)

{
  "type": "expression",
  "target": "alpha",
  "expression": "Math.max(0, Math.min(1, (localTime - index * 0.1) * 2))"
}