Nenda kwa maudhui

MpyaInjini ya uhuishaji, mitindo ya aikoni ya moja kwa moja na Ichava DevTools vimefika.

Ona mapya →

Ichava
Kipya

Injini ya uhuishaji ya Ichava

Huisha SVG yoyote kwa darasa moja, sifa ya data au mwito mmoja. Jaribu kila mpangilio kwenye aikoni za tovuti hii, kisha nakili msimbo.

Ni nini

js-motion kwa aya moja

@ichava/js-motion ni injini ya uhuishaji ya aikoni na michoro ya SVG, isiyotegemea mfumo wowote na inayoongozwa na JSON. Haina tegemezi wakati wa kuendesha: inacheza mipangilio kupitia Web Animations API, na familia zake za msingi pia huja kama keyframes za CSS, hivyo aikoni inaweza kusonga bila JavaScript yoyote.

Ndiyo injini inayoendesha uhuishaji wa ukurasa huu na wa kivinjari cha aikoni, na ni chanzo huria kwenye GitHub. Husakinishwa kutoka commit ya git iliyobanwa na huja na faili zilizojengwa pamoja na hash ya kila moja, hivyo hakuna kinachojengwa wakati wa kusakinisha.

Vipengele

Kila kitu ambacho injini hufanya

Kuanzia darasa moja la CSS hadi mchoro wa tabaka unaoweza kuusogeza fremu kwa fremu.

  • Mipangilio 240, familia 40

    Spin, pulse, heartbeat, bounce, swing, glow, draw na zaidi, kila moja kwa aina sita: ya kawaida, ya kurudi nyuma, hafifu na kali. dist/presets.json inaziorodhesha zote.

  • Kishiko kimoja kwa kundi

    Reveal, cascade, assemble, parallax na draw huhuisha kila tabaka kwa kupishana. play() hurudisha kishiko kimoja chenye seek(), reverse() na ahadi finished kwa tabaka zote.

  • Sitisha, simamisha na haribu

    pauseAll(), resumeAll() na stopAll() hufikia kila kitu ambacho injini ilianzisha. Ipe kitufe chako cha kusitisha kwa WCAG 2.2.2, na tumia destroy() kwenye injini yako kutoka create().

  • Tabaka huzunguka kwenye kisanduku chake

    Kila tabaka linalohuishwa hupata transform-box: fill-box, hivyo kukuza au kuzungusha huzunguka tabaka lenyewe, na cancel() hurudisha kila mtindo iliyoweka.

  • Mwendo uliopunguzwa huheshimiwa

    Huheshimu prefers-reduced-motion na [data-reduce-motion] ya mwenyeji, na husimamisha kinachoendelea mpangilio ukibadilika ukurasa ukiwa wazi.

  • Muundo wenye uadilifu uliobanwa

    dist/integrity.json ina sha384 ya kila faili iliyojengwa, tayari kwa sifa ya integrity unapoweka hati mwenyewe.

  • Njia tatu za kuhuisha

    Darasa la CSS bila JavaScript, sifa za data-* zinazounganishwa na auto(), au play() na animate() kutoka kwenye msimbo, kwa mkunjo, kasi, ucheleweshaji na marudio yoyote.

  • Hakuna tegemezi

    Web Animations pamoja na mbadala wa CSS, hakuna hati za ndani, hakuna kinachopakuliwa. Uingizaji wa Lottie ni wa hiari, na hali yake kamili hubaki imezimwa hadi ukubali hatari.

  • Sanidi na panua

    Sajili mipangilio, mikunjo, familia na aina zako mwenyewe, kwa kila injini, ili michomeko miwili kwenye ukurasa mmoja isishiriki mipangilio.

Uwanja wa majaribio

Ijaribu kwenye aikoni za tovuti hii

Chagua aikoni, mpangilio na chaguo zake, kisha cheza, sitisha, sogeza, rudisha nyuma na simamisha. Msimbo ulio chini daima unalingana na unachokiona.

Familia za kundi (zilizowekwa alama *) huhuisha tabaka za SVG, hivyo huchezwa kwenye mfano wa tabaka.

Hali: imesimamishwa
Msimbo wa uhuishaji huu
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>
Sakinisha na tumia

Iongeze kwenye mradi wako

Haipo kwenye npm: isakinishe kutoka GitHub kwenye commit iliyo hapa chini. Kisha chagua kiwango unachohitaji.

{
  "dependencies": {
    "@ichava/js-motion": "github:ichava/js-motion#66b2773213dbbebdcf30932f4efc2061fc6fa521"
  }
}
Mitindo ya aikoni ya moja kwa moja

Badilisha mtindo wa kifurushi chochote cha mistari, moja kwa moja

Mitindo hubadilisha jinsi aikoni ya mistari inavyochorwa bila kubadilisha faili: kila aikoni hubaki SVG ile ile.

Mtindo wa aikoni
AikoniStrokeSolidDualMidHalf
rocket
heart
camera
accessible
  • Mitindo mitano: Stroke, Solid, Dual tone, Midtone na Halftone.
  • Hutumika moja kwa moja, kwa kifurushi kizima mara moja, kwenye uwanja wa majaribio hapo juu na kwenye kivinjari cha aikoni.
  • Bendera na emoji za rangi hubaki na rangi zao.
  • Kwenye kivinjari cha aikoni, kidhibiti cha unene wa mstari na msimbo ulio tayari kunakiliwa kwa kila mtindo.
Fungua programu ya kivinjari
Ichava DevTools

Tazama ndani ya kivinjari cha aikoni

Ichava DevTools ni droo ndani ya kivinjari cha aikoni kwa wanaojenga nacho.

  • Vichupo vya Events, State, Storage, Logs na Boot, pamoja na majaribio ya kivinjari chenyewe.
  • Kichupo cha Status kwa watumiaji wenye uwezo wa ichava.admin.
  • Hujishikiza kwenye ukingo wowote wa dirisha na hufunguka kwa ⇧⌘D.
  • Huja kwenye miundo ya utatuzi yenye kipengele cha devtools kimewashwa; miundo ya uzalishaji haikijumuishi.
Fungua programu ya kivinjari

Soma mwongozo kamili

Kila chaguo, kila familia na kiwango cha Lottie vimeelezwa kwenye hazina.

js-motion kwenye GitHubMwongozo wa matumizi