用于svg动画的flubber或animejs答案

【问题标题】：flubber or animejs for svg animation用于svg动画的flubber或animejs
【发布时间】：2019-11-16 23:59:42
【问题描述】：

使用flubber/animejs 变形svg路径有哪些优点/缺点？

与animejs's 相比，Flubber 似乎要笨重得多（就bundle size 而言）。 Flubber 对所有这些代码做了什么？它的性能是否更显着？

【问题讨论】：

【解决方案1】：

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 的作用域只是动画值插值并使用轻量级库将正确的值应用于过渡：

Anime.js (/ˈæn.ə.meɪ/) 是一个轻量级的 JavaScript 动画库使用简单但功能强大的 API。它适用于 CSS 属性、SVG、 DOM 属性和 JavaScript 对象。

【讨论】：