چگونه در حرکت نقاشی کنیم

نقاشی در حرکت

استفاده از SVG و JavaScript برای نقاشی در حرکت - توجه داشته باشید که باید <path> عنصر: }}

مثال

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// دریافت عنصر <path> با شناسه "triangle"
var triangle = document.getElementById("triangle");
// دریافت طول عناصر <path>
var length = triangle.getTotalLength();
// مکان شروع ترسیم (تنظیم حالت خط چین. در اینجا به مقدار مسیر تنظیم شده است، که در واقع کل مسیر را به یک خط چین بزرگ تبدیل می‌کند.)
triangle.style.strokeDasharray = length;
/* تنظیم حرکت خط چین. در ابتدا به طول مسیر تنظیم می‌شود، یعنی کل مسیر به حرکت درآورده می‌شود تا کل مسیر از دیدگاه مخفی شود و مستطیل پنهان شود.
با اسکرول، این حرکت تدریجی کاهش می‌یابد و به تدریج مستطیل نمایش داده می‌شود.
حذف این خط کد می‌تواند باعث نمایش مستطیل قبل از ترسیم اسکرول شود. */
triangle.style.strokeDashoffset = length;
// شناسایی رویداد اسکرول پنجره و فراخوانی تابع myFunction در زمان اسکرول
window.addEventListener("scroll", myFunction);
function myFunction() {
  // محاسبه درصد اسکرول = (ارتفاع اسکرول فعلی) / (ارتفاع کل اسکرول قابل دسترسی)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // محاسبه طول باید ترسیم شود = طول کل * درصد اسکرول
  var draw = length * scrollpercent;
  // زمانی که به بالا اسکرول می‌کنیم، در واقع به صورت معکوس ترسیم می‌شود (از کامل به ناقص)، بنابراین در اینجا از طول کل کسر شده از طول باید ترسیم شود.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

آموزش به صورت عملی

صفحات مرتبط

تدریس:تدریس SVG