جلوه های متحرک قدرتمند CSS را بدون جاوا اسکریپت ایجاد کنید

در این مقاله ، ما فقط با استفاده از CSS به دنیای انیمیشن ها در وب خواهیم پرداخت. ابتدا با استفاده از ترکیبی از SVG و CSS یک انیمیشن ساده ایجاد خواهیم کرد. سپس دو انیمیشن دیگر فقط با استفاده از HTML و CSS ایجاد خواهیم کرد. ما همچنین در مورد نیاز به جاوا اسکریپت و محدودیت های CSS بحث خواهیم کرد.

در پایان این مقاله ، شما می توانید با استفاده از CSS انیمیشن هایی را به نفع استفاده از JavaScript ایجاد کنید. همچنین می توانید زمان لازم برای استفاده از JavaScript برای ایجاد انیمیشن را تشخیص دهید.

برای استفاده بیشتر از این مقاله ، فرض بر این است که شما حداقل دانش اصلی CSS و HTML را دارید. اگر به تازگی با توسعه وب شروع کرده اید ، منابع بسیار خوبی برای یادگیری و کمک گرفتن وجود دارد ، مانند منابع یادگیری در sitePoint ، انجمن های بسیار مفید SitePoint و همچنین freecodecamp.

طراحی انیمیشن جلوه

این یک انیمیشن چشمگیر است که با فریبکاری آسان ایجاد می شود. در زیر تصویری از آنچه که ما برای آن هدف قرار داده ایم ارائه شده است.

ابتدا باید SVG را برای آرم خود ایجاد کنیم:

<svg xmlns="http://www.w3.org/2000/svg" width="279.15" height="343.95" overflow="visible" stroke="#000" stroke-width="1">
 <path d="M110.57 248.64c-22.7-21.25-45.06-42.09-67.31-63.06-11.73-11.06-23.32-22.26-34.87-33.51C-2.6 141.35-2.86 128 8.02 117.42 47.67 78.82 87.46 40.35 127.21 1.84c.46-.44 1.03-.77 2.47-1.84 12.52 13.66 25.06 27.34 37.1 40.47-4.44 4.76-10.06 11.31-16.21 17.33-22.69 22.2-45.56 44.22-68.34 66.32-7.89 7.66-7.97 13.48.11 21.07 19.38 18.19 38.85 36.29 58.37 54.33 7.53 6.96 7.75 12.42.32 19.64-10.01 9.72-20.05 19.4-30.46 29.48z"/>
 <path d="M150.02 343.95c-13.41-13.03-26.71-25.97-40.2-39.08 1.23-1.32 2.19-2.44 3.24-3.46 27.8-26.95 55.61-53.89 83.42-80.83 8.32-8.05 8.41-13.92-.01-21.79-19.54-18.27-39.14-36.47-58.77-54.63-6.52-6.04-6.76-12.11-.37-18.33 10.24-9.96 20.52-19.87 31.15-30.16 6.33 5.89 12.53 11.58 18.65 17.37 27.53 26.03 55.07 52.05 82.52 78.16 12.57 11.96 12.66 24.78.33 36.75-38.99 37.85-78.04 75.64-117.07 113.45-.82.79-1.71 1.51-2.89 2.55z"/>
</svg>

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

با استفاده از SVG خود ، ما اکنون مجموعه را تنظیم می کنیم fill-opacity به 0. بعداً این را تحریک خواهیم کرد:

svg {
  fill-opacity: 0;
}

(قلم به روز شده)

اکنون می توانیم روی طراحی SVG تمرکز کنیم. ما با استفاده از CSS به این هدف خواهیم رسید stroke-dashoffset و stroke-dasharray خواص

stroke-dasharray ویژگی الگوی شکافها و خطوطی را که برای ایجاد سکته مغزی به یک مسیر استفاده می شود کنترل می کند. مثلا، stroke-dasharray: 10 اعمال شده در مسیرها در SVG با ضربات و طول ده پیکسل یک اثر ناگهانی ایجاد می کند:

قلم را ببینید

نسخه ی نمایشی Stroke-dasharray توسط SitePoint (SitePoint)
بر CodePen.

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

اما طرح کلی آرم چه مدت است؟ یک راه آسان برای مقابله با این مسئله تعیین طول است. بیایید با اضافه کردن کد SVG خود را ویرایش کنیم pathLength="1" به هر مسیر:

 …
 <path pathLength="1" d="M110.57 … >
 …

(قلم به روز شده)

این کار انجام انیمیشن نقاشی را بسیار راحت تر می کند. حالا که ما تنظیم کردیم pathLength، ما همچنین می توانیم تنظیم کنیم stroke-dasharray به 1 در CSS:

svg path {
  stroke-dasharray: 1;
}

(قلم به روز شده)

اکنون ، به نظر می رسد که هیچ چیز در اینجا تغییر نکرده است ، اما اشکالی ندارد. کل مسیر برای هر قسمت از آرم اکنون فقط یک خط فشرده است. (می توانید با حذف آزمایش کنید pathLength="1" از یکی از مسیرها به طور ناگهانی به یک خط نقطه ای از خط 1px و شکاف تبدیل خواهد شد.)

اکنون می توانیم استفاده کنیم stroke-dashoffset، که مشخص می کند تا چه اندازه باید الگوی خط تیره را شروع کنیم. در مورد ما ، ما می خواهیم تنظیم کنیم stroke-dashoffset به 1، بنابراین ما از a شروع می کنیم gap به جای اینکه یک dash. از آنجا که طول هر یک از شکاف های ما کل طول ماست path، اکنون یک صفحه خالی خواهیم دید:

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
}

اکنون می توانیم متحرک سازی کنیم stroke-dashoffset بازگشت به 0، که یک اثر نقاشی می دهد:

svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;  
  animation: draw 2s forwards;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

سرد! با استفاده از این در حال حاضر ما این را داریم:

قلم را ببینید

انیمیشن آرم SitePoint: مرحله 5 توسط SitePoint (SitePoint)
بر CodePen.

برای تکمیل انیمیشن خود ، باید فقط در انیمیشن خود تحریک کنیم fill-opacity:

svg {
  width: 40%;
  fill-opacity: 0;
  // we set a delay of 2s so it won't start until our drawing is finished
  animation: fadeOpacity 2s forwards 2s;
}

@keyframes fadeOpacity {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

اکنون انیمیشن نهایی خود را داریم:

قلم را ببینید

انیمیشن آرم SitePoint: مرحله 6 (نهایی) توسط SitePoint (SitePoint)
بر CodePen.

شرط می بندم که خیلی راحت تر از آن چیزی بود که فکر می کردی! من می دانم stroke-dashoffset و stroke-dasharray ویژگی ها می توانند کمی گیج کننده باشند ، اما هنگامی که ویژگی خود را تنظیم می کنید path به طول 1، کار با آنها بسیار راحت تر است.

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

ادامه مطالعه ایجاد جلوه های متحرک قدرتمند CSS بدون جاوا اسکریپت در SitePoint.