انتقل إلى المحتوى

جديدمحرّك الحركة ومعالجات الأيقونات الحيّة وأدوات Ichava DevTools أصبحت متاحة.

← اطّلع على الجديد

Ichava
الجديد

محرّك الحركة من Ichava

حرّك أي ملف SVG بصنف واحد أو سمة data أو استدعاء واحد. جرّب كل إعداد مسبق على أيقونات هذا الموقع، ثم انسخ الشيفرة.

ما هو

js-motion في فقرة واحدة

@ichava/js-motion محرّك حركة لأيقونات ورسوم SVG، مستقل عن أي إطار عمل ويعتمد على JSON. لا يعتمد على أي حزمة أثناء التشغيل: يشغّل الإعدادات المسبقة عبر Web Animations API، وتأتي عائلاته الأساسية أيضًا كإطارات CSS، فتتحرك الأيقونة دون أي JavaScript.

هو المحرّك وراء الحركة في هذه الصفحة وفي متصفّح الأيقونات، وهو مفتوح المصدر على GitHub. يُثبَّت من إيداع git مثبّت ويأتي بملفاته المبنية مع بصمة لكل منها، فلا يُبنى شيء عند التثبيت.

الميزات

كل ما يفعله المحرّك

من صنف CSS واحد إلى رسم بطبقات تتنقّل فيه إطارًا بإطار.

  • 240 إعدادًا مسبقًا في 40 عائلة

    Spin وpulse وheartbeat وbounce وswing وglow وdraw وغيرها، لكلٍّ منها ستة أشكال: العادي والمعكوس والخفيف والقوي. يسردها dist/presets.json كلها.

  • مقبض واحد للمجموعة

    تحرّك reveal وcascade وassemble وparallax وdraw كل طبقة بتتابع. يعيد play() مقبضًا واحدًا فيه seek() وreverse() ووعد finished لكل الطبقات.

  • الإيقاف المؤقت والإيقاف والتدمير

    تصل pauseAll() وresumeAll() وstopAll() إلى كل ما بدأه المحرّك. أعطه زر الإيقاف المؤقت الخاص بك لمعيار WCAG 2.2.2، واستدعِ destroy() على محرّكك الخاص من create().

  • كل طبقة تدور حول صندوقها

    تحصل كل طبقة متحركة على transform-box: fill-box، فيدور التكبير أو التدوير حول الطبقة نفسها، ويعيد cancel() كل نمط وضعه.

  • احترام تقليل الحركة

    يحترم prefers-reduced-motion و[data-reduce-motion] لدى المضيف، ويوقف ما يعمل إذا تغيّر الإعداد والصفحة مفتوحة.

  • بناء بسلامة مثبّتة

    يحمل dist/integrity.json بصمة sha384 لكل ملف مبني، جاهزة لسمة integrity عندما تستضيف السكربت بنفسك.

  • ثلاث طرق للتحريك

    صنف CSS دون JavaScript، أو سمات data-* يربطها auto()، أو play() وanimate() من الشيفرة، مع أي منحنى وسرعة وتأخير وعدد تكرار.

  • بلا اعتماديات

    Web Animations مع بديل CSS، بلا سكربتات مضمّنة ولا تنزيلات. استيراد Lottie إضافة اختيارية، ويبقى وضعه الكامل معطّلًا حتى تقبل المخاطرة.

  • قابل للضبط والتوسيع

    سجّل إعداداتك المسبقة ومنحنياتك وعائلاتك وأشكالك لكل محرّك، فلا يتشارك تضمينان في صفحة واحدة الإعدادات أبدًا.

ساحة التجربة

جرّبه على أيقونات هذا الموقع

اختر أيقونة وإعدادًا مسبقًا وخياراته، ثم شغّل وأوقف مؤقتًا وتنقّل واعكس وأوقف. الشيفرة أدناه تطابق دائمًا ما تراه.

عائلات المجموعة (المعلَّمة بـ *) تحرّك طبقات ملف SVG، لذا تعمل على النموذج ذي الطبقات.

الحالة: متوقفة
شيفرة هذه الحركة
import IchavaMotion from '@ichava/js-motion';
import '@ichava/js-motion/css';

// An engine of your own: destroy() then cannot reach another embed’s animations.
const motion = IchavaMotion.create();
const handle = motion.play(document.querySelector('#icon'), 'heartbeat', {
  speed: 1,
  easing: 'ease-in-out',
  iterations: 'infinite',
});

handle?.pause();
handle && (handle.currentTime = 400);
handle?.reverse();
await handle?.finished;
motion.destroy();      // unwire and stop everything this engine started

<!-- or declaratively, wired by motion.auto(root) -->
<svg data-ichava-motion="heartbeat" data-motion-trigger="load" data-motion-speed="1" data-motion-easing="ease-in-out" data-motion-iterations="infinite">…</svg>
التثبيت والاستخدام

أضفه إلى مشروعك

ليس على npm: ثبّته من GitHub عند الإيداع أدناه، ثم اختر المستوى الذي تحتاجه.

{
  "dependencies": {
    "@ichava/js-motion": "github:ichava/js-motion#66b2773213dbbebdcf30932f4efc2061fc6fa521"
  }
}
معالجات الأيقونات الحيّة

غيّر نمط أي حزمة خطوط مباشرةً

تغيّر المعالجات طريقة رسم أيقونة الخطوط دون تغيير الملف: تبقى كل أيقونة ملف SVG نفسه.

نمط الأيقونة
الأيقونةStrokeSolidDualMidHalf
rocket
heart
camera
accessible
  • خمس معالجات: Stroke وSolid وDual tone وMidtone وHalftone.
  • تُطبَّق مباشرةً على الحزمة كلها دفعة واحدة، في ساحة التجربة أعلاه وفي متصفّح الأيقونات.
  • تحتفظ الأعلام والرموز التعبيرية الملوّنة بألوانها.
  • في متصفّح الأيقونات، أداة لسماكة الخط وشيفرة جاهزة للنسخ لكل معالجة.
افتح تطبيق المتصفح
Ichava DevTools

انظر داخل متصفّح الأيقونات

أدوات Ichava DevTools درج داخل متصفّح الأيقونات لمن يبنون به.

  • تبويبات Events وState وStorage وLogs وBoot، إلى جانب اختبارات المتصفّح الذاتية.
  • تبويب Status للمستخدمين الذين يملكون صلاحية ichava.admin.
  • يُثبَّت على أي حافة من النافذة ويُفتح بـ ⇧⌘D.
  • يأتي في بُنى التصحيح مع تفعيل ميزة devtools، ولا تتضمّنه بُنى الإنتاج.
افتح تطبيق المتصفح

اقرأ الدليل الكامل

كل خيار وكل عائلة ومستوى Lottie موثّقة في المستودع.

js-motion على GitHubدليل الاستخدام