小编Chr*_*Heu的帖子

Anime.js SVG 变形动画打破形状路径

我正在尝试使用 Anime.js 将圆形的 SVG(在 Illustrator 中使用 Object > Compound Path > Make 转换为路径)转换为正方形(以相同方式转换),但是当时间线运行时,圆形被扭曲好像路径没有被正确解释。

不过方形看起来不错。

作为测试,您可以shape从标记中的 SVG 中删除目标类,以防止 Anime.js 运行,并且圆圈将正确显示。

为什么Anime.js无法读取我的圈子?

const circlePath = 'M153.1,49.5c63.2,0,114.5,51.3,114.5,114.5s-51.3,114.5-114.5,114.5S38.6,227.2,38.6,164S89.9,49.5,153.1,49.5z';
const squarePath = 'M270.7,275.7H23.9V31h246.8V275.7z';

var timeline = anime.timeline({
  autoplay: true,
  direction: "alternate",
  loop: true
});

timeline.add({
  targets: ".shape",
  d: {
    value: [
      circlePath,
      squarePath
    ],
    duration: 1500,
    easing: "easeInOutQuad"
  },
  offset: 1500
});
Run Code Online (Sandbox Code Playgroud)
svg {
  margin: 1rem;
  border: 2px solid #666;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 …
Run Code Online (Sandbox Code Playgroud)

javascript svg svg-animate anime.js

1
推荐指数
1
解决办法
779
查看次数

标签 统计

anime.js ×1

javascript ×1

svg ×1

svg-animate ×1