slub动画的flubber或animejs

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

bundle size相比,Flubber看上去更庞大(就animejs's而言)。 flubber用所有这些代码做什么?它的性能更高吗?

wujiebeijing208 回答:slub动画的flubber或animejs

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

本文链接:https://www.f2er.com/3088146.html

大家都在问