使用Anime.JS，如何将动画应用于svg的特定元素/路径？
使用Anime.JS，如何将动画应用于svg的特定元素/路径？
提问于 2022-02-09 16:21:06
我已经编写了一些代码来旋转整个svg，但是我不知道如何旋转各个主体。
<!DOCTYPE html>
<html lang="en">
<head>
<div class="content">
<object id="demo-svg" data="./assets/test-graphic.svg" type="image/svg+xml" width="100%" height="100%"></object>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
<script type="text/css">
body, html{ margin:0 } svg, g { transform-origin: unset unset; } path { transform-origin: 50% 50%; transform-box: fill-box; }
</script>
</div>
</head>
<div>
<script>
anime({
targets: 'path',
scale: [0.1, 1],
opacity: [0.1, 1],
rotate: "1turn",
duration: 7000
});
</script>
</div>
</html>
整个svg代码太大了，无法粘贴，下面是一个片段
<linearGradient id="linear-gradient" x1="69" y1="559.5" x2="1875" y2="559.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#22b226"/><stop offset="1" stop-color="#2112b5"/>对于上下文，此梯度对指向下面的路径。
<path d="M657,540a3,3,0,0,0-3,3v33a3,3,0,0,0,6,0V543A3,3,0,0,0,657,540Z" transform="translate(-69 -56)" fill="url(#linear-gradient)"/>回答 1
Stack Overflow用户
发布于 2022-04-08 07:28:29
如果你想把目标对准一个单独的部分，那就瞄准一个单独的部分。给他们一个身份证或其他一些方法来指代他们，然后发狂。
var tl = anime.timeline({
duration: 700,
easing: "easeOutElastic(1, 1)",
endDelay: 400,
loop: true
})
.add({
targets: "svg",
scale: [0, 1]
})
.add({
targets: ".eye",
scaleY: [1, 0, 1, 0, 1],
easing: "easeInOutSine"
});
for (i = 0; i < 10; i++)
tl.add({
targets: ".pupil",
translateX: anime.random(-12, 12),
translateY: anime.random(-12, 12)
});
tl.add({
targets: "svg",
scale: 0,
easing: "easeInElastic(1, 1)",
endDelay: 1000
});<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<svg width="100vmin" height="100vmin" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="40" stroke-width="6" stroke="#1F1F1F" fill="#AF87CC" transform-origin="60 60" />
<g class="eye" transform-origin="60 60">
<circle class="pupil" cx="60" cy="60" r="24" />
<circle cx="77" cy="43" r="10" fill="#FFFFFF" />
</g>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71053136
复制相关文章
相似问题
腾讯云开发者
