--- type: Resumen title: "Estudio — Anime.js (Casos de uso + grafo animado)" description: "Estudio de animejs publicado como sitio: scripts minimalistas para implementarlo y cómo se conecta con el OKF." resource: "https://gerardoesquivia.com/animejs/" status: publicado tags: [estudio, animejs, scripts-minimalistas, documentacion, okf] timestamp: 2026-10-04 creator: "Gerardo Esquivia Zapata" grafo: datos --- # Estudio — Anime.js (Casos de uso + grafo animado) > **Sitio publicado:** https://gerardoesquivia.com/animejs/ > **Nota generada del sitio** para que el estudio regrese al OKF (REGLA del ciclo: > la documentación no está completa hasta estar publicada **Y** registrada). ## Cómo usarla Los **scripts minimalistas** de abajo se copian y funcionan. Esa es la parte que vale: la prosa se lee y se olvida; un script se pega y arranca. --- ## 1 · Animación básica — animate() La llamada más corta posible: anima una propiedad de un elemento. ### 🐍 Script minimalista ``` // npm install animejs import { animate } from 'animejs'; // Mueve .cuadrado 250px a la derecha con rebote. animate('.cuadrado', { translateX: 250, duration: 800, ease: 'outBounce', }); // Repetición en bucle, yendo y viniendo. animate('.cuadrado', { translateX: 250, loop: true, alternate: true, }); ``` ### 🔁 Cómo funciona - animate(targets, params) crea y arranca la animación. - targets puede ser un selector CSS, elemento, objeto JS o array. - translateX es una transformación animable; duration en ms; ease es la curva de avance. - loop repite y alternate invierte la dirección en cada ciclo. 💡 Anime.js v4 anima transforms individuales (translateX, no el transform compuesto) y usa ease (en v3 era easing). ## 2 · Timeline — secuencia sincronizada Coordina varias animaciones en el tiempo: en secuencia, a la vez o solapadas. ### 🐍 Script minimalista ``` import { createTimeline } from 'animejs'; const tl = createTimeline({ defaults: { duration: 750 } }); tl.label('inicio') // marca reutilizable .add('.cuadrado', { x: '15rem' }, 500) // empieza en el ms 500 .add('.circulo', { x: '15rem' }, 'inicio') // a la vez que 'inicio' .add('.triangulo', { x: '15rem', rotate: '1turn' }, '<-=500'); // 500ms antes de acabar ``` ### 🔁 Cómo funciona - createTimeline() sincroniza animaciones, timers y callbacks. - .add(target, params, position) encola una animación en una posición de tiempo. - Posiciones: número en ms, nombre de label(), o relativas '<-=' (al final) / '-=' (al inicio). - defaults aplica parámetros comunes a todos los hijos. 💡 La timeline hereda los métodos de playback: tl.play(), tl.pause(), tl.reverse(). ## 3 · Stagger — efecto cascada Distribuye valores y retardos de forma progresiva entre múltiples elementos. ### 🐍 Script minimalista ``` import { animate, stagger } from 'animejs'; animate('.item', { x: '17rem', scale: stagger([1, .1]), // valores progresivos por elemento delay: stagger(100), // 100ms entre cada elemento }); ``` ### 🔁 Cómo funciona - stagger(value) devuelve un valor de función que se distribuye entre los targets. - Como delay → escala el tiempo (cada elemento empieza 100ms después). - Como valor (scale, x, rotate) → cada elemento recibe un valor distinto. 💡 Opciones útiles: from (first/last/center/edges) y grid para escalonar en tablero. ## 4 · Controles y playback Controla una animación desde el código: pausar, reanudar, invertir, reiniciar o saltar. ### 🐍 Script minimalista ``` import { animate } from 'animejs'; const anim = animate('.logo', { translateX: 200, duration: 1000, loop: true, alternate: true, }); anim.pause(); // pausar anim.play(); // reanudar anim.reverse(); // invertir dirección anim.restart(); // reiniciar desde 0 anim.seek(500); // saltar al ms 500 anim.complete(); // ir al final (onComplete) ``` ### 🔁 Cómo funciona - animate() devuelve una instancia con métodos de control. - Con autoplay: false la animación no arranca sola y el código decide cuándo. - Callbacks (onBegin, onUpdate, onComplete, onLoop) avisan de los eventos. 💡 revert() quita los estilos inline que dejó la animación (útil en interfaces). ## 5 · Grafo animado — el ciclo de una animación El token 🟠 recorre el flujo en orden. Clic en el gráfico reinicia la animación. Iniciando… ## 6 · Referencia rápida y regla de librerías ### 🔠 API esencial de Anime.js v4 | Función | Qué hace | | --- | --- | | animate(targets, params) | Crea y reproduce una animación | | createTimeline(params) | Línea de tiempo con .add(), .label(), posiciones | | stagger(value) | Valores/retardos progresivos entre targets | | splitText() / scrambleText() | Animación de texto (letras/palabras) y efecto "descifrado" | | onScroll() | Animaciones vinculadas al scroll (ScrollObserver) | | morphTo() / createMotionPath() | SVG: morphing y recorrido por trazado | | waapi.animate() | Versión ligera (3KB) sobre la Web Animations API | | Parámetro | Qué es | | --- | --- | | duration · delay · ease | Parámetros del tween | | loop · alternate · reversed · autoplay | Ajustes de reproducción | | onBegin · onUpdate · onComplete · onLoop | Callbacks del ciclo de vida | | play() · pause() · reverse() · seek() · revert() | Métodos de control | 📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de instalar. Instalación: npm install animejs. Docs: https://animejs.com/documentation. 📱 Escanéalo para abrir la documentación https://gerardoesquivia.com/animejs/ Anime.js · Casos de uso (básica · timeline · stagger · controles) · OKF de Gerardo Esquivia Zapata · 2026-08-28 (function () { const nodes = [ { id: "code", label: "animate()", sub: "crear", x: 70, y: 210 }, { id: "engine",label: "Engine", sub: "motor/RAF", x: 520, y: 90 }, { id: "target",label: "Target", sub: "elemento", x: 520, y: 330 }, { id: "done", label: "onComplete", sub: "callback", x: 800, y: 210 }, ]; const edges = [ { from: "code", to: "engine", label: "registra", loop: false }, { from: "engine", to: "target", label: "interpola", loop: true }, { from: "target", to: "engine", label: "actualiza", loop: true }, { from: "engine", to: "done", label: "completa", loop: false }, { from: "done", to: "code", label: "loop", loop: false }, ]; const pos = Object.fromEntries(nodes.map(n => [n.id, { x: n.x, y: n.y }])); const svg = document.getElementById("grafo"); const NS = "http://www.w3.org/2000/svg"; function el(tag, attrs) { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); return e; } const edgePaths = [], edgeArrows = []; edges.forEach((ed) => { const a = pos[ed.from], b = pos[ed.to]; let d, mid; if (ed.loop) { const dir = ed.from === "engine" ? 1 : -1; const cx = 520 + dir * 150, cy = (a.y + b.y) / 2; d = `M ${a.x} ${a.y} C ${cx} ${a.y}, ${cx} ${b.y}, ${b.x} ${b.y}`; mid = { x: cx, y: cy }; } else if (ed.from === "done") { d = `M ${a.x} ${a.y} C ${(a.x+b.x)/2} 420, ${(a.x+b.x)/2} 420, ${b.x} ${b.y}`; mid = { x: (a.x + b.x) / 2, y: 390 }; } else { const dx = Math.abs(b.x - a.x), dy = Math.abs(b.y - a.y); if (dy > dx) { const my = (a.y + b.y) / 2; d = `M ${a.x} ${a.y} C ${a.x} ${my}, ${b.x} ${my}, ${b.x} ${b.y}`; mid = { x: (a.x + b.x) / 2, y: my }; } else { const mx = (a.x + b.x) / 2; d = `M ${a.x} ${a.y} C ${mx} ${a.y}, ${mx} ${b.y}, ${b.x} ${b.y}`; mid = { x: mx, y: (a.y + b.y) / 2 }; } } const path = el("path", { class: "edge", d }); svg.appendChild(path); edgePaths.push(path); const ang = Math.atan2(b.y - mid.y, b.x - mid.x); const tx = b.x - 18 * Math.cos(ang), ty = b.y - 18 * Math.sin(ang); const arrow = el("path", { class: "arrow", d: `M ${tx} ${ty} l 8 ${-4} l -8 ${-4} z`, transform: `rotate(${ang*180/Math.PI} ${tx} ${ty})` }); svg.appendChild(arrow); edgeArrows.push(arrow); }); const nodeGroups = {}; nodes.forEach(n => { const g = el("g", { class: "node" }); g.appendChild(el("rect", { x: n.x - 65, y: n.y - 29, width: 130, height: 58 })); const t = el("text", { class: "t", x: n.x, y: n.y - 4, "text-anchor": "middle" }); t.textContent = n.label; const s = el("text", { class: "s", x: n.x, y: n.y + 16, "text-anchor": "middle" }); s.textContent = n.sub; g.appendChild(t); g.appendChild(s); svg.appendChild(g); nodeGroups[n.id] = g; }); const travel = el("circle", { class: "travel", r: 6, opacity: 0 }); svg.appendChild(travel); const caption = document.getElementById("caption"); const N = edges.length; let i = 0, raf = null; function clearActive() { nodes.forEach(n => nodeGroups[n.id].classList.remove("active")); edgePaths.forEach(p => p.classList.remove("active")); edgeArrows.forEach(a => a.classList.remove("active")); } function animateEdge(idx) { const ed = edges[idx]; clearActive(); edgePaths[idx].classList.add("active"); edgeArrows[idx].classList.add("active"); nodeGroups[ed.from].classList.add("active"); caption.innerHTML = `Paso ${idx+1}/${N}: ${ed.from} → ${ed.to} (${ed.label})`; const path = edgePaths[idx], len = path.getTotalLength(); const t0 = performance.now(), dur = 900; function step(now) { let p = (now - t0) / dur; if (p > 1) p = 1; const pt = path.getPointAtLength(p * len); travel.setAttribute("cx", pt.x); travel.setAttribute("cy", pt.y); travel.setAttribute("opacity", 1); if (p animateEdge(i), 320); } } raf = requestAnimationFrame(step); } function start() { cancelAnimationFrame(raf); i = 0; animateEdge(0); } svg.addEventListener("click", start); start(); })(); --- type: Resumen title: "⚡ Anime.js v4 — Animaciones Web (Resumen minimalista)" description: "Resumen minimalista de Anime.js v4: 4 casos de uso con scripts listos para implementar (animación básica, timeline, stagger, controles)." fuente: "https://animejs.com/documentation" sitio: "https://gerardoesquivia.com/animejs/" tags: [resumen, animejs, javascript, animaciones, okf] timestamp: 2026-08-28 creator: "Gerardo Esquivia Zapata" --- # ⚡ Anime.js v4 — Animaciones Web (Resumen) > **Para qué:** animar elementos web (CSS, transforms, SVG, objetos JS) de forma sencilla y sin dependencias. > **Cómo:** instalar `npm install animejs`; usar `animate(targets, params)` para una animación, `createTimeline()` para secuencias, `stagger()` para cascadas y los métodos `play()/pause()/reverse()/seek()` para controlar. ## 🎯 Para qué sirve - Animaciones fluidas de UI (transformaciones, opacidad, color, SVG, texto). - Secuencias coreografiadas y efectos escalonados en listas. - Control total del playback desde código. ## 🛠️ Cómo se usa — scripts minimalistas ### 1. Animación básica ```js // npm install animejs import { animate } from 'animejs'; animate('.cuadrado', { translateX: 250, duration: 800, ease: 'outBounce' }); // Repetición en bucle, yendo y viniendo: animate('.cuadrado', { translateX: 250, loop: true, alternate: true }); ``` ### 2. Timeline (secuencia sincronizada) ```js import { createTimeline } from 'animejs'; const tl = createTimeline({ defaults: { duration: 750 } }); tl.label('inicio') .add('.cuadrado', { x: '15rem' }, 500) // empieza en el ms 500 .add('.circulo', { x: '15rem' }, 'inicio') // a la vez que 'inicio' .add('.triangulo', { x: '15rem', rotate: '1turn' }, ' function descargarMD() { const md = document.getElementById('md-resumen').textContent.trim(); const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'resumen-animejs.md'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); } --- ## Cómo se conecta con el OKF - **Sitio:** https://gerardoesquivia.com/animejs/ - **Nota:** esta (bajada del sitio, para consulta del agente) - **Fuente:** https://gerardoesquivia.com/animejs/ ## Aprendizajes - Los scripts minimalistas son el activo: **el ejemplo más corto que demuestra el uso**. - Este estudio forma parte del ciclo: **estudiar → publicar → registrar en el OKF**.