متحرک سازی ماشین ها با HTML و SVG - مجله Smashing - مجله اینترنتی طراحی سایت، سئو رایکون

SVG <animateMotion> راهی برای تعریف نحوه حرکت یک عنصر در طول مسیر حرکت ارائه می دهد. در این مقاله، پل اسکنلون ایده ای را در مورد نحوه استفاده از آن با انیمیشن سازی ماشین های مسابقه در یک حلقه بی نهایت به آسانی یک-دو-سه به اشتراک می گذارد!

سلام! و اگر HTML را دوست دارید، به جای درستی آمده اید!

من عاشق HTML هستم. به‌عنوان یک توسعه‌دهنده فرانت‌اند قدیمی، فکر می‌کنم این یک مهارت بسیار دست کم گرفته شده است. من از سال 2005 تا کنون HTML می نویسم، و امروزه مرورگر به تنهایی می تواند تقریباً تمام کارهایی را که Flash می توانست تقریباً دو دهه پیش انجام دهد، انجام دهد!

یکی مثل فوت و فن HTML در حال حاضر نامیده می شود <animateMotion> – کسانی که با فلش آشنا هستند این را به خاطر خواهند داشت راهنمای حرکت. من این ویدیو را از 14 سال پیش پیدا کردم، اما روش قبل از آن مدتی وجود داشت:

در یوتیوب تماشا کنید)”>

آموزش فلش – 5 – لایه های راهنمای حرکت (در یوتیوب تماشا کنید)

ایده این است که شما مسیری را ایجاد می‌کنید تا عناصر دنبال شوند… و تمام!

در اینجا نمونه ای از کارهایی است که می توانید انجام دهید <animateMotion>:

اگر نگاهی به اسناد MDN، یک مثال ساده از یک دایره قرمز را خواهید دید که مسیری را در یک حلقه بی نهایت دنبال می کند. ماشین‌های مسابقه در پیش‌نمایش زنده از همان قوانین ساده پیروی می‌کنند و دقیقاً مانند این کار می‌کنند!

سه ماشین متحرک در رنگ های آبی، سبز و صورتی که خطوط چین را دنبال می کنند — یک مثال ساده از آنچه می توان با استفاده از آن به دست آورد `animateMotion`. (انیمیشن را ببینید)

استفاده از SVG `animateMotion`

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

توجه داشته باشید: من برخی از مقادیر مسیر را برای اختصار حذف کرده ام، اما می توانید ببینید src برای قطعه زیر در simple-version.html.)

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Example</title>
  </head>
  <body>
    <main>
      <svg viewBox="0 0 307 184" xmlns="http://www.w3.org/2000/svg">
        <g id="track">
          <g id="track-lines">
            <path fill="none" stroke="#facc15" d="M167.88,111.3..." />
          </g>

          <g id="pink-car">
            <animateMotion dur="4s" repeatCount="indefinite" rotate="auto" path="M167.88,111.3..." />
            <path fill="#EC4899" d="M13.71,18.65c0.25-0.5..." />
          </g>
        </g>
      </svg>
    </main>
  </body>
</html>

اولین چیزی که باید به آن نگاه کرد این است <g> عنصر با id از track-lines. این خط چین زرد است که نشان دهنده مسیری است که خودرو طی خواهد کرد.

دیگری را نیز خواهید دید <g> عنصر با id از pink-car. در این گروه قرار دارد <animateMotion> عنصر یک ویژگی دارد path. اعدادی که برای تشکیل این مسیر استفاده می شوند با اعدادی که مسیر را تشکیل می دهند یکسان است track-lines. یک <animateMotion> عنصر نامرئی است و تنها هدف آن ارائه مسیری برای یک عنصر است که باید آن را دنبال کند.

صحبت از آن، در زیر <animateMotion> عنصر دیگری است <path> عنصر، این ماشین صورتی است و مسیر نزدیکترین همسایه خود را دنبال می کند.

`animateMotion` ویژگی های

برخی از ویژگی های اضافی وجود دارد که <animateMotion> عنصر می پذیرد. اینها به شرح زیر است:

dur: مدت زمان انیمیشن.
repeatCount: تعداد دفعاتی که انیمیشن باید حلقه بزند.
rotate: این را می توان جهت گیری مسیر در نظر گرفت. این اطمینان حاصل می کند که عنصری که در اطراف مسیر متحرک است همیشه در جهت حرکت قرار دارد.
path: همانطور که توضیح داده شد، این مسیر واقعی یک عنصر است.

را اسناد MDN نشان دادن <animateMotion> عنصر به عنوان فرزند یک Svg <circle> شکل به عنوان مثال:

<circle r="5" fill="red">
  <animateMotion
    dur="10s"
    repeatCount="indefinite"
    path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>

در حالی که این رویکرد برای اشکال کار می کند، تنها در صورتی کار خواهد کرد که عنصر بتواند کودکی را بپذیرد. عنصر مسیر SVG نمی تواند، بنابراین همه چیز را در آن قرار دهید <g> عنصر به HTML اجازه می دهد تا مشخص کند که سیستم مختصات باید از کجا شروع شود و کدام عناصر باید مسیر را دنبال کنند. یواشکی ay!

و بس. من مسیر و سایر عناصری که روی آن دیده می شود را طراحی کردم لینک پیش نمایش در Adobe Illustrator و همه چیز را به عنوان یک SVG صادر کرد. سپس کمی بازسازی دستی انجام دادم تا مطمئن شوم خودروها در مجاورت یک قرار دارند <animateMotion> عنصر و voilà! یک مسیر مسابقه!

دسترسی

یک مشکل کوچک، <animateMotion> عنصر به صورت بومی مشاهده نمی کند ترجیح می دهد-کاهش-حرکت. برای حل این مشکل در پیش‌نمایش، یک را اضافه کرده‌ام پرس و جو رسانه ای که هر عنصری را با نام کلاس تنظیم می کند car به display: none;. ایده آل نیست، اما حداقل حرکت ایمن است!

امیدوارم از این پست لذت برده باشید، و اگر سوالی دارید، لطفا بیایید و من را در توییتر پیدا کنید. @PaulieScanlon، اوه و اگر شما تصویرگر بهتری از من هستید، لطفاً در طراحی مجدد مسیر مسابقه و اتومبیل‌ها احساس راحتی کنید، و من خوشحال می‌شوم که آن را به کد تبدیل کنم!

شما را در سراسر اینترنت می بینم!