10 pasos
- keyframes
- 10
- peso
- 27.0 KB
- duración
- 737 ms
- último tramo
- 61%
- desviación
- 0.001
Lab
Los arneses de autoría. No son producto: existen para decidir números mirando las cosas juntas — cuántas poses discretas, qué hacer con la cola del resorte, cómo se ve un par que nadie validó. Lo que se decide aquí es lo que termina siendo el default de la librería.
Morph libre — elige tu secuencia
El core empareja subpaths por cercanía — si dos iconos no tienen nada en común, no hay correspondencia geométrica buena que encontrar. Cuando eso pasa, el motor lo detecta solo y usa un fundido (opacidad, sin puntos que interpolar) en vez de forzar una deformación que se vería peor. Los tramos marcados fundido en la cadena son esos casos — no es un error, es el fallback funcionando.
bell bell-ring heart star circle square user user-round
Ámbar: no hay un morph geométrico válido, así que glyphFlow usa un fundido.
Benchmark de morph
Un par a la vez, 4 variantes lado a lado. El spring solo decide el timing: cero loop de animación, los keyframes se calculan una vez y los interpola el navegador.
Más pasos siguen el trazo más de cerca, a costa de un arreglo de keyframes más grande — fidelidad contra peso.
Detalles técnicos
Adaptativo es el default real: no reparte un número parejo para los 1767 iconos, se los da solo a los pares que de verdad rotan. Compáralo contra 20 pasos en bell → bell-ring (debería verse idéntico) y contra 10 en circle → square (menos pasos, misma fidelidad porque casi no rota).
res es la resolución de muestreo: a cuántos puntos se remuestrea cada subtrazo antes de emparejar las dos figuras. Muestrea el CONTORNO, no el tiempo — cambia con cuánta fidelidad se sigue la curva, nunca cuántos cuadros se reproducen.
<gf-icon-morph>
El envoltorio delgado. Un solo [icon]: cambiarlo dispara el morph desde el valor anterior. El primer render se pinta estático — no hay desde dónde transicionar.
Los subamortiguados se pasan del destino y regresan. Dale a «siguiente» con bouncy y mira el sobrepaso: eso es lo que antes no se dibujaba.
Horneado vs en vivo
El mismo par, dos motores. Horneado precalcula ~20 poses y WAAPI interpola en línea recta entre ellas. En vivo recalcula la posición exacta en cada frame — la diferencia se nota más en pares con rotación real.
15 pasos
- keyframes
- 15
- peso
- 40.6 KB
- duración
- 737 ms
- último tramo
- 55%
- desviación
- 0.000
20 pasos
- keyframes
- 20
- peso
- 54.1 KB
- duración
- 737 ms
- último tramo
- 51%
- desviación
- 0.000
30 pasos
- keyframes
- 30
- peso
- 81.2 KB
- duración
- 737 ms
- último tramo
- 45%
- desviación
- 0.000
Adaptativo default
- keyframes
- 10
- peso
- 27.0 KB
- duración
- 737 ms
- último tramo
- 61%
- desviación
- 0.001