دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱۹
  • خرداد

جلسه ۰۹ : انیمیشن در D3.js

  • دسته‌بندی‌ها :
جلسه ۰۹ : انیمیشن در D3.js
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، جلسه نهم از آموزش های دوره D3.js را با مبحث انیمیشن در D3.js آغاز می کنیم. D3.js توسط انتقال از انیمیشن پشتیبانی می کند. ما می توانیم انیمیشن را با استفاده مناسب متد انتقال انجام دهیم. انتقال یک نوع محدود شده فریم کلیدی انیمیشن در D3.js با دو فریم کلیدی همراه است: فریم شروع و پایان.همچنین با برخی متدها مانند متد ()delay در D3.js نیز آشنا خواهیم شد.

      انیمیشن در D3.js

      قالب اصلی شروع به طور معمول حالت فعلی DOM است، و قالب کلید پایانی مجموعه ای از ویژگی ها، سبک ها و سایر ویژگی هایی است که شما مشخص می کنید.

      انتقال ها برای انتقال به یک سبک جدید بدون یک کد پیچیده مناسب هستند و این به دید اولیه بستگی دارد.

      به عنوان مثال :اجازه دهید کد زیر را در صفحه “transition_color.html” در نظر بگیریم.

      مثال : 

      در اینجا، رنگ پس زمینه سند از سفید به خاکستری روشن و سپس به خاکستری تغییر می کند.

      متد ()The duration در D3.js

      این متد صفات را به طور مساوی در طول مدت مشخص تغییر می دهد . اجازه دهید یک انتقال که ۵ ثانیه به طول می انجامد را مانند کد زیر بسازیم.

      مثال : 

      در اینجا، انتقال به صورت صاف و یکنواخت صورت گرفت. همچنین می توانیم مقدار کد رنگ RGB را مستقیما با استفاده از روش زیر تعیین کنیم.

      مثال : 

      اکنون، هر کد رنگ به آرامی، صاف و یکنواخت از ۰ به ۱۵۰ می رود.

      برای گرفتن ترکیب دقیق درون فریم یا قالب از مقدار قالب شروع به مقدار قالب پایه، D3.js از یک روش interpolate داخلی استفاده می کند.

      که سینتکس آن در زیر آورده شده است :

      مثال : 

      D3 همچنین از انواع interpolation زیر پشتیبانی می کند :

      • interpolateNumber : ارزش های عددی را پشتیبانی می کند.
      • interpolateRgb :رنگ ها را پشتیبانی می کند.
      • interpolateString :رشته را پشتیبانی می کند.

      ما می توانیم از متد های interpolate به طور مستقیم برای به دست آوردن نتیجه مورد نظرمان استفاده کنیم. ما حتی می توانیم در صورت لزوم یک متد interpolate جدید ایجاد کنیم.

      متد ()delay در D3.js

      متد ()delay در D3.js اجازه می دهد تا پس از یک دوره زمانی خاص، انتقال رخ دهد.
      کد زیر را در “transition_delay.html” در نظر بگیرید.

      مثال : 

      طول عمر انتقال

      انتقال دارای یک چرخه عمر چهار مرحله ای است :

      • برنامه ریزی انتقال
      • شروع انتقال
      • اجرای انتقال
      • پایان انتقال

      اجازه دهید با جزییات بیشتر به این مساله بپردازیم.

      برنامه ریزی انتقال

      زمانی که ایجاد می شود، یک انتقال برنامه ریزی شده است. هنگامی که selection.transition را فراخوانی می کنیم ، ما یک انتقال را برنامه ریزی می کنیم.
      این نیز زمانی است که ما ()attr ()، style و دیگرمتدهای انتقال را برای تعریف فریم کلید پایانی فراخوانی می کنیم.

      شروع انتقال

      شروع انتقال با توجه به تاخیر زمانی( delay) که برنامه ریزی شده مشخص می شود.

      اگر تاخیر مشخص نشده باشد، پس از آن، شروع انتقال صورت می گیرد، که معمولا بعد از چند میلی ثانیه است.

      همچنین اگر انتقال تاخیر داشته باشد، پس از شروع انتقال، مقدار شروع باید تنظیم شود.

      ما می توانیم با گوش دادن به رویداد شروع این کار را انجام دهیم.

      مثال : 

      اجرای انتقال

      هنگامی که انتقال اجرا می شود، به طور مکرر با مقادیر انتقال از ۰ به ۱ فراخوانی می شود.

      علاوه بر تاخیر و مدت زمان، انتقال نیز برای کاهش کنترل زمان انجام می شود.

      کاهش زمان تحریف شده، مانند آهسته شدن و کم کردن سرعت.

      برخی از توابع کاهش ممکن است به طور موقت مقادیر t را بیشتر از ۱ یا کمتر از ۰ بدهند.

      پایان انتقال

      زمان پایان دادن به انتقال همیشه دقیقا ۱ است، به طوری که مقدار پایانی دقیقا زمانی که انتقال به پایان می رسد تعیین می شود.

      یک پایان انتقال بر اساس مجموع تاخیر و مدت آن است. وقتی گذار به پایان می رسد، رویداد نهایی ارسال می شود.

      کلام آخر

      آموزش انیمیشن در D3.js و متد ()delay در D3.js به پایان رسید. از آنجا که جاوا اسکریپت عموما به عنوان یک استاندارد برای توسعه محتوای وب پویا شناخته می شود، d3.js به ویژه برای ساخت گرافیک تعاملی از منبع داده ها مفید است. در جلسه بعد کشیدن نمودار در D3.js به شما عزیزان آموزش داده خواهد شد.

      QR:  جلسه ۰۹ : انیمیشن در D3.js
      به اشتراک بگذارید