راهنمای کامل SVG | قسمت 5

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 02 مرداد 1397
دسته بندی ها : css

در ۴ جلسه قبلی با موارد مهمی از SVG و ساختار تگ‌های آن آشنا شدیم. همچنین مراحل ساخت یک پروژه را به صورت مختصر فرا گرفتیم. در جلسه پنجم قصد داریم در رابطه با انیمیشن‌ها صحبت کنیم.

قسمت های قبلی 

Web Animations API

استفاده کردن از انیمیشن‌ها در دنیای وب همواره از طریق Flash، جی‌کوئری، CSS و یا SMIL امکان پذیر بوده است. هدف Web Animations API این است که بتواند از قدرت و سادگی انیمیشن‌های CSS و انعطاف‌پذیری جاوااسکریپت در المان های یک صفحه مانند SVG به صورت ترکیبی استفاده کند. خواه که از CSS یا از جاوااسکریپت استفاده کنید، مطمئنا می‌توانید از قدرت قرار گرفته در انیمیشن‌های وب استفاده نمایید. 

انیمیشن‌های پیچیده

برای انیمیشن‌های ساده Web Animations API در جاوااسکریپت کافی است، اما بسیار خوب است که بدانید این مورد همراه با کتابخانه‌های مختلفی که ساخته شده نیز سازگاری دارد و توانایی ایجاد انیمیشن‌های پیچیده را خواهد داشت. همچنین این موارد باعث می‌شوند که سرعت توسعه شما بیشتر شود. یکی از استانداردها در این حوضه GSAP نام دارد. این استاندارد برای ده سال است که فعالیت دارد و در وبسایت‌های موفق مختلفی آزمایش شده است.

چگونه انیمیشن‌ SVG را ایجاد کنیم

۱. ویرایش کردن SVG

به مثال قبلی که در آخر جلسه چهارم قرار گرفته بود برمی‌گردیم. برای آنکه ستاره‌ها را در آنجا به صورت انیمیشنی قرار دهیم نیاز است که یک کلاس را به قسمتی که ستاره‌ها وجود دارد، اضافه کنیم.

۲. شفافیت پیشفرض را تغییر دهید

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

.stars-group path {
 opacity: 0.3; 
}

۳. انیمیشن را ایجاد کنید

حال نیاز داریم که انیمیشن چشمک زدن را ایجاد کنیم. از آنجایی که ما نیاز داریم در هر چشمک میزان شفافیت را به یک برسانیم پس تنها نیاز داریم که یک نقطه را در انیمیشن تغییر دهیم:

@keyframes blink {
  50% {
    opacity: 1;
  }	
}

۴. انیمیشن را اعمال کنید

به جهت اینکه انیمیشن را اعمال کنیم نیاز است که به المنت‌مان دسترسی داشته باشیم. برای اینکار به المان قبلی دسترسی پیدا می‌کنیم و به صورت زیر انیمیشن را اعمال می‌کنیم.

.stars-group path {
 animation: blink 2s infinite;
 }

۵. nth-child

برای اینکه از چشمک زدن همه ستاره‌ها در یک زمان جلوگیری کنیم، نیاز است که به صورت زیر به nth-child مربوط به گروه دسترسی داشته باشیم.

.stars-group path:nth-child(8n) {
 animation: blink 2s infinite; }

۶. تاخیر

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

.stars-group path:nth-child(8n – 1) {
 animation: blink 2s 0.25s infinite; }
.stars-group path:nth-child(8n – 2) {
animation: blink 2s 0.5s infinite; }

منبع

مقالات پیشنهادی

راهنمای کامل SVG | قسمت 1

SVG یا Scalable Vector Graphics در حال حاضر توسط تمام مرورگرها چه در سطح موبایل و یا در بخش دسکتاپ به خوبی پشتیبانی می‌شود. در اینجا قصد داریم به شما...

راهنمای کامل SVG | قسمت 2

راه‌های مختلفی برای استفاده از SVG در وب پیاده‌سازی شده است. SVG بسیار به خوبی مرورگرهای مختلف را پشتیبانی می‌کند. بنابراین مشکلی در استفاده از آن را...

راهنمای کامل SVG | قسمت 3

از آنجایی که SVG یک زبان XML است، شباهت تقریبا زیادی به HTML دارد، در این حالت نیز ما از تگ‌های تودرتو استفاده می‌کنیم و مواردی را در کروشه قرار می‌ده...

راهنمای کامل SVG | قسمت 4

فیلترها در SVG معمولا در المان defs پیاده‌سازی می‌شود و بعدها برای استفاده از آن از طریق قرار دادن آی‌دی از ویژگی‌های آن استفاده می‌کنند. این موضوع می...