我正在嘗試使用 gsap 為 svg 甜甜圈圈制作影片。在對代碼和分層進行了大量測驗之后，我被一個有問題的懸停效果（我試圖用指標事件解決）難住了，并且變換原點只應用于幾個展開的選項卡。我想知道這是否可能是選項卡可能有不同的邊界框？
每個請求添加的評論：
旁注：我已經嘗試將填充框應用于整個 svg，我想知道我是否需要一個精確正方形的父層，以便我可以將子“expandtabs”的變換原點應用到那個中心？
我假設我需要遍歷兩者的陣列以使選項卡對應。除非標簽是彼此的孩子？
TLDR；選項卡未從圓心縮放，并且懸停效果出現故障
CodePen 示例
.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",
});
});
});
uj5u.com熱心網友回復：
關于毛刺懸停效果，mouseenter并且mouseleave會做得更好。mouseover火力太大了……
對于“增長”效應，它更復雜。transform-originCSS 屬性是不夠的。無論如何，您將需要為圓圈的每五個部分提供不同的值。
此外，您將需要調整過渡以“適合”或“保持”圓圈的內部部分。我建議你看一下 GSAP 的fromTo方法。這將允許您明確指定起始和著陸坐標。
要有耐心！;)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/421757.html
標籤：
上一篇：SVG將圓形文本放在一行上
下一篇：圖示影片不顯示？