کیوں بنایا جاتا ہے: انیمیشن آئکن

آئکنوں کا استعمال کرکے انیمیشن کا تعمیر کیسے کریں سیکھیں。

بیٹری چارج

آموزش شخصی

پہلا قدم - ہیٹھلے کا HTML شامل کریں:

<div id="charging" class="fa"></div>

دوسرا قدم - فونٹ اے ڈیوائز آئکن لیبریری شامل کریں:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

اپنے تدريس Font Awesome مطالبات میں مزید معلومات حاصل کریں.

تیسرا قدم - جاوا اسکریپٹ شروع کریں:

<script>
function chargebattery() {
  var a;
  a = document.getElementById("charging");
  a.innerHTML = "";
  setTimeout(function () {
    a.innerHTML = "";
  }, 1000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 2000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 3000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>

آموزش شخصی

مثال کی تفسیر:

یہ مثال دکھاتا ہے کہ بیٹری چارج ہورہی ہے، لیکن اس کے پچھلے پانچ مختلف آئکنز دیکھائی دیتے ہیں。

ایک نام chargebattery() یہ فونکشن تمام آئکنوں کی تبدیلی اور دکھائی کا ذمہ داری کرتی ہے。

یہ فونکشن پہلے ایک خالی بیٹری آئکن دکھاتا ہے:

ایک سیکنڈ کے بعد، موجود آئکن کو ایک نئی آئکن کی جگہ لے گا:

ہر سیکنڈ میں موجود ایک نئی آئکن موجود آئکن کی جگہ لے گا، جب تک ‘بیٹری پوری چارج ہوجائے’:

یہ عمل 5 سیکنڈ میں ایک بار تکرار ہوتا ہے، جس سے لگتا ہے کہ بیٹری چارج ہورہی ہے。

آیکون‌های انيميشن بیشتری

مثال

آموزش شخصی

مثال

آموزش شخصی

مثال

آموزش شخصی

مثال

آموزش شخصی

مثال

آموزش شخصی

مثال

آموزش شخصی