scrambleText در Anime.js: متن رو با افکت رمزنگاری نمایش بده
جاوااسکریپت
فرانتاندخلاصهٔ کاملتر
Anime.js از نسخه ۴.۴.۰ یه ویژگی جدید و جذاب به اسم scrambleText معرفی کرده. این ابزار بهت امکان میده متن رو با یه انیمیشن «درهمریختن کاراکتر» به شکل تدریجی نمایش بدی — اون افکت آشنایی که تو رابطهای هکری، بازیها یا سایتهای تکنولوژیمحور خیلی میبینی.
scrambleText چطور کار میکنه؟ این تابع یه مقدار tween مبتنی بر تابع (function-based tween value) برمیگردونه که مستقیماً توی متد animate() قابل استفادهست. یعنی نیازی به پیکربندی پیچیده نداری؛ کافیه تابع رو صدا بزنی و نتیجهاش رو به خاصیت innerHTML بدی.
برای استفاده، میتونی scrambleText رو از مسیر اصلی animejs ایمپورت کنی یا از سابپَث اختصاصی انیمیشن متن:
import { scrambleText } from 'animejs/text';بعد از ایمپورت، کافیه توی animate() اینطوری ازش استفاده کنی:
import { animate, scrambleText } from 'animejs';
animate('p', {
innerHTML: scrambleText(),
loop: true,
loopDelay: 1000,
});همونطور که میبینی، انیمیشن روی تگهای p اجرا میشه، به صورت حلقهای تکرار میشه و بین هر تکرار یه ثانیه مکث داره.
یه نکته مهم اینه که باید از innerHTML استفاده کنی نه textContent. دلیلش اینه که scrambleText داخلاً از کاراکتر فاصله غیرشکننده HTML (یعنی ) برای حفظ فاصلهها استفاده میکنه و این نیاز به پارس کردن HTML داره. اگه از textContent استفاده کنی، این کاراکترها به درستی نمایش داده نمیشن.
scrambleText پارامترها و کالبکهایی هم داره که میتونی رفتار انیمیشن رو باهاشون شخصیسازی کنی، مثلاً نوع کاراکترهای تصادفی که نمایش داده میشن، سرعت، یا شیوه آشکار شدن متن.
این ویژگی بخشی از اکوسیستم گستردهتر ابزارهای متنی Anime.js هست که شامل TextSplitter هم میشه و برای ساختن انیمیشنهای متنی پیشرفتهتر طراحی شده.
در کل، اگه داری روی یه پروژه وب کار میکنی و میخوای بدون کتابخانههای اضافه، یه افکت متنی حرفهای و چشمنواز داشته باشی، scrambleText یه انتخاب ساده و قدرتمنده.
نکات کلیدی:
- scrambleText از نسخه ۴.۴.۰ به Anime.js اضافه شده
- متن رو با افکت درهمریختن کاراکتر به صورت تدریجی آشکار میکنه
- مستقیماً به عنوان مقدار خاصیت innerHTML در animate() استفاده میشه
- از innerHTML به جای textContent استفاده کن تا فاصلهها درست نمایش داده بشن
- قابل ایمپورت از مسیر اصلی animejs یا سابپَث animejs/text
- از پارامترها و کالبکها برای سفارشیسازی رفتار انیمیشن پشتیبانی میکنه
