DevSource

#نمونه_کد_فرانت_اند@devsourcech تکنیک Procedural Animation لینک گیت هاب : https://github.com/HamedFarazi/Procedural-Animation1/tree/main لینک مشاهده لایو: https://procedural-animation1.vercel.app/ #Hamed #تکنولوژی اگر این مطلب براتون مفید بود، با زدن…

این تکنیک با Canvas ساخته نشده 🛠️

فقط با:
✅ CSS
✅ JavaScript
✅ CSS Doodle

این انیمیشن از تکنیکی به اسم Procedural Animation استفاده می‌کنه. 🎬

یعنی به جای اینکه 100 متن و 100 انیمیشن دستی بسازی، یک الگوریتم می‌نویسی که خودش موقع اجرا همه‌چیز رو تولید می‌کنه. 🤖

ترفندهای استفاده‌شده:

• CSS Variables
• @property
• Dynamic Keyframes
• 3D Transform
• CSS Doodle

فرانت‌اند مدرن بیشتر از اینکه حفظ کردن کد باشه، یاد گرفتن این جور تکنیک‌هاست. 🚀

1️⃣ CSS Doodle
کل افکت روی کتابخانه css-doodle.com ساخته شده.

<css-doodle></css-doodle>

این کتابخونه اجازه میده با CSS الگوها، انیمیشن‌ها و آثار هنری تولید کنی. 🎨

2️⃣ CSS Custom Properties (متغیرهای CSS)

--color-1: #fff;
--color-2: #fed790;

و بعد:

color: var(--color-1);

متغیرهای CSS فقط برای رنگ نیستن؛ می‌تونن انیمیشن و تم کل سایت رو کنترل کنن. 🎛️

3️⃣ @property
این قسمت خیلی مهمه:

@property --color-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #fed790;
}

بعد:

--color-2: #00bb9c;

انیمیت میشه. 🎨 با @property می‌تونی متغیرهای CSS رو انیمیت کنی؛ قابلیتی که خیلی‌ها نمی‌شناسن.

4️⃣ CSS 3D Transform

rotate: x y z 2400deg;

و:

translate: 30vmin;
scale: 0;

اکثر انیمیشن‌های حرفه‌ای وب فقط با ترکیب:
translate
rotate
scale
ساخته میشن.

5️⃣ Dynamic Keyframes
این بخش خیلی حرفه‌ایه:

const xKeyframes = layers.map(...)

جاوااسکریپت خودش Keyframe تولید می‌کنه. 🔄
لازم نیست همیشه Keyframe رو دستی بنویسی؛ میشه با JS تولیدشون کرد.

6️⃣ DOM Injection

document.createElement("style")

و
JavaScript
style.textContent = ...;
استایل در لحظه ساخته میشه. 💻

7️⃣ Procedural Animation
کل افکت در واقع از این تکنیک استفاده می‌کنه:

JavaScript

@r(...)
@p(...);

و درنهایت موقع اجرا مقادیر تصادفی تولید میشن. 🎲

دوستان Procedural Animation یعنی به جای ساخت 100 انیمیشن، یک الگوریتم بنویسی که خودش انیمیشن تولید کنه.

#Hamed
#تکنولوژی

اگر این مطلب براتون مفید بود، با زدن روی تیک زیر اعلام حضور کنید ✅

⚠️ آدرس کانال در تلگرام (حتما جوین بشید)
🚀 @devsourcech
✅ در بله
🔹 Ch: @devsource
سایت مستندات برنامه‌نویسی:
🥇 https://devsource.ir

75 viewsHamed, edited 18:49