آموزش ساخت انیمیشن های Svg

گرافیک SVG را می توان با استفاده از عناصر انیمیشن متحرک کرد. عناصر انیمیشن در ابتدا در مشخصات انیمیشن SMIL تعریف شدند که می توان با آن ها انیمیشن های Svg را تولید کنیم. این عناصر عبارتند از:

1) <animate>: به شما امکان می دهد ویژگی ها و خصوصیات اسکالر را در طی یک دوره زمانی متحرک کنید.

2) <set> : یک مختصر نویسی مناسب برای انیمیشن است، که برای اختصاص مقادیر انیمیشن به خصوصیات و خصوصیات غیر عددی مانند visibility property مفید است.

3) <animateMotion> :که یک عنصر را در امتداد یک مسیر حرکت می دهد.

4) <animateColor> :که مقدار رنگ صفات یا خصوصیات خاص را با گذشت زمان اصلاح می کند. توجه داشته باشید که عنصر صرفاً استفاده از عنصر متحرک برای هدف قرار دادن خصوصیاتی که می توانند مقادیر رنگی را بدست آورند، منسوخ شده است. اگرچه هنوز در مشخصات SVG 1.1 وجود دارد، اما به وضوح ذکر شده است که منسوخ شده است. و کاملاً از مشخصات SVG 2 حذف شده است.

علاوه بر عناصر انیمیشن تعریف شده در مشخصات SMIL ، SVG شامل پسوندهای سازگار با مشخصات انیمیشن SMIL است. این برنامه های افزودنی شامل ویژگی هایی هستند که عملکرد عنصر و عناصر اضافی انیمیشن را گسترش می دهند. پسوندهای SVG شامل موارد زیر است:

1) <animateTransform> : به شما امکان می دهد یکی از ویژگی های تغییر شکل SVG را به مرور متحرک کنید، مانند ویژگی transform.

2) path (صفت): اجازه می دهد تا هر ویژگی از داده SVG در مشخصه مسیر به عنصر animateMotion مشخص شود (انیمیشن SMIL فقط به یک زیر مجموعه از داده مسیر SVG در یک ویژگی path اجازه می دهد).

3) <mpath>: همراه با عنصر animateMotion برای ارجاع به یک مسیر حرکتی که قرار است به عنوان مسیری برای حرکت استفاده شود. قبل از برچسب بسته شدن، عنصر mpath در داخل عنصر animateMotion گنجانده شده است.

4) keypoints: به عنوان یک ویژگی برای animateMotion برای ارائه کنترل دقیق سرعت انیمیشن های مسیر حرکت استفاده می شود.

5) rotate (ویژگی) : به عنوان یک ویژگی برای animateMotion استفاده می شود تا کنترل کند که آیا یک شی object به طور خودکار چرخانده می شود به طوری که محور x آن در همان جهت (یا جهت مخالف) با بردار مماس جهت دار مسیر حرکت قرار گیرد. این ویژگی کلید ایجاد حرکت در طول مسیر همانطور که انتظار دارید است.

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

چرا باید از انیمیشن های SVG استفاده کرد؟

SVG ها را می توان با CSS (اسلایدها) متحرک کرد. اساساً، هر انیمیشن تحول یا انتقال که می تواند روی یک عنصر HTML اعمال شود، می تواند بر روی یک عنصر SVG نیز اعمال شود. اما برخی از ویژگی های SVG وجود دارد که نمی تواند از طریق CSS متحرک شود که می تواند از طریق SVG باشد. به عنوان مثال یک مسیر SVG با مجموعه ای از داده ها (ویژگی d = "") همراه است که شکل آن مسیر را تعریف می کند. این داده ها می توانند از طریق SMIL اصلاح و متحرک شوند، اما نه در CSS. دلیل این امر این است که عناصر SVG توسط مجموعه ای از ویژگی ها شناخته می شوند که به عنوان ویژگی های ارائه SVG شناخته می شوند. برخی از این ویژگی ها را می توان با استفاده از CSS تنظیم، اصلاح و متحرک کرد و برخی دیگر نمی توانند.

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

اگر استفاده از JavaScript را ترجیح می دهید، توصیه می کنم از snap.svg توسط دیمیتری بارانوفسکی استفاده کنید، که به عنوان "jQuery SVG" توصیف می شود. در اینجا مجموعه ای از نمونه های آن آورده شده است.

یا اگر رویکرد انیمیشن واضح تری را ترجیح می دهید، می توانید از عناصر انیمیشن SVG استفاده کنید همانطور که در این راهنما توضیح خواهیم داد.

یکی دیگر از مزایای SMIL نسبت به انیمیشن های JS این است که وقتی SVG به عنوان img تعبیه شده یا به عنوان تصویر پس زمینه در CSS استفاده می شود، انیمیشن های JS کار نمی کنند. انیمیشن های SMIL در هر دو مورد کار می کنند (یا باید، پشتیبانی از مرورگر در حالت تعلیق است). به نظر من این یک مزیت بزرگ است. به همین دلیل ممکن است متوجه شوید SMIL را نسبت به گزینه های دیگر انتخاب می کنید.

پشتیبانی مرورگر

پشتیبانی مرورگر از انیمیشن های SMIL کاملاً مناسب است. آن ها در همه مرورگرها به جز در Internet Explorer و Opera Mini کار می کنند. برای یک نمای کلی از پشتیبانی مرورگر، می توانید به جدول سازگاری در Can I Use مراجعه کنید.

در صورت نیاز به ارائه بازدهی برای انیمیشن های SMIL، می توانید با استفاده از Modernizr این پشتیبانی را ایجاد کنید.

خوب وقت آن رسیده که آموزش تگ هارو شروع کنیم:

تعیین هدف انیمیشن با xlink: href

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

برای تعیین هدف می توانید از ویژگی xlink: href استفاده کنید. این ویژگی به عنصری که هدف این انیمیشن است و بنابراین با گذشت زمان اصلاح می شود، به یک URI اشاره می کند. عنصر هدف باید بخشی از قطعه سند فعلی SVG باشد.

<rect id="cool_shape" ... />

<animate xlink:href="#cool_shape" ... />

اگر قبلاً با عناصر انیمیشن SVG روبرو شده باشید، احتمالاً آن ها را درون عنصری قرار داده اند که قرار است آن ها را متحرک کنند. این امر و همچنین در مشخصات امکان پذیر است:

اگر ویژگی xlink: href ارائه نشده باشد، عنصر هدف، عنصر اصلی و عنصر فعلی انیمیشن خواهد بود

<rect id="cool_shape" ... >

  <animate ... />

</rect>

بنابراین اگر می خواهید انیمیشن را در عنصری که برای آن کاربرد دارد "محصور" کنید، می توانید این کار را انجام دهید. و اگر می خواهید انیمیشن ها را در جای دیگری از سند جدا نگه دارید، می توانید این کار را نیز انجام دهید و هدف هر انیمیشن را با استفاده از xlink: href مشخص کنید. هر دو روش به خوبی کار می کنند.

مشخص کردن ویژگی هدف انیمیشن با ویژگی AttributeName و AttributeType

همه عناصر انیمیشن ویژگی دیگری نیز دارند: (AttributeName)، از ویژگی AttributeName برای تعیین نام ویژگی ای که در حال انیمیشن هستید استفاده می شود.

به عنوان مثال، اگر می خواهید موقعیت مرکز <circle> در محور x را متحرک کنید، این کار را با تعیین cx به عنوان مقدار ویژگی AttributeName انجام می دهید.

AttributeName فقط یک مقدار را می گیرد، نه لیستی از مقادیر، بنابراین، می توانید همزمان یک ویژگی را متحرک کنید. اگر می خواهید بیش از یک ویژگی را متحرک سازی کنید، باید بیش از یک انیمیشن برای عنصر تعریف کنید. این چیزی است که من آرزو می کنم متفاوت باشد و به نظر من CSS برای SMIL یک مزیت دارد. اما دوباره، به دلیل مقادیر ممکن برای سایر ویژگی های انیمیشن (که در ادامه به آن ها خواهیم پرداخت)، فقط منطقی است که فقط و فقط یک نام ویژگی را در یک بار تعریف کنید، در غیر این صورت مقادیر دیگر ویژگی ها برای کار با آن ها بسیار پیچیده می شوند.

هنگامی که نام ویژگی را مشخص می کنید، می توانید پیشوند XMLNS (مخفف X names namespace) را برای نشان دادن فضای نام ویژگی اضافه کنید. فضای نام را می توان با استفاده از ویژگی attributeType نیز تعیین کرد. به عنوان مثال، برخی از ویژگی ها بخشی از فضای نامی CSS هستند (به این معنی که این ویژگی را می توان به عنوان یک ویژگی CSS نیز پیدا کرد) و برخی دیگر فقط XML هستند. جدولی که این ویژگی ها را نشان می دهد می توانید در اینجا پیدا کنید. ویژگی های جدول همه ویژگی های SVG نیستند. آن ها فقط مواردی هستند که می توانند با استفاده از CSS تنظیم شوند. برخی از آن ها از قبل به عنوان خصوصیات CSS در دسترس هستند.

اگر مقدار AttributeType به صراحت تنظیم نشده باشد یا روی خودکار تنظیم شود، مرورگر ابتدا باید از طریق لیست خواص CSS یک نام خاص منطبق را جستجو کند و اگر موردی یافت نشد، در نام پیش فرض XML عنصر جستجو می کند.

به عنوان مثال، قطعه زیر opacity مستطیل SVG را متحرک می کند. از آنجا که ویژگی opacity به عنوان یک ویژگی CSS نیز موجود است، AttributeType روی فضای نامی CSS تنظیم می شود:

<rect>
  <animate attributeType="CSS" attributeName="opacity" 
           from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>

متحرک کردن ویژگی یک عنصر از یک مقدار به مقدار دیگر برای مدت زمان طولانی و تعیین وضعیت پایان: from ، by، to، dur،fill

بیایید با حرکت یک دایره از یک موقعیت به موقعیت دیگر شروع کنیم. ما می خواهیم این کار را با تغییر مقدار ویژگی cx (که موقعیت x مرکز آن را مشخص می کند) انجام دهیم.

ما برای این کار از عنصر <animate> استفاده خواهیم کرد. این عنصر برای متحرک سازی یک ویژگی در یک زمان استفاده می شود. صفاتی که مقادیر و رنگ عددی دارند معمولاً با <animate> متحرک می شوند. برای لیستی از ویژگی هایی که می توانند متحرک شوند، به این جدول مراجعه کنید.

به منظور تغییر یک مقدار به مقدار دیگر در طی یک دوره زمانی، از ویژگی های from ، to ، و dur استفاده می شود. علاوه بر این، شما همچنین می خواهید مشخص کنید که چه زمانی انیمیشن با ویژگی begin شروع شود.

<circle id="my-circle" r="30" cx="50" cy="50" fill="orange" />

  <animate 
    xlink:href="#my-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="1s"
    begin="click"
    fill="freeze" />

در مثال بالا، ما یک حلقه را تعریف کرده ایم و سپس روی آن حلقه انیمیشن نامیده ایم. مرکز دایره از موقعیت اولیه در 50 واحد، به 450 واحد در امتداد محور x حرکت می کند.

مقدار begin برای click تنظیم شده است. به این معنی است که دایره با کلیک روی آن حرکت می کند. همچنین می توانید این مقدار را روی مقدار زمان نیز تنظیم کنید. به عنوان مثال، start = "0s" به محض بارگیری صفحه، انیمیشن را شروع می کند. با تنظیم مقدار زمان مثبت می توانید انیمیشن را به تأخیر بیندازید. به عنوان مثال، start = "2s" انیمیشن را دو ثانیه پس از بارگذاری آغاز می کند.

نکته جالبتر در مورد شروع این است که شما می توانید مقادیری مانند click +1 را تعریف کنید تا یک ثانیه پس از کلیک عنصر، انیمیشن شروع شود! علاوه بر این، می توانید از مقادیر دیگری استفاده کنید که به شما امکان می دهد انیمیشن ها را بدون محاسبه مدت زمان و تأخیر سایر انیمیشن ها همگام سازی کنید.

ویژگی dur مشابه معادل مدت انیمیشن در CSS است.

ویژگی های from و to مشابه keyframe های from و to در بلوک keyframe انیمیشن در CSS است:

@keyframes moveCircle {
  from { /* start value */ }
  to { /* end value */ }
}

ویژگی fill (که متأسفانه همان ویژگی پر کردن است که رنگ پر شدن یک عنصر را تعریف می کند) مشابه ویژگی animation-fill-mode است، که مشخص می کند آیا عنصر باید به حالت اولیه خود برگردد یا خیر انیمیشن تمام شد. مقادیر موجود در SVG مشابه مقادیر موجود در CSS است، با این تفاوت که از نام های مختلفی استفاده می شود:

freeze: جلوه انیمیشن برای مسدود کردن مقدار اثر در آخرین مقدار مدت زمان فعال تعریف می شود. جلوه انیمیشن برای باقیمانده مدت زمان سند "منجمد" می شود (یا تا زمان شروع مجدد انیمیشن).
remove: با پایان یافتن مدت زمان فعال انیمیشن، اثر انیمیشن حذف می شود (دیگر اعمال نمی شود). پس از پایان فعال انیمیشن، انیمیشن دیگر روی هدف تأثیر نمی گذارد (مگر اینکه انیمیشن مجدداً شروع شود).

از ویژگی by برای تعیین جبران نسبی انیمیشن استفاده می شود. همانطور که از نامش پیداست، می توانید از آن برای تعیین میزان پیشرفت انیمیشن استفاده کنید. تأثیر by تقریباً فقط وقتی قابل مشاهده است که شما در مراحل جداگانه بیش از مدت زمان انیمیشن پیشرفت می کنید، شبیه نحوه کار با عملکرد مراحل css.step() معادل تابع مراحل "calcMode="discrete است.

مورد دیگر که تأثیر by را آشکارتر می کند، زمانی است که فقط صفت to را مشخص کنید. اگر از آن با عنصر مجموعه ای استفاده کنید.

شروع مجدد انیمیشن ها با restart

جلوگیری از راه اندازی مجدد انیمیشن در حین فعال بودن ممکن است مفید باشد. برای انجام این کار، SVG ویژگی راه اندازی مجدد را ارائه می دهد. می توانید این ویژگی را روی یکی از سه مقدار ممکن تنظیم کنید:

always: انیمیشن را می توان هر زمان که خواست راه اندازی مجدد کرد. این مقدار پیش فرض است.
whenNotActive: انیمیشن فقط زمانی فعال می شود که فعال نباشد (یعنی بعد از پایان فعال). تلاش برای راه اندازی مجدد انیمیشن در طول مدت فعال آن نادیده گرفته می شود.
never: این عنصر را نمی توان برای باقیمانده مدت زمان ساده فعلی ظرف زمان پدر و مادر مجدداً راه اندازی کرد. (در مورد SVG ، از آنجا که ظرف زمان والد قطعه سند SVG است، پس نمی توان انیمیشن را برای باقیمانده مدت سند مجدداً راه اندازی کرد.)

مثالی برای تمام تگ های گفته شده:

<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />

<rect id="blue-rectangle" width="50" height="50" x="25" y="200" fill="#0099cc"></rect>

  <animate 
    xlink:href="#orange-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="5s"
    begin="click"
    fill="freeze" 
    d="circ-anim" />

  <animate 
    xlink:href="#blue-rectangle"
    attributeName="x" 
    from="50"
    to="425" 
    dur="5s"
    begin="circ-anim.begin + 1s"
    fill="freeze" 
    id="rect-anim" />

تکرار انیمیشن با repeatCount

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

<animate 
    xlink:href="#orange-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="5s"
    begin="click"
    repeatCount="2"
    fill="freeze" 
    id="circ-anim" />

محدود کردن زمان تکرار با reapetdur

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

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

به عنوان مثال، قطعه زیر تکرار انیمیشن را 1 دقیقه و 30 ثانیه پس از شروع سند متوقف می کند:

<animate 
    xlink:href="#orange-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="2s"
    begin="0s"
    repeatCount="indefinite"
    repeatDur="01:30" 
    fill="freeze" 
    id="circ-anim" />

کنترل مقادیر keyframes انیمیشن: values و keytimes

در CSS می توان مقادیری را که می خواهیم خاصیت متحرک در یک قاب خاص در طول انیمیشن بگیرد، تعیین کنیم. به عنوان مثال، اگر افست سمت چپ یک عنصر را متحرک می کنید، به جای متحرک کردن آن، مثلاً از 0 تا 300، می توانید آن را متحرک کنید تا مقادیر خاصی را در طی فریم های خاصی بدست آورد:

@keyframes example {
  0% {
    left: 0;
  }
  50% {
    left: 320px;
  }
  80% {
    left: 270px;
  }
  100% {
    left: 300px;
  }
}

0٪ ، 20٪ ، 80٪ و 100٪ فریم های انیمیشن است و مقادیر موجود در بلوک هر فریم مقادیر مربوط به هر فریم است. جلوه ای که در بالا توضیح داده شد یکی از عناصری است که از روی دیواره می پرد و سپس به موقعیت نهایی برمی گردد.

در SMIL می توانید مقادیر هر فریم را به روشی مشابه کنترل کنید، اما با روشی کاملاً متفاوت.

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

اگر بخواهیم به دایره متحرک خود برگردیم و از مقادیری مشابه با مقادیر موجود در keyframes های بالا استفاده کنیم، کد به صورت زیر خواهد بود:

<animate 
    xlink:href="#orange-circle"
    attributeName="cx"
    from="50"
    to="450" 
    dur="2s"
    begin="click"
    values="50; 490; 350; 450"
    keyTimes="0; 0.5; 0.8; 1"
    fill="freeze" 
    id="circ-anim" />

اولین چیزی که در اینجا باید توجه کنید این است که زمان های فریم کلیدی و مقادیر میانی به عنوان لیست مشخص می شوند. ویژگی keyTimes لیستی از مقادیر زمانی است که برای کنترل گام بردن سرعت انیمیشن از هم جدا شده با نقطه ویرگول وجود دارد. هر بار در لیست مربوط به مقداری در لیست ویژگی مقادیر است و تعیین می کند چه زمانی از این مقدار در عملکرد انیمیشن استفاده شود. هر مقدار زمان در لیست keyTimes به عنوان یک مقدار نقطه شناور بین 0 و 1 (شامل) مشخص می شود، که نشان دهنده یک جابجایی متناسب با مدت زمان ساده عنصر انیمیشن است. بنابراین زمان های کلیدی مشابه موارد موجود در CSS هستند، با این تفاوت که به جای مشخص کردن آن ها به صورت درصد، آن ها را به عنوان کسر مشخص می کنید.

کنترل سرعت انیمیشن با کاهش سفارشی: calcMode و keySplines

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

در CSS ، می توانید با استفاده از ویژگی تابع animation-timing ، سرعت انیمیشن پیش فرض یکنواخت را تغییر داده و یک تسهیل کننده سفارشی را تنظیم کنید که انیمیشن را کنترل کند. تابع زمان بندی می تواند یکی از چند کلمه کلیدی از پیش تعریف شده یا یک تابع bezier مکعبی باشد. مورد دوم را می توان با استفاده از ابزاری مانند این ابزار توسط Lea Verou ایجاد کرد.

در SMIL ، سرعت انیمیشن با استفاده از ویژگی calcMode مشخص شده است. سرعت پیش فرض انیمیشن برای همه عناصر انیمیشن به جز animateMotion به صورت linear است. علاوه بر مقدار linear ، می توانید مقدار را روی:discrete, paced, یا spline استفاده کنید.

discrete مشخص می کند که تابع انیمیشن از یک مقدار به مقدار دیگر بدون هیچ گونه درون یابی پرش می کند. این شبیه تابع steps () در CSS است.
گام شبیه linear است، با این تفاوت که از هر زمان پیشرفت میانی تعریف شده توسط keyTimes چشم پوشی می کند. فاصله بین مقادیر بعدی را محاسبه می کند و بر این اساس زمان را تقسیم می کند. اگر مقادیر شما به ترتیب linrar باشد، تفاوت را متوجه نخواهید شد. اما اگر آن ها به عقب و جلو بروند، یا اگر رنگی باشند، قطعاً مقادیر واسطه را مشاهده خواهید کرد.

نمونه مثال در css:

@keyframes bounce {
    0% {
        top: 0;
        animation-timing-function: ease-in;
    }
    15% {
        top: 200px;
        animation-timing-function: ease-out;
    }
    30% {
        top: 70px;
        animation-timing-function: ease-in;
    }
    45% {
        top: 200px;
        animation-timing-function: ease-out;
    }
    60% {
        top: 120px;
        animation-timing-function: ease-in;
    }
    75% {
        top: 200px;
        animation-timing-function: ease-out;
    }
    90% {
        top: 170px;
        animation-timing-function: ease-in;
    }
    100% {
        top: 200px;
        animation-timing-function: ease-out;
    }
}

انیمیشن های افزودنی و تجمعی: additive وaccumulate

گاهی اوقات، مفید است که یک انیمیشن را شروع کنید از جایی که انیمیشن قبلی به پایان رسیده است. یا یکی که از جمع انیمیشن های قبلی به عنوان مقداری برای ادامه استفاده می کند. برای این منظور، SVG دو ویژگی نامگذاری شده دارد: افزودنی و تجمع.

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

دقیقاً مانند هر انیمیشن دیگری، از مقادیر و به مقادیر مشخص می کنید. با این حال، هنگامی که افزودنی را روی sum تنظیم می کنید، هر یک از مقادیر آن ها با مقدار اصلی ویژگی متحرک مرتبط خواهد بود.

بنابراین، به حلقه ما برگردید. برای دایره ما، موقعیت اولیه cx 50 است. وقتی از = "0" به = "100" تنظیم می کنید، صفر اگر 50 اصلی باشد، و 100 در واقع 50 + 100 است. به عبارت دیگر، عملاً مانند "از =" 50 "به =" 150 "" است.

با انجام این کار، نتیجه زیر را بدست می آوریم:

<animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="0"
           to="100" 
           additive="sum"
           repeatCount="3"
           calcMode="spline"
           keyTimes="0;1"
           keySplines=".42 0 1 1"
           dur="1s"
           begin="click"
           fill="freeze" />

تعیین زمان پایان انیمیشن با end

علاوه بر تعیین زمان شروع انیمیشن، می توانید با استفاده از مشخصه پایان، زمان پایان آن را نیز تعیین کنید. به عنوان مثال، می توانید یک انیمیشن را تنظیم کنید تا به طور نامحدود تکرار شود، و سپس هنگامی که عنصر دیگری شروع به انیمیشن می کند، آن را متوقف کنید. ویژگی انتهایی مقادیری مشابه با مقادیری که مقدار آغازین می گیرد، می گیرد. می توانید مقادیر / جبران کننده های زمانی مطلق یا نسبی، تکرار مقادیر، مقادیر رویداد و غیره را تعیین کنید.
به عنوان مثال، در نسخه ی نمایشی زیر، دایره نارنجی در مدت زمان 30 ثانیه به آهستگی به سمت دیگر بوم حرکت می کند. دایره سبز نیز متحرک می شود، اما فقط وقتی روی آن کلیک شود. انیمیشن دایره نارنجی با شروع انیمیشن دایره سبز به پایان می رسد. روی دایره سبز کلیک کنید تا یک توقف نارنجی را ببینید:

<svg width="500" height="350">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  <circle id="green-circle" r="30" cx="50" cy="150" fill="#009966" />
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="30s"
           begin="0s"
           end="gCircAnim.begin"
           fill="freeze" 
           id="oCircAnim"/>
  <animate 
           xlink:href="#green-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="1s"
           begin="click"
           fill="freeze"
           id="gCircAnim"/>
</svg>

انیمیشن<animate>: تغییر شکل مسیرها

یکی از ویژگی هایی که می تواند در SMIL متحرک شود (اما نه در CSS) ویژگی d (مخفف داده) SVG است. ویژگی d حاوی داده هایی است که رئوس مطالبی از شکل را ترسیم می کند. داده های مسیر از مجموعه ای از دستورات و مختصات تشکیل شده است که به مرورگر می گوید از کجا و چگونه می توان نقاط، کمان ها و خطوط را رسم کرد که مسیر نهایی را تشکیل می دهد.

متحرک سازی این ویژگی به ما امکان می دهد مسیرهای SVG را شکل دهیم و اثرات ایجاد شکل را ایجاد کنیم. اما، برای اینکه بتوان اشکال را شکل داد، ابتدا، انتها و هر شکل مسیر میانی باید دقیقاً همان تعداد راس / نقطه را داشته باشد و باید به همان ترتیب ظاهر شوند. اگر تعداد راس ها مطابقت نداشته باشد، انیمیشن کار نمی کند. دلیل این امر این است که تغییر شکل در واقع با جابجایی رئوس و بین بردن موقعیت های آن ها اتفاق می افتد، بنابراین اگر یک رأس از دست رفته باشد یا مطابقت نداشته باشد، مسیرها دیگر در هم نمی یابند.

برای متحرک سازی مسیر SVG ، مشخصه Name را به صورت d تعیین می کنید و سپس مقادیر from و to را تنظیم می کنید که اشکال شروع و پایان را مشخص می کند و می توانید از ویژگی مقادیر برای تعیین مقادیر میانی که می خواهید شکل در آن عبور کند استفاده کنید. بین.

برای رعایت اختصار، من در اینجا به جزئیات نحوه انجام این کار نمی پردازم. درعوض، می توانید این مقاله عالی توسط نوح بلون را مطالعه کنید، که در آن او توضیح می دهد که چگونه با استفاده از <جان انیمیشن بارگذاری نوع متنوعی را ایجاد کرده است. نمایش زنده مقاله نوح این است:

  <path fill="#1EB287">
    <animate 
             attributeName="d" 
             dur="1440ms" 
             repeatCount="indefinite"
             keyTimes="0;
                       .0625;
                       .208333333;
                       .3125;
                       .395833333;
                       .645833333;
                       .833333333;
                       1"
             calcMode="spline" 
             keySplines="0,0,1,1;
                         .42,0,.58,1;
                         .42,0,1,1;
                         0,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1"
             values="M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 0,0 
                     C 50,0 50,0 100,0
                     100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     Z;

                     M 50,0 
                     C 75,25 75,25 100,50 
                     75,75 75,75 50,100
                     25,75 25,75 0,50
                     25,25 25,25 50,0
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;

                     M 25,50 
                     C 37.5,25 37.5,25 50,0 
                     75,50 75,50 100,100
                     50,100 50,100 0,100
                     12.5,75 12.5,75 25,50
                     Z;

                     M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;
                     
                     M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;
                     
                     M 100,0 
                     C 100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     50,0 50,0 100,0
                     Z;"/>
    <animate 
             attributeName="fill"
             dur="1440ms" 
             repeatCount="indefinite"
             keyTimes="0;
                       .0625;
                       .208333333;
                       .3125;
                       .395833333;
                       .645833333;
                       .833333333;
                       1"
             calcMode="spline" 
             keySplines="0,0,1,1;
                         .42,0,.58,1;
                         .42,0,1,1;
                         0,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1"
             values="#1eb287;
                     #1eb287;
                     #1ca69e;
                     #188fc2;
                     #188fc2;
                     #bb625e;
                     #ca5f52;
                     #1eb287;"/>
  </path>

متحرک سازی در مسیرهای دلخواه: عنصر<animatemotion>

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

عنصر<animatemotion> همان خصوصیاتی را که قبلاً ذکر شد، به علاوه سه مورد دیگر را قبول می کند: keyPoints ، rotate و path. همچنین، در مورد ویژگی calcMode یک تفاوت وجود دارد،که مقدار پیش فرض برای <animationmotion> مقدار paced می باشد.

از مشخصه path برای تعیین مسیر حرکت استفاده می شود. در همان قالب بیان می شود و همانند ویژگی d در عنصر مسیر تفسیر می شود. اثر انیمیشن مسیر حرکت افزودن یک ماتریس تحول مکمل به ماتریس تحول فعلی برای شی object ارجاع شده است که باعث می شود در امتداد محورهای x- و y سیستم مختصات کاربر فعلی توسط مقادیر X و Y محاسبه شده ترجمه شود. زمان. به عبارت دیگر، مسیر مشخص شده نسبت به موقعیت فعلی عنصر با استفاده از داده های مسیر برای تبدیل عنصر به موقعیت مسیر، محاسبه می شود.

<animateMotion 
    xlink:href="#circle"
    dur="1s"
    begin="click"
    fill="freeze"
    path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3    c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
    c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
    c1.9-2.1,3.7-5.5,6.5-6.5" />

در اینجا یک چیز وجود دارد که می خواهم بر آن تمرکز کنم: مختصات موجود در داده های مسیر. مسیر با حرکت (M) به نقطه با مختصات (0 ، 0) شروع می شود، قبل از اینکه منحنی (c) را به یک نقطه دیگر بکشد. توجه به این نکته مهم است که نقطه (0 ، 0) در واقع موقعیت دایره است، مهم نیست که کجا باشد - نه گوشه بالا سمت چپ سیستم مختصات. همانطور که در بالا اشاره کردیم، مختصات در مشخصه path نسبت به موقعیت فعلی عنصر است!

بنابراین کد به صورت زیر نوشته می شود به اینصورت که دایره بر روی خط حرکت می کند.

<svg width="500" height="350" viewBox="0 0 500 350">
  <circle id="circle" r="20" cx="100" cy="100" fill="tomato" />
   
  <animateMotion 
           xlink:href="#circle"
           dur="1s"
           begin="click"
           fill="freeze"
           path="M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
c1.9-2.1,3.7-5.5,6.5-6.5"
           />
</svg>

و همچنین می توانید به جای نوشتن d از <mpath> استفاده کنید:

<animateMotion xlink:href="#circle" dur="1s" begin="click" fill="freeze">
  <mpath xlink:href="#motionPath" />
</animateMotion>

مثال دیگر:

<circle id="circle" r="10" cx="0" cy="0" fill="tomato" />
   
  <animateMotion 
           xlink:href="#circle"
           dur="5s"
           begin="0s"
           fill="freeze"
           repeatCount="indefinite">
    <mpath xlink:href="#motionPath" />
  </animateMotion>

تحولات متحرک با <animatetransform>

عنصر <animatetransform>یک ویژگی تغییر شکل را روی یک عنصر هدف متحرک می کند، در نتیجه به انیمیشن ها امکان کنترل ترجمه، مقیاس گذاری، چرخش و / یا انحراف را می دهد. همان خصوصیاتی را که برای عنصر ذکر شده است، به علاوه یک ویژگی اضافی را نیز می گیرد: type.

از ویژگی type برای تعیین نوع تحول متحرک استفاده می شود. این یکی از پنج مقدار را می گیرد: translate، scale، rotate، skewX ، skewX و skewY.

ویژگی های from ، by ​​و to مقداری را می گیرند که با استفاده از همان نحوی که برای نوع تحول داده شده در دسترس است.

به مثال توجه کنید:

<rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" />

  <animateTransform 
      xlink:href="#deepPink-rectangle"
      attributeName="transform" 
      attributeType="XML"
      type="rotate"
      from="0 75 75"
      to="360 75 75" 
      dur="2s"
      begin="0s"
      repeatCount="indefinite"
      fill="freeze" 
      />

پیروز و موفق باشید.

ممتاز سرور
ارائه دهنده خدمات سرور، هاستینگ و دامنه