کی فریم

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

بیضوی ایزنگ کنٹرول پوائنٹس

cp1 اور cp2 پراپرٹیز کیفی بیضوی منحنی کے لیے حسب ضرورت ایزنگ کی وضاحت کرتی ہیں:

• ڈیفالٹ (لکیری): اگر چھوڑ دیا جائے تو لکیری انٹرپولیشن استعمال کی جاتی ہے
• کوارڈینیٹ رینج: دونوں x اور y کی قیمتیں 0 اور 1 کے درمیان ہونی چاہئیں
• منحنی کی تعریف: (0,0) سے cp1 اور cp2 کے ذریعے (1,1) تک ایک کیفی بیضوی بناتی ہے
• عام پری سیٹس:
  • ایز-ان-آؤٹ: cp1: {x: 0.42, y: 0}, cp2: {x: 0.58, y: 1}
  • ایز-ان: cp1: {x: 0.42, y: 0}, cp2: {x: 1, y: 1}
  • ایز-آؤٹ: cp1: {x: 0, y: 0}, cp2: {x: 0.58, y: 1}

{
  "id": "39ecb75a-3490-43bd-84c2-72366c2f39f2",
  "type": "Image",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 0,
  "y": 0,
  "blendMode": "normal",
  "anchorX": 1302,
  "anchorY": 2312,
  "rotation": 0,
  "scaleX": 0.23356401384083045,
  "scaleY": 0.23356401384083045,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "keyframes": [
      {
          "id": "800350bd-4a24-4440-904c-ec08a8159508",
          "time": 0,
          "stateObj": {
              "alpha": 0
          },
          "cp1": {
              "x": 0.25,
              "y": 0.1
          },
          "cp2": {
              "x": 0.25,
              "y": 1
          }
      },
      {
          "id": "ce3f9b10-2b9e-4266-8cdb-77167f9f16aa",
          "time": 3,
          "stateObj": {
              "alpha": 1
          },
          "cp1": {
              "x": 0.25,
              "y": 0
          },
          "cp2": {
              "x": 0.25,
              "y": 0.9
          }
      }
  ],
  "externalUrl": "https://images.pexels.com/photos/30465303/pexels-photo-30465303.jpeg",
  "ext": "jpeg"
}

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

جب کسی عنصر پر متعدد انیمیشن کے طریقے لگائے جاتے ہیں:

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

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

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

یہ جدید انیمیشنز کو ضرورت کے وقت کی فریم کی قیمتوں پر فوقیت دینے کی اجازت دیتا ہے۔

اہم نوٹس

• وقت کا حوالہ: کی فریم وقت کی قیمتیں عنصر کے شروع کے وقت کے لحاظ سے ہیں، نہ کہ مطلق ٹائم لائن وقت۔
• متعدد پراپرٹیز: ایک ہی کی فریم ایک ساتھ متعدد پراپرٹیز کو انیمیشن کر سکتی ہے جب کہ انہیں stateObj میں شامل کیا جائے۔
• انٹرپولیشن: کی فریم کے درمیان پراپرٹیز خود بخود انٹرپولیٹ کی جاتی ہیں۔ انٹرپولیشن کی منحنی cp1 اور cp2 بیضوی کنٹرول پوائنٹس سے متعین ہوتی ہے۔
• پہلا کی فریم: اگر پہلا کی فریم وقت 0 پر نہیں ہے، تو عنصر اپنے ابتدائی حالت سے پہلے کی فریم کی طرف انٹرپولیٹ کرے گا۔
• رنگ کی انٹرپولیشن: رنگ کی پراپرٹیز (جیسے fill, stroke) RGB اسپیس میں انٹرپولیٹ کی جاتی ہیں۔