GSAP/CSS 变换原点和故障悬停效果/SVG 区域

Question

我正在尝试使用 gsap 为 svg 甜甜圈圈制作动画。在对代码和分层进行了大量测试之后，我遇到了一个故障悬停效果（我试图用指针事件解决）并且转换原点仅应用于几个展开的选项卡。我想知道这是否可能是因为选项卡可能具有不同的边界框？

根据请求添加的评论：

旁注：我尝试将 fill-box 应用于整个 svg，我想知道我是否需要一个 parent 层，它是一个精确的正方形，以便我可以应用变换原点child "expandtabs" 到那个中心？

我假设我需要遍历两者的数组以使选项卡对应。除非选项卡彼此 children?

TLDR；选项卡未从圆心缩放，悬停效果出现故障

.expandtab {
    pointer-events: none;
    transform: fill-box;
    transform-origin: -15px 25%;
}

Javascript:

const subTabs = gsap.utils.toArray(".subtab");
const expandTabs = gsap.utils.toArray(".expandtab");
const tl = gsap.timeline({ defaults: { duration: .05, } });

tl.set(expandTabs, {
    visibility: "hidden",
    opacity: 0,
    scale: 0,
});

subTabs.forEach((subTab, index) => {
    let expandTab = expandTabs[index];

    // Event Listener Hover on
    subTabs[index].addEventListener("mouseover", (event) => {
        console.log("you clicked region number " + index);
        tl.to(expandTab, {
            visibility: "visible",
            opacity: 1,
            scale: 1,
        });
    });

    // Event Listener Hover off
    subTabs[index].addEventListener("mouseout", (event) => {
        console.log("you exited region number " + index);
        tl.to(expandTab, {
            opacity: 0,
            scale: 0,
            visibility: "hidden",
        });
    });
});

Answer 1

关于故障悬停效果，mouseenter 和 mouseleave 会做得更好。 mouseover 火力全开...

对于“成长”的效果，就比较复杂了。 transform-origin CSS 属性是不够的。无论如何，您将需要为圆的每五个部分设置不同的值。

此外，您需要调整过渡以“适合”或“保持”圆圈的内部。我建议你看看 GSAP 的 fromTo 方法。这将允许您明确指定起始坐标和着陆坐标。

耐心等待！ ;)

GSAP/CSS 变换原点和故障悬停效果/SVG 区域

GSAP/CSS transform origin and glitchy hover effect/ SVG Regions

javascript

animation

svg

transform

gsap