javascript - 用于svg动画的flubber或animejs-6ren

javascript - 用于svg动画的flubber或animejs

转载作者：行者123 更新时间：2023-12-03 11:22:05

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

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

最佳答案

绒布和日本动漫JS经常一起使用:

/*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>

除此之外绒布 :

The goal of this library is to provide a best-guess interpolation for any two arbitrary shapes

如果你看看 source code您会看到其中充满了旨在猜测要应用的最佳插值的算法。 这个任务不简单 .

虽然 AnimeJs 的范围只是动画值插值并使用轻量级库应用正确的值来转换:

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

关于javascript - 用于svg动画的flubber或animejs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58896340/

文章推荐： javascript - 可以打开和关闭div，但无法再次打开

文章推荐： php - 将 cookie 共享到本地主机上的子域

文章推荐： php - 使用Carbon将日期转换为laravel中的毫秒

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 用于svg动画的flubber或animejs