تصویر نویسنده

۲۷ شهریور ۱۳۹۹

0

چگونه می توان با حرکات نامنظم SVG به انیمیشن دست نویس رسید

مقاله

من می خواستم یک انیمیشن دست خط برای فونت های خوشنویسی – نوعی که کلمات مانند نوشتن با قلم نامرئی شبیه سازی می شوند – انجام دهم.

از آنجا که قلم های خوشنویسی عرض حرکتی ناهمواری دارند (از نظر SVG حتی حرکت هم نیستند)، انجام این نوع کارها با تکنیک های معمولی انیمیشن مسیر تقریباً غیرممکن بود.

اما من یک برنامه ابتکاری از پوشش SVG پیدا کردم تا در عرض چند دقیقه به این مهم برسیم.


همچنین بخوانید : چگونه کد SVG را با استفاده از اشکال پایه ساده کنیم؟


هنگام تحقیق درباره چگونگی انجام این کار، اطلاعات را از منابع مختلفی جمع آوری کردم. آنها را با هم ترکیب کردم و توانستم جلوه نهایی را ایجاد کنم.

بیایید با هم این را بسازیم!

ماسک کردن SVG

اگر عرض حرکت در کل حروف در یک کلمه یا جمله برابر باشد، کریگ روبلوسکی یک روش خوب برای متحرک سازی دست خط دارد. این یک تکنیک هوشمندانه است که ویژگی های SVG مثل stroke-dasharray و stroke-offset را متحرک می کند.

قلم های خوشنویسی مثل همین که می خواهیم در اینجا متحرک سازی کنیم، در طول حروف عرض نابرابر دارند، بنابراین لازم است که یک <path> باشد و متحرک سازی اش به آن روش کارایی نخواهد داشت. روش ما استفاده از ماسک کردن SVG خواهد بود.

بیایید ابتدا بفهمیم از چه فونتی می خواهیم استفاده کنیم. موردی که من در طول این مقاله از آن استفاده خواهم کرد HaveHeartOne است، که ظاهر زیبای قلم مویی دارد و برای دست خط مناسب است.

ایده این است که از همان جمله ای که می خواهیم متحرک سازی کنیم ، یک <mask> ایجاد کنیم، سپس آن را در بالای جمله قرار دهیم.

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

ساخت لایه ها

اساس این ترفند این است که در واقع ما می خواهیم دو لایه جداگانه ایجاد کنیم، یکی بر روی دیگری:

  1. لایه پایینی کلمات با فونت مورد نظر است.
  2. لایه بالایی یک مسیر دستی است که کلمات را به صورت تقریبی نشان می دهد.

ایجاد مسیر دست ساز آنقدرها که فکر می کنید سخت نیست. برای متحرک سازی و آشکار کردن جمله به یک مسیر مداوم نیاز داریم.

این به معنای عدم وجود <text> برای این کار است. اما، بسیاری از برنامه های طراحی – از جمله Illustrator – می توانند حروف را به مسیر تبدیل کنند:

  1. کلمات را انتخاب کنید.
  2. پنل “Properties” را باز کنید و روی Create outline کلیک کنید.

و مانند جادو، حروف با نقاط برداری که از شکل پیروی می کنند، به outline تبدیل می شوند.

تصور کنید همه این ها را با دست می کشیدید!

در این مرحله، دادن اسم های معنی دار به این مسیرها که به صورت لایه ای ذخیره می شوند، بسیار مهم است.

وقتی این انتظار را برای SVG داریم، برنامه کد تولید می کند و از آن اسم لایه ها به عنوان id و class استفاده می کند.

این نام ها از آنچه که به طور خودکار تولید می شده، بسیار زیبا تر هستند.

ببینید که چطور هر حرف جداگانه یک fill دارد، بدون stroke:

در SVG، می توانیم حرکت را به روشی که می خواهیم متحرک کنیم، بنابراین لازم است که آن را به عنوان دومین لایه اصلی خود، به عنوان ماسک، ایجاد کنیم. می توانیم از ابزار pen برای ردیابی حروف استفاده کنیم.

  1. ابزار pen را انتخاب کنید.
  2. گزینه fill را روی “None” قرار دهید.
  3. عرض حرکت به فونت مورد استفاده شما بستگی دارد. من گزینه Stroke Width را روی ۵px و رنگ آن را روی سیاه تنظیم می کنم.
  4. کشیدن را شروع کنید!

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

برای هر حرف یک ماسک درست کنید و یادتان باشد که از اسم های خوب برای لایه ها استفاده کنید.

و در جاهایی که بیش از یک حرف مشابه وجود دارد حتما از ماسک ها استفاده مجدد کنید – دیگر نیازی به ترسیم مجدد همان کارکتر نیست.

خروجی گرفتن

در مرحله بعدی، باید از فایل SVG خروجی بگیریم. این احتمالاً به برنامه مورد استفاده شما بستگی دارد.

در Illustrator می توانید این کار را با File → Export → Export as SVG انجام دهید.

پنجره گزینه های SVG باز می شود، در زیر تنظیمات ترجیحی برای خروجی گرفتن برای این مثال ارائه شده است.

حالا، همه برنامه ها از SVG دقیقا مانن روش گفته شده، خروجی نمی دهند.

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

هنگامی که با SVG کار می کنیم، چند نکته وجود دارد که در نظر گرفتن آنها موجب به دست آوردن سبک ترین حالت به منظور کارایی بهتر می شود:

  1. هر چقدر نقاط کمتر باشد، فایل سبکتر می شود.
  2. استفاده از یک viewBox می تواند کمک کننده باشد.
  3. ابزارهای زیادی برای بهینه سازی بیشتر SVG وجود دارد.

ویرایش دستی کد SVG

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

برخی از کارهایی که ارزشمند هستند:

  1. به عنصر <svg> عرض و ارتفاعی بدهید که متناسب با سایز طرح نهایی باشند.
  2. از عنصر <title> استفاده کنید. از آنجا که ما در حال کار با مسیرها هستیم، کلمات توسط خوانندگان صفحه شناخته نمی شوند. اگر شما نیاز دارید که هنگام فوکوس آنها را بشناسند، این ترفند خواسته شما را عملی می کند.
  3. عناصر گروهی (<g>) با شناسه هایی که بر اساس لایه های برنامه تصویر سازی نامگذاری شده اند، وجود خواهد داشت. در این نسخه ی نمایشی خاص، من دو عنصر گروهی دارم: marketing-lab #  (outline) و marketing-masks# (ماسک ها) . ماسک ها را به یک عنصر <defs> منتقل کنید. این کار آن ها را از نظر بصری پنهان می شود، همان چیزی است که ما می خواهیم.
  4. مسیرهایی در داخل گروه ماسکها وجود دارد. اگر چنین است، پیش بروید و ویژگی transform را از آنها حذف کنید.
  5. هر عنصر مسیر را در یک <mask> بپیچید و به آنها یک کلاس mask. و یک شناسه بدهید که نشان می دهد کدام حرف ماسک شده است.

برای مثال:

<mask id="mask-marketing-M">
  <path class="mask" id="mask-M" ... />
</mask>

در داخل گروه outline (که من شناسه marketing-lab# را به آن داده ام) ، با استفاده از mask=url(#mask-marketing-M) ماسک را بر روی عنصر مسیر کاراکتر مربوطه قرار دهید.

<g id="marketting-lab">
  <path mask="url(#mask-marketing-M)" id="marketting-char-M" d="M427,360, ... " />
</g>

این کد برای یک کاراکتر است که از همه تغییرات فوق استفاده می کند:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 81" class="marketing-lab">
  <title>Marketing Lab</title>
  <defs>
    <g id="marketing-masks">
      <mask id="mask-marketing-M">
        <path class="mask" id="mask-M"
          d="M375.5, ... ,9-10" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="7" />
      </mask>
    </g>
  </defs>
  <g id="marketting-lab">
    <path
      mask="url(#mask-marketing-M)" id="marketting-char-M" 
      d="M427,360.22c-.11.08-.17.14-.17.18H427c0" />
  </g>
</svg>

در آخر، ما CSS را برای عنصر mask. اضافه می کنیم که رنگ حرکت را با سفید در نظر می گیرد بنابراین در برابر رنگ پس زمینه پنهان می شود.

.mask {
  fill: none;
  stroke: #fff;
}

متحرک سازی

ما قصد داریم ویژگی stroke-dasharray را متحرک کنیم تا افکت آشکارسازی مداوم را دریافت کنیم. متحرک سازی را می توانیم با CSS و JavasScript یا با Greensock (GSAP) انجام دهیم. ما هر دو روش را بررسی خواهیم کرد.

CSS و  JavaScript

انجام این کار فقط در CSS کاملاً ساده است. برای محاسبه طول مسیر و سپس متحرک کردن با استفاده از آن مقدار برگشتی می توانید از JavaScript استفاده کنید.

اگر به هیچ وجه نمی خواهید از JavaScript استفاده کنید، می توانید طول مسیر را یک بار محاسبه کرده و مقدار آن را به CSS وارد کنید.

/* Set the stroke-dasharray and stroke-dashoffset */
.mask {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/* Animation the stroke-dashoffset to a zero length */
@keyframes strokeOffset {
  to {
    stroke-dashoffset: 0;
  }
}

/* Apply the animation to each mask */
#mask-M {
  animation: strokeOffset 1s linear forwards;
}

اگر ترجیح می دهید از روش دیگر استفاده کنید، JavaScript می تواند به شمارش کمک کند:

// Put the masks in an array
const masks = ['M', 'a', 'r', 'k-1', 'k-2', 'e', 't-line-v', 't-line-h', 'i-2', 'i-dot', 'n', 'g', 'lab-l', 'lab-a', 'lab-b']

masks.forEach((mask, index, el) => {
  const id = `#mask-${mask}` // Prepend #mask- to each mask element name
  let path = document.querySelector(id)
  const length = path.getTotalLength() // Calculate the length of a path
  path.style.strokeDasharray = length; // Set the length to stroke-dasharray in the styles
  path.style.strokeDashoffset = length; // Set the length to stroke-dashoffset in the styles
})

GSAP

GSAP یک افزونه drawSVG دارد که به شما اجازه می دهد به صورت پیشرونده حرکت یک <path>, <line>, <polyline>, <polygon>, <rect>, یا  <ellipse> SVG را آشکار سازید (یا پنهان کنید). در نهایت، این افزونه از ویژگی های stroke-dashoffset  و  stroke-dasharray CSS استفاده می کند.

نحوه کار کردن افزونه:

  1. اسکریپت های GSAP و drawSVG را در کد وارد کنید.
  2. ابتدا گرافیک را با استفاده از autoAlpha مخفی کنید.
  3. یک جدول زمانی ایجاد کنید.
  4. autoAlpha را برای گرافیک روی true تنظیم کنید.
  5. تمام شناسه های ماسک مسیر کاراکتر را با ترتیب مناسب به جدول زمانی اضافه کنید.
  6. برای متحرک سازی همه کاراکترها از drawSVG استفاده کنید.

منبع : css-tricks

۰ ۰ vote
Article Rating