我正在尝试使用 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)