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

در ۴ جلسه قبلی با موارد مهمی از 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; }

منبع