javascript - slub动画的flubber或animejs

使用flubber / animejs 变形svg路径有什么优点/缺点？

与bundle size相比，flubber似乎更笨重(就animejs's而言)。 flubber用所有这些代码做什么？它的性能更高吗？

最佳答案

flubber 和 animeJS通常一起使用:

/*Ref: from https://www.codeseek.co/asistapl/morph-svg-with-animejs-flubberjs-vZGoOK */
const star = document.querySelector('.js-star')
const target = document.querySelector('.js-target')

const interpolator = flubber.interpolate(
  star.getAttribute('d'),
  target.getAttribute('d')
)

let val = { prop: 0 }

anime({
  targets: val,
  prop: 1,
  duration: 1000,
  easing: 'easeInOutCirc',
  loop: true,
  direction: 'alternate',
  update(anim) {
    star.setAttribute('d', interpolator(val.prop))
  }
})

<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Morph SVG with anime.js + flubber.js</title>





</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <defs>
    <path class="js-target" d="M7 2v11h3v9l7-12h-4l4-8z"/>
  </defs>
  <g transform="scale(10)">
    <path class="js-star" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
  </g>
</svg>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js'></script>
<script src='https://unpkg.com/flubber'></script>
</body>
</html>

除了 flubber 之外:

如果看一下source code，您会发现它充满了旨在猜测要应用的最佳插值的算法。 这个任务并不简单。

虽然AnimeJs的作用范围只是为值插值制作动画，并使用轻量级库将正确的值应用于过渡: