22
تشکر

انیمیشن inline در SVG

Scalable Vector Graphics

Scalable Vector Graphics

اشکال موجود در SVG را به چندین روش میتوان به حالت animation در آورد که در این مطلب ما با تگ animate و تگهای مشابه آن کار خواهیم کرد و خصوصیات آن را شرح میدهیم.

در این مطلب علاوه بر انیمیشن inline کمی نیز با نحوه رسم اشکال در SVG آشنا میشویم.

در ادامه مطلب همراه ما باشید…

نحوه کار انیمیشن inline

همانطور که میدانید در SVG هر شکلی در‌ واقع یک تگ HTML است. مثلاً با استفاده از تگ rect میتوان مستطیل و یا با استفاده از تگ circle میتوان یک دایره را رسم کرد، حالا تگی نیز با نام animate داریم که هر زمان بخواهیم شکلی را در SVG به حالت animation دربیاوریم باید این تگ را داخل تگهای مورد نظر قرار دهیم.

شروع به کار

ابتدا یک مستطیل رسم میکنیم.

<svg width="200" height="200" viewPort="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="200" height="200" fill="#00c77b">
  </rect>
</svg>

در کد بالا ما یک مستطیل را با عرض و ارتفاع 200 رسم کردیم و همچنین یک رنگ به آن دادیم. اگر الان نتیجه را مشاهده کنید یک مستطیل ثابت میبینید.

حالا یک تگ animate با خصوصیات زیر درون تگ rect ایجاد میکنیم.

<animate attributeName="width" from="0" to="200" dur="2s"></animate>

خصوصیت attributeName نام ویژگی را میگیرد که ما میخواهیم آن را به حالت انیمیشن دربیاوریم که در اینجا ما آن را width گرفتیم. با استفاده از خصوصیات from و to مقدار اولیه و نهایی عرض را وارد کردیم و همچنین توسط خصوصیت dur مدت زمان اجرای انیمیشن را مشخص میکنیم.

نتیجه مشابه زیر میشود:

میتوان چندین تگ animate برای یک شکل ایجاد کرد. برای مثال ما انیمیشن ارتفاع را نیز برای مثال بالا ایجاد میکنیم.

شما میتوانید از خاصیت‌های دیگری نیز استفاده کنید. برای مثال اگر بخواهیم background را به حالت انیمیشن دربیاوریم باید از مقدار fill استفاده کنیم.

تگ animate خاصیت دیگری نیز به نام repeatCount دارد که دفعات تکرار انیمیشن را مشخص میکند که اگر آن را indefinite بگذاریم تا بینهایت انیمیشن اجرا خواهد شد.

در SVG اشکال دیگری نیز داریم. در مثال زیر یک دایره رسم کردیم سپس مقدار خاصیت attributeName را برابر r یا همان شعاع دایره قرار دادیم. همچنین توسط خاصیت begin تأخیر 2 ثانیه ای در اجرا انیمیشن ایجاد کردیم.

توسط تگ path میتوانیم هر شکلی که بخواهیم را رسم کنیم و بیشتر طراحی ها در SVG توسط این تگ انجام میشود. اگر بخواهیم شکل دیگری را بر اساس تگ path به صورت انیمیشن دربیاریم باید از تگ animateMotion و همچنین تگ mpath استفاده کنیم.

همچنین توسط تگ animateTransform میتوان انیمیشن هایی با نوع scale یا rotate ایجاد کرد. برای مثال در کد زیر ما دایره ایجاد شده را به صورت بینهایت rotate دادیم.

اما اگر بخواهیم همین کار زمانی انجام شود که ماوس روی آن قرار بگیرد باید از خاصیت‌های begin و end استفاده کنیم که begin را قبلاً معرفی کردیم.

نتیجه‌ گیری

این مطلب تنها مقدمه‌ای از انیمیشن inline در SVG بود. با این نوع انیمیشن ها کارهای جالبی مانند این مثال میتوان انجام داد.

  • عجب دنیاییه این HTML5… ممنون

  • محمد جهانی می‌گه:

    یادگیری SVG خیلی خوب و بسیار لازمه ولی بعضی وقتا میشه یه سری کارا رو راحت‌تر انجام داد. Snap یکی از بهترین کتاب‌خونه‌های جاوااسکریپت برای کار با SVG هستش. اگه علاقه داشتید یه چکش بکنید. (:
    snapsvg.io

  • رضا می‌گه:

    عالی بود


  • نظرات این مطلب بسته است.