Mini curso · 20

Morphing de formas

Una forma fluye hacia otra. El secreto: dos paths con la misma cantidad de puntos, y anime.js interpola el d entre ambos.

const A = 'M50 12 C72 12 88 28 88 50 …';   // círculo
const B = 'M50 8  C80 20 82 32 92 52 …';   // gota

anime({
  targets: path,
  d: [{ value: B }],       // interpola A → B
  duration: 700,
  easing: 'easeInOutQuad'
});

anime.js solo puede morfear entre paths con la misma estructura de comandos (misma cantidad de M / C / Z). Diseña ambas formas sobre el mismo esqueleto y funciona solo.