ہیکنگ سی ایس ایس اینیمیشن اسٹیٹ اور پلے بیک ٹائم

صرف سی ایس ایس وولفنسٹین ایک چھوٹا سا پروجیکٹ ہے جو میں نے چند ہفتے پہلے بنایا تھا۔ یہ CSS 3D تبدیلیوں اور متحرک تصاویر کے ساتھ ایک تجربہ تھا۔

کی طرف سے حوصلہ افزائی ایف پی ایس ڈیمو اور ایک دوسرے وولفنسٹین کوڈ پین، میں نے اپنا ورژن بنانے کا فیصلہ کیا۔ یہ اصل وولفنسٹین 1D گیم کی قسط 9 - فلور 3 پر مبنی ہے۔

ایڈیٹر: گیم اوور اسکرین سے بچنے کے لیے اس گیم کو جان بوجھ کر کچھ فوری ردعمل کی ضرورت ہوتی ہے۔

یہاں ایک پلے تھرو ویڈیو ہے:

[سرایت مواد]

مختصراً، میرا پروجیکٹ کچھ نہیں ہے مگر احتیاط سے اسکرپٹ شدہ لمبی سی ایس ایس اینیمیشن۔ اس کے علاوہ کی چند مثالیں چیک باکس ہیک.

:checked ~ div { animation-name: spin; }

ماحول 3D گرڈ چہروں پر مشتمل ہے اور متحرک تصاویر زیادہ تر سادہ 3D ترجمہ اور گردش ہیں۔ کچھ بھی واقعی پسند نہیں ہے۔

تاہم، دو مسائل کو حل کرنا خاص طور پر مشکل تھا:

• جب بھی کھلاڑی کسی دشمن پر کلک کرتا ہے تو "ہتھیار سے فائرنگ" اینیمیشن چلائیں۔
• جب تیزی سے چلنے والے باس کو آخری ہٹ لگ گئی، تو ڈرامائی سست حرکت داخل کریں۔

تکنیکی سطح پر، اس کا مطلب تھا:

• اگلا چیک باکس چیک ہونے پر ایک اینیمیشن دوبارہ چلائیں۔
• ایک اینیمیشن کو سست کریں، جب ایک چیک باکس کو نشان زد کیا جاتا ہے۔

اصل میں، نہ ہی میرے منصوبے میں مناسب طریقے سے حل کیا گیا تھا! میں نے یا تو کام ختم کر دیا یا صرف ہار مان لی۔

دوسری طرف، کچھ کھودنے کے بعد، بالآخر مجھے دونوں مسائل کی کلید مل گئی: CSS اینیمیشن چلانے کی خصوصیات کو تبدیل کرنا۔ اس مضمون میں، ہم اس موضوع پر مزید دریافت کریں گے:

• بہت ساری انٹرایکٹو مثالیں۔
• تفریق: ہر مثال کیسے کام کرتی ہے (یا کام نہیں کرتی)؟
• پردے کے پیچھے: براؤزر حرکت پذیری کی حالتوں کو کیسے ہینڈل کرتے ہیں؟

مجھے کرنے دیں "میری اینٹیں پھینکو".

مسئلہ 1: حرکت پذیری کو دوبارہ چلانا

پہلی مثال: "صرف ایک اور چیک باکس"

میرا پہلا وجدان تھا "صرف ایک اور چیک باکس شامل کریں"، جو کام نہیں کرتا:

ہر چیک باکس انفرادی طور پر کام کرتا ہے، لیکن دونوں ایک ساتھ نہیں۔ اگر ایک چیک باکس پہلے ہی نشان زد ہے، تو دوسرا کام نہیں کرتا۔

یہاں یہ ہے کہ یہ کیسے کام کرتا ہے (یا "کام نہیں کرتا"):

1. ۔ animation-name of <div> is none پہلے سے طے شدہ.
2. صارف ایک چیک باکس پر کلک کرتا ہے، animation-name ہو جاتا ہے spin، اور حرکت پذیری شروع سے شروع ہوتی ہے۔
3. تھوڑی دیر کے بعد، صارف دوسرے چیک باکس پر کلک کرتا ہے۔ ایک نیا سی ایس ایس اصول لاگو ہوتا ہے، لیکن animation-name is اب بھی spin، جس کا مطلب ہے کہ کوئی حرکت پذیری شامل یا ہٹائی نہیں جاتی ہے۔ حرکت پذیری اس طرح چلتی رہتی ہے جیسے کچھ ہوا ہی نہ ہو۔

دوسری مثال: "انیمیشن کی کلوننگ"

ایک کام کرنے کا طریقہ حرکت پذیری کو کلون کرنا ہے:

#spin1:checked ~ div { animation-name: spin1; }
#spin2:checked ~ div { animation-name: spin2; }

یہاں یہ کس طرح کام کرتا ہے:

1. animation-name is none ابتدائی طور پر
2. صارف "اسپن!" پر کلک کرتا ہے، animation-name ہو جاتا ہے spin1. حرکت پذیری spin1 شروع سے شروع کیا گیا ہے کیونکہ اسے ابھی شامل کیا گیا تھا۔
3. صارف "دوبارہ اسپن!" پر کلک کرتا ہے، animation-name ہو جاتا ہے spin2. حرکت پذیری spin2 شروع سے شروع کیا گیا ہے کیونکہ اسے ابھی شامل کیا گیا تھا۔

نوٹ کریں کہ مرحلہ نمبر 3 میں، spin1 CSS قواعد کے حکم کی وجہ سے ہٹا دیا گیا ہے۔ یہ کام نہیں کرے گا اگر "دوبارہ گھماؤ!" سب سے پہلے چیک کیا جاتا ہے.

تیسری مثال: "ایک ہی حرکت پذیری کو شامل کرنا"

ایک اور کام کرنے کا طریقہ "ایک ہی حرکت پذیری کو شامل کرنا" ہے:

#spin1:checked ~ div { animation-name: spin; }
#spin2:checked ~ div { animation-name: spin, spin; }

یہ پچھلی مثال کی طرح ہے۔ آپ دراصل اس طرز عمل کو اس طرح سمجھ سکتے ہیں:

#spin1:checked ~ div { animation-name: spin1; }
#spin2:checked ~ div { animation-name: spin2, spin1; }

نوٹ کریں کہ جب "دوبارہ گھماؤ!" چیک کیا جاتا ہے، پرانی چل رہی اینیمیشن نئی فہرست میں دوسری اینیمیشن بن جاتی ہے، جو کہ غیر محسوس ہو سکتی ہے۔ ایک براہ راست نتیجہ ہے: چال کام نہیں کرے گا اگر animation-fill-mode is forwards. یہاں ایک ڈیمو ہے:

اگر آپ حیران ہیں کہ ایسا کیوں ہے، تو یہاں کچھ اشارے ہیں:

• animation-fill-mode is none بذریعہ ڈیفالٹ، جس کا مطلب ہے "اگر نہیں چل رہا ہے تو حرکت پذیری کا کوئی اثر نہیں ہوتا"۔
• animation-fill-mode: forwards; اس کا مطلب ہے "اینیمیشن کے چلنے کے بعد، اسے ہمیشہ کے لیے آخری کی فریم پر رہنا چاہیے"۔
• spin1کا فیصلہ ہمیشہ اوور رائڈ ہوتا ہے۔ spin2اس لئے کہ spin1 فہرست میں بعد میں ظاہر ہوتا ہے۔
• فرض کریں کہ صارف "اسپن!" پر کلک کرتا ہے، مکمل اسپن کا انتظار کرتا ہے، پھر "اسپن دوبارہ!" پر کلک کرتا ہے۔ اس وقت. spin1 پہلے ہی ختم ہو چکا ہے، اور spin2 بس شروع ہوتا ہے.

بحث

انگوٹھے کا اصول: آپ موجودہ CSS اینیمیشن کو "دوبارہ شروع" نہیں کر سکتے۔ اس کے بجائے، آپ ایک نیا اینیمیشن شامل کرنا اور چلانا چاہتے ہیں۔ اس کی تصدیق ہو سکتی ہے۔ W3C تفصیلات:

ایک بار حرکت پذیری شروع ہونے کے بعد یہ اس وقت تک جاری رہتی ہے جب تک کہ یہ ختم نہ ہو جائے یا حرکت پذیری کا نام ہٹا دیا جائے۔

اب آخری دو مثالوں کا موازنہ کرتے ہوئے، میرے خیال میں عملی طور پر، "کلوننگ اینیمیشنز" کو اکثر بہتر کام کرنا چاہیے، خاص طور پر جب CSS پری پروسیسر دستیاب ہو۔

مسئلہ 2: سست حرکت

کوئی سوچ سکتا ہے کہ حرکت پذیری کو سست کرنا صرف ایک لمبی سیٹ کرنے کا معاملہ ہے۔ animation-duration:

div { animation-duration: 0.5s; }
#slowmo:checked ~ div { animation-duration: 1.5s; }

درحقیقت، یہ کام کرتا ہے:

… یا کرتا ہے؟

چند موافقت کے ساتھ، مسئلہ کو دیکھنا آسان ہونا چاہیے۔

جی ہاں، حرکت پذیری سست ہو گئی ہے۔ اور نہیں، یہ اچھا نہیں لگ رہا ہے. جب آپ چیک باکس کو ٹوگل کرتے ہیں تو کتا (تقریباً) ہمیشہ "چھلانگ لگاتا ہے"۔ مزید برآں، ایسا لگتا ہے کہ کتا ابتدائی پوزیشن کے بجائے بے ترتیب پوزیشن پر چھلانگ لگاتا ہے۔ کس طرح آیا؟

اسے سمجھنا آسان ہو گا اگر ہم دو "شیڈو عناصر" متعارف کرائیں:

دونوں شیڈو عناصر مختلف کے ساتھ ایک ہی متحرک تصاویر چلا رہے ہیں۔ animation-duration. اور وہ چیک باکس سے متاثر نہیں ہوتے ہیں۔

جب آپ چیک باکس کو ٹوگل کرتے ہیں، تو عنصر فوری طور پر دو شیڈو عناصر کی حالتوں کے درمیان بدل جاتا ہے۔

کا حوالہ دیتے ہوئے W3C تفصیلات:

اینیمیشن کے چلنے کے دوران اینیمیشن کی خصوصیات کی قدروں میں تبدیلیاں اس طرح لاگو ہوتی ہیں جیسے اینیمیشن کے شروع ہونے سے ہی وہ قدریں موجود ہوں۔

یہ مندرجہ ذیل ہے بے ریاست ڈیزائن، جو براؤزر کو آسانی سے متحرک قدر کا تعین کرنے کی اجازت دیتا ہے۔ اصل حساب بیان کیا گیا ہے۔ یہاں اور یہاں.

ایک اور کوشش

ایک خیال یہ ہے کہ موجودہ اینیمیشن کو موقوف کریں، پھر ایک سست حرکت پذیری شامل کریں جو وہاں سے ختم ہو جائے:

div {
  animation-name: spin1;
  animation-duration: 2s;
}

#slowmo:checked ~ div {
  animation-name: spin1, spin2;
  animation-duration: 2s, 5s;
  animation-play-state: paused, running;
}

تو یہ کام کرتا ہے:

… یا کرتا ہے؟

جب آپ "Slowmo!" پر کلک کرتے ہیں تو یہ سست ہوجاتا ہے۔ لیکن اگر آپ پورے دائرے کا انتظار کرتے ہیں، تو آپ کو "چھلانگ" نظر آئے گی۔ دراصل، یہ ہمیشہ اس پوزیشن پر چھلانگ لگاتا ہے جب "Slowmo!" پر کلک کیا جاتا ہے۔

وجہ یہ ہے کہ ہمارے پاس ایک نہیں ہے۔ from کلیدی فریم کی وضاحت کی گئی ہے - اور ہمیں نہیں کرنا چاہئے۔ جب صارف "Slowmo!" پر کلک کرتا ہے، spin1 کسی پوزیشن پر موقوف ہے، اور spin2 بالکل اسی پوزیشن سے شروع ہوتا ہے۔ ہم صرف اس پوزیشن کی پہلے سے پیش گوئی نہیں کر سکتے ہیں … یا ہم کر سکتے ہیں؟

ایک ورکنگ حل

ہم کر سکتے ہیں! حسب ضرورت پراپرٹی کا استعمال کرتے ہوئے، ہم پہلی اینیمیشن میں زاویہ کیپچر کر سکتے ہیں، پھر اسے دوسری اینیمیشن میں منتقل کر سکتے ہیں:

div {
  transform: rotate(var(--angle1));
  animation-name: spin1;
  animation-duration: 2s;
}

#slowmo:checked ~ div {
  transform: rotate(var(--angle2));
  animation-name: spin1, spin2;
  animation-duration: 2s, 5s;
  animation-play-state: paused, running;
}

@keyframes spin1 {
  to {
    --angle1: 360deg;
  }
}

@keyframes spin2 {
  from {
    --angle2: var(--angle1);
  }
  to {
    --angle2: calc(var(--angle1) + 360deg);
  }
}

نوٹ: @property اس مثال میں استعمال کیا جاتا ہے، جو ہے تمام براؤزرز کے ذریعہ تعاون یافتہ نہیں ہے۔.

"کامل" حل

پچھلے حل میں ایک انتباہ ہے: "سلومو سے باہر نکلنا" اچھا کام نہیں کرتا ہے۔

یہاں ایک بہتر حل ہے:

اس ورژن میں، سست رفتار میں بغیر کسی رکاوٹ کے داخل یا باہر نکلا جا سکتا ہے۔ کوئی تجرباتی خصوصیت بھی استعمال نہیں کی جاتی ہے۔ تو کیا یہ کامل حل ہے؟ ہاں اور نہ.

یہ حل "شفٹنگ" "گیئرز" کی طرح کام کرتا ہے:

• گیئرز: دو ہیں۔ <div>s ایک دوسرے کے والدین ہیں۔ دونوں کے پاس ہے۔ spin حرکت پذیری لیکن مختلف کے ساتھ animation-duration. عنصر کی آخری حالت دونوں متحرک تصاویر کا جمع ہونا ہے۔
• شفٹنگ: شروع میں، صرف ایک <div> اس کی حرکت پذیری چل رہی ہے۔ دوسرا موقوف ہے۔ جب چیک باکس کو ٹوگل کیا جاتا ہے، دونوں متحرک تصاویر اپنی ریاستوں کو تبدیل کرتی ہیں۔

اگرچہ مجھے واقعی نتیجہ پسند ہے، ایک مسئلہ ہے: یہ اس کا ایک اچھا استحصال ہے۔ spin اینیمیشن، جو عام طور پر دوسری قسم کی اینیمیشنز کے لیے کام نہیں کرتی ہے۔

ایک عملی حل (جے ایس کے ساتھ)

عام اینیمیشنز کے لیے، تھوڑا سا جاوا اسکرپٹ کے ساتھ سلو موشن فنکشن حاصل کرنا ممکن ہے:

ایک فوری وضاحت:

• اینیمیشن کی پیشرفت کو ٹریک کرنے کے لیے ایک حسب ضرورت پراپرٹی استعمال کی جاتی ہے۔
• چیک باکس ٹوگل ہونے پر اینیمیشن "دوبارہ شروع" ہو جاتی ہے۔
• جے ایس کوڈ صحیح کی گنتی کرتا ہے۔ animation-delay ہموار منتقلی کو یقینی بنانے کے لیے۔ میں تجویز کرتا ہوں۔ اس مضمون اگر آپ منفی اقدار سے واقف نہیں ہیں۔ animation-delay.

آپ اس حل کو "ری سٹارٹنگ اینیمیشن" اور "گیئر شفٹنگ" اپروچ کے ہائبرڈ کے طور پر دیکھ سکتے ہیں۔

یہاں حرکت پذیری کی پیشرفت کو درست طریقے سے ٹریک کرنا ضروری ہے۔ اگر حل ممکن ہے۔ @property دستیاب نہیں ہے. مثال کے طور پر، یہ ورژن استعمال کرتا ہے۔ z-index پیشرفت کو ٹریک کرنے کے لیے:

ضمنی نوٹ: اصل میں، میں نے صرف CSS ورژن بنانے کی کوشش کی لیکن کامیاب نہیں ہوا۔ جبکہ 100% یقین نہیں ہے، میرے خیال میں اس کی وجہ ہے۔ animation-delay is متحرک نہیں.

یہ کم سے کم جاوا اسکرپٹ والا ورژن ہے۔ صرف "انٹرنگ سلومو" کام کرتا ہے۔

براہ کرم مجھے بتائیں کہ کیا آپ صرف کام کرنے والا CSS ورژن بنانے کا انتظام کرتے ہیں!

سلو مو کوئی اینیمیشن (جے ایس کے ساتھ)

آخر میں، میں ایک ایسا حل شیئر کرنا چاہوں گا جو (تقریباً) کسی بھی حرکت پذیری کے لیے کام کرے، یہاں تک کہ متعدد پیچیدہ @keyframes:

بنیادی طور پر، آپ کو ایک اینیمیشن پروگریس ٹریکر شامل کرنے کی ضرورت ہے، پھر احتیاط سے حساب لگائیں۔ animation-delay نئی حرکت پذیری کے لیے۔ تاہم، بعض اوقات درست اقدار حاصل کرنا مشکل (لیکن ممکن) ہوسکتا ہے۔

مثال کے طور پر:

• animation-timing-function نہیں ہے linear.
• animation-direction نہیں ہے normal.
• میں متعدد اقدار animation-name مختلف کے ساتھ animation-duration'ریت animation-delayکی.

یہ طریقہ بھی بیان کیا گیا ہے۔ یہاں کے لئے ویب اینیمیشن API.

منظوریاں

میں نے یہ راستہ صرف CSS کے پروجیکٹس کا سامنا کرنے کے بعد شروع کیا۔ کچھ تھے۔ نازک آرٹ ورک، اور کچھ تھے پیچیدہ contraptions. میرے پسندیدہ وہ ہیں جن میں 3D اشیاء شامل ہیں، مثال کے طور پر، یہ شیخی گیند اور اس پیکنگ کیوب.

شروع میں، مجھے کوئی اشارہ نہیں تھا کہ یہ کیسے بنائے گئے ہیں. بعد میں میں نے بہت کچھ پڑھا اور سیکھا۔ Ana Tudor کی طرف سے یہ اچھا سبق.

جیسا کہ یہ نکلا، سی ایس ایس کے ساتھ 3D آبجیکٹ بنانا اور انیمیٹ کرنا اس کے ساتھ کرنے سے زیادہ مختلف نہیں ہے۔ بلینڈر، صرف تھوڑا سا مختلف ذائقہ کے ساتھ۔

نتیجہ

اس مضمون میں ہم نے CSS متحرک تصاویر کے رویے کا جائزہ لیا جب ایک animate-* جائیداد کو تبدیل کر دیا گیا ہے. خاص طور پر ہم نے "اینیمیشن کو دوبارہ چلانے" اور "اینیمیشن سلو مو" کے لیے حل نکالے۔

مجھے امید ہے کہ آپ کو یہ مضمون دلچسپ لگے گا۔ براہ کرم مجھے اپنے خیالات سے آگاہ کریں!