{"id":21,"date":"2026-08-08T13:19:34","date_gmt":"2026-08-08T16:19:34","guid":{"rendered":"https:\/\/freeanimationpower.org\/blog\/?p=21"},"modified":"2026-08-08T13:19:34","modified_gmt":"2026-08-08T16:19:34","slug":"onion_skin_viendo_pasado_futuro","status":"publish","type":"post","link":"https:\/\/freeanimationpower.org\/blog\/onion_skin_viendo_pasado_futuro\/","title":{"rendered":"Onion Skin: Viendo el Pasado y el Futuro de tu Animacion en un Solo Frame"},"content":{"rendered":"

\"\"<\/h1>\n

En los estudios de animacion tradicional de los anos 30, los animadores trabajaban sobre mesas de luz. Colocaban una hoja de papel sobre otra y la luz inferior les permitia ver el dibujo anterior por transparencia. Asi nacian los principios de anticipacion, seguimiento y arcos. Esa tecnica tiene nombre: onion skin, piel de cebolla, por la forma en que las capas se superponen como las peliculas del bulbo.<\/p>\n

FAP Mobile Web lleva esa tecnica centenaria al lienzo digital con una implementacion que te permite ver no solo el pasado de tu animacion, sino tambien su futuro.<\/p>\n

La mecanica de las capas fantasma<\/h2>\n

El sistema de onion skin de FAP muestra seis frames fantasma superpuestos sobre tu frame actual: tres anteriores y tres posteriores. Los frames previos aparecen tenidos de rojo #FF4444<\/code>. Los frames posteriores, de verde #44FF44<\/code>. La opacidad se degrada con la distancia al frame actual siguiendo una formula lineal:<\/p>\n

alpha(i) = 0.35  (1 - (i - 1) <\/em> 0.25)<\/code><\/pre>\n
Donde i<\/code> es la posicion relativa al frame actual. El frame inmediatamente anterior (i = 1) tiene alpha = 0.35<\/code>, un 35 por ciento de opacidad. El segundo (i = 2) baja a alpha = 0.2625<\/code>, aproximadamente 26 por ciento. El tercero (i = 3) cae a alpha = 0.175<\/code>. Los tres frames posteriores siguen la misma degradacion pero en el canal verde.<\/p>\n
Esta asimetria cromatica no es arbitraria. El rojo y el verde son colores complementarios en el espectro visible. El ojo humano los separa con facilidad incluso en condiciones de baja opacidad. Puedes ver simultaneamente de donde viene tu personaje y hacia donde va, sin confusion visual.<\/p>\n
La optimizacion silenciosa: strokeCanvases<\/h2>\n
Aqui entra una de las decisiones arquitectonicas mas elegantes de FAP Mobile Web: los strokeCanvases<\/code>. Cada frame tiene dos representaciones en memoria. El frameCanvas<\/code> contiene el dibujo completo con su fondo blanco. El strokeCanvas<\/code> contiene exclusivamente los trazos, sin fondo, sobre un lienzo transparente.<\/p>\n
Cuando el sistema necesita aplicar onion skin, no puede simplemente superponer los frameCanvases<\/code>: el fondo blanco de cada uno taparia todo lo demas. En cambio, toma los strokeCanvases<\/code> de los frames adyacentes, les aplica el tinte y la opacidad correspondientes, y los dibuja encima del frame actual usando globalCompositeOperation = 'source-atop'<\/code>.<\/p>\n
source-atop<\/code> es una de las operaciones de composicion definidas por el estandar Porter-Duff del W3C. Dibuja el nuevo contenido solo donde el destino ya tiene pixeles opacos, respetando la transparencia del destino. En terminos practicos: el fantasma rojo o verde aparece unicamente donde tu frame actual tiene trazos, creando una superposicion limpia y legible.<\/p>\n
De los trazos a la fluidez<\/h2>\n
La funcion tintAndDraw<\/code> es el corazon del onion skin. Recibe un strokeCanvas<\/code>, un color de tinte y un valor de opacidad. Primero dibuja el strokeCanvas<\/code> sobre un lienzo temporal con el color solido. Luego aplica globalAlpha<\/code> para la transparencia. Finalmente compone el resultado sobre tu drawCanvas<\/code> usando source-atop<\/code>.<\/p>\n
Todo esto ocurre en menos de 16 milisegundos, el presupuesto de tiempo para mantener 60 FPS en el navegador. Los calculos de opacidad son operaciones de punto flotante que el motor JavaScript resuelve en nanosegundos. La carga de los strokeCanvases<\/code> adyacentes se hace bajo demanda con ensureFrameCanvas<\/code>, que verifica si el buffer ya existe en memoria y, si no, lo reconstruye desde el almacenamiento.<\/p>\n
Por que el onion skin cambia tu forma de animar<\/h2>\n
Sin onion skin, animar cuadro por cuadro es como dibujar a ciegas. Cada frame es una isla. Con onion skin activado, cada frame es un eslabon visible de una cadena temporal. Puedes ver la trayectoria completa de un movimiento mientras lo dibujas. Detectas errores de interpolacion antes de llegar al frame 10. Ajustas timing y spacing con precision milimetrica.<\/p>\n
Los grandes animadores de Disney pasaron decadas perfeccionando esta tecnica sobre mesas de luz de madera y vidrio esmerilado. Tu tienes la misma capacidad, con tres frames de pasado y tres de futuro, con codigo abierto y en tu telefono. La unica diferencia es que no necesitas bombillas.<\/p>\n
\"\"<\/p>\n
\n
Hashtags:<\/strong> #onionSkin #pielDeCebolla #animaci\u00f3nTradicional #traditionalAnimation #mesaDeLuz #lightTable #framesFantasma #ghostFrames #pasadoYFuturo #pastAndFuture #tinteRojo #redTint #FF4444 #tinteVerde #greenTint #44FF44 #coloresComplementarios #complementaryColors #degradaci\u00f3nDeOpacidad #alphaDegradation #strokeCanvases #frameCanvas #drawCanvas #tintAndDraw #PorterDuff #sourceAtop #compositingStandard #W3Cstandard #globalCompositeOperation #60FPS #16milisegundos #16msBudget #ensureFrameCanvas #cargaBajoDemanda #lazyLoading #timing #spacing #precisi\u00f3nDeAnimaci\u00f3n #animationPrecision #anticipaci\u00f3n #seguimiento #arcos #animationArcs #12PrincipiosDeAnimaci\u00f3n #DisneyAnimation #eslab\u00f3nTemporal #timeChain #visualizaci\u00f3nTemporal #temporalVisualization #animaci\u00f3nCuadroPorCuadro #frameByFrame #c\u00f3digoAbierto #openSourceAnimation #mesaDeLuzDigital #digitalLightTable #onionSkinM\u00f3vil #mobileOnionSkin #sinBombillas #lightlessAnimation<\/p>\n","protected":false},"excerpt":{"rendered":"
En los estudios de animacion tradicional de los anos 30, los animadores trabajaban sobre mesas de luz. Colocaban una hoja de papel sobre otra y […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-fap-mobile-web"],"_links":{"self":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":4,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/posts\/21\/revisions\/348"}],"wp:attachment":[{"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freeanimationpower.org\/blog\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}