ستروکیت

انیمیشن در صفحات وب لذت‌بخش است. از آن‌جا که آن‌ها بازخورد بصری ارائه می‌دهند، تجربه کاربری را بهبود می‌دهند. روش‌های مختلفی برای ایجاد انیمیشن‌های وب وجود دارد، از جمله می‌توان به کتابخانه‌های جاوا اسکریپت، گیف‌ها و فیلم‌ها اشاره کرد.

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

انیمیشن طراحی خط

این انیمیشن عالی باعث می‌شود که انگار شما در حال ترسیم خطوط SVG هستید. برای این کار نیاز داریم که با چند ویژگی در SVG بیشتر آشنا شویم.

Stroke

ویژگی stroke  در SVG، رنگ یک شیٔ خطی را  تعریف می‌کند. 

مقدارهای ممکن:

• نام یک رنگ، مانند red
• کد رنگ، مانند rgb(204, 41, 84) یا #CC2954

مقدار پیش فرض برای رنگِ ویژگی stroke، مقدار none است.

Stroke چندین خصوصیت دیگر دارد، مانند stroke-width برای ضخامت خط، stroke-linecap برای ظاهر لبه‌ی خط، و stroke-linejoin برای ظاهر زاویه های خط.

تمام خصوصیات stroke را می توان در هر نوع خط، متن و رئوس عناصر مانند یک دایره اعمال کرد.

stroke-dasharrayبرای ایجاد خطوط منقطع استفاده می‌شود. طول و ضخامت‌ها و طول شکاف‌های موجود در بین خط را نشان می‌دهد.  stroke-dashoffset مکان اولین خط فاصله را تعریف می‌کند. مقادیر این دو خاصیت باید طول داشته باشند.

واحدهای طول ممکن عبارتند از:

• واحد مشخصی ندارد، مانند 2 
• em، مانند 2em
• پیکسل، مانند 2px
• درصد، مانند 20%

<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 300 262" style="max-width: 300px;">
 <path d="M 247.79377,36.792498 C 221.15602,14.17917 181.32159,17.931812 156.59002,43.371807 147.01452,54.743027 147.0473,53.4022 137.33264,43.420547 117.39099,22.85411 77.165545,10.475261 46.128902,36.792498 15.434395,62.914792 13.821467,109.79845 41.290118,138.06512 l 94.576222,97.37377 c 3.03037,3.11908 7.03823,4.72736 11.04612,4.72736 4.00788,0 8.01576,-1.55955 11.04612,-4.72736 l 94.57622,-97.37377 c 27.5664,-28.26667 25.95347,-75.150328 -4.74103,-101.272622 z" id="heart-svg" class="heart-animation"></path>
 <style>
 #heart-svg{
  fill: none;
  stroke: red;
  stroke-width: 3px;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
 }
 .heart-animation {
  animation-name: heartStroke;
  animation-duration: 5s;
  animation-iteration-count: infinite;
 }
 @keyframes heartStroke {
  0% { stroke-dashoffset: 2000;fill:none }
  100% {stroke-dashoffset: 0;fill:red}
 }
 </style>
</svg>

در این انیمیشن قلب دارای خطوط و شکافهای بسیار طولانی است(stroke-dasharray: 2000). شما فقط می‌توانید یک stroke مداوم را مشاهده کنید، زیرا خط از طول قلب طولانی‌تر است. در Keyframes خصوصیت stroke-dashoffset کم و زیاد می‌شود و به نظر می‌رسد که خط در حال ترسیم شدن است و در آخر هم قلب با ویژگی fill:red به رنگ قرمز در می‌آید.