Question

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

与bundle size相比，Flubber看上去更庞大（就animejs's而言）。 flubber用所有这些代码做什么？它的性能更高吗？

Answer 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对象。

slub动画的flubber或animejs

1 个答案: