杀死GSAP时间线或跨多个元素恢复splitText实例
正如问题所述，我试图杀死所有的TimeLines /还原所有SplitText实例，这些实例使用jQuery.each()函数附加到多个元素。
我用一个简化的例子创建了一个Codepen，这样人们就可以看到完整的代码以及我到目前为止尝试过的内容：
https://codepen.io/OneManLaptop/pen/bGvQgGL?editors=1010
正如您所看到的，当用户悬停在框上时，会播放一个不错的SplitText动画，但我需要能够删除它的所有痕迹。
在这个简化的示例中，需要的功能是，当用户单击三个块下面的“还原”按钮时，animatiesNavHoverTl TimeLine的所有实例都会被杀死，而animatiesTextSplit的所有实例将恢复到它们的预拆分状态。
我的问题是，我知道应该使用哪种方法来杀死TimeLine并恢复SplitText，但是由于我使用了.each()函数来应用它，所以对每个实例应用这些方法并不是一帆风顺的。
到目前为止，我已经创建了一个恢复函数，它在播放每个时间线时调用，但这显然不是理想的，因为它每次在元素悬停时调用该函数，并且该函数仅应用于已经悬停的元素，而不是所有附加到TimeLine的元素。
下面我将粘贴简化示例的代码：
$(".animaties nav a").each(function(i, element) {
var span = $(element).find("span"),
img = $(element).find("img"),
animatiesTextSplit = new SplitText(span, {
type: "words,chars"
}),
animatiesChars = animatiesTextSplit.chars,
animatiesNavHoverTl = gsap.timeline({
paused: true,
reversed: true,
onStart: function() {
revertFunc(animatiesNavHoverTl, animatiesTextSplit, element);
}
});
animatiesNavHoverTl
.set(animatiesChars, {
transformOrigin: "center center -10px",
backfaceVisibility: "hidden"
})
.to(animatiesChars, {
duration: 2,
ease: "back.out",
stagger: {
from: "start",
amount: 0.1
},
y: 0.5,
color: "green",
rotationX: "-360"
}, 0);
$(element).hover(hoverAnim, hoverAnim);
function hoverAnim() {
if (animatiesNavHoverTl.reversed()) {
animatiesNavHoverTl.timeScale(1).play();
} else {
animatiesNavHoverTl.timeScale(3).reverse();
}
}
});
function revertFunc(animatiesNavHoverTl, animatiesTextSplit) {
$("body").on('click', "#revert", function(event) {
event.preventDefault();
console.log("revert");
animatiesTextSplit.revert();
animatiesNavHoverTl.kill();
});
}感谢任何能提供帮助的人。
回答 1
Stack Overflow用户
发布于 2022-08-17 08:15:29
好吧，今天早上醒来的时候，我肯定有一种慢性的“树用木材”的情况，我意识到我只需要把"revertFunc(animatiesNavHoverTl，animatiesTextSplit，element)“；代码的一部分放在主函数中，而不是在GSAP onStart部分，这一切都起作用了。
老实说，我不知道我昨天怎么没试过。如果你想从这篇文章中得到任何东西，那就让它永远是在公开愚弄你自己之前睡觉的最好的方法。
固定版本：
https://codepen.io/OneManLaptop/pen/dymQLwq?editors=1010
$(".animaties nav a").each(function (i, element) {
var span = $(element).find("span"),
img = $(element).find("img"),
animatiesTextSplit = new SplitText(span, {
type: "words,chars"
}),
animatiesChars = animatiesTextSplit.chars,
animatiesNavHoverTl = gsap.timeline({
paused: true,
reversed: true
});
animatiesNavHoverTl
.set(animatiesChars, {
transformOrigin: "center center -10px",
backfaceVisibility: "hidden"
})
.to(
animatiesChars,
{
duration: 2,
ease: "back.out",
stagger: {
from: "start",
amount: 0.1
},
y: 0.5,
color: "green",
rotationX: "-360"
},
0
);
$(element).hover(hoverAnim, hoverAnim);
function hoverAnim() {
if (animatiesNavHoverTl.reversed()) {
animatiesNavHoverTl.timeScale(1).play();
} else {
animatiesNavHoverTl.timeScale(3).reverse();
}
}
revertFunc(animatiesNavHoverTl, animatiesTextSplit, element);
});
function revertFunc(animatiesNavHoverTl, animatiesTextSplit) {
$("body").on('click', "#revert", function(event) {
event.preventDefault();
console.log("revert");
animatiesTextSplit.revert();
animatiesNavHoverTl.kill();
});
}
https://stackoverflow.com/questions/73373365
复制相似问题
腾讯云开发者
