如何使用 onclick function 停止 gsap.to animation？

Question

我现在遇到的问题是我无法在点击气球时停止 animation。 我试过 using.stop() 和 .pause() 但它们都在控制台中显示错误，说没有定义 pause() 等。我如何让它在我点击图像时，我的 animation 停止?

Html代码

            <div class ="scene3 frame">
            <img src = "img/1x/Cloud 1.png" class = "s3cloud1">
            <img src = "img/1x/Cloud 2.png" class = "s3cloud2">
            <img src = "img/1x/Cloud 3.png" class = "s3cloud3">
            <img src = "img/1x/Cloud 4_1.png" class = "s3cloud4">
            <img src = "img/1x/Tree.png" class = "tree">
            <img src = "img/leafegg.png" class = "leafegg" onclick = "#">
            <img src = "img/stoneegg.png" class = "stoneegg" onclick = "#">
            <img src = "img/1x/Rock.png" class = "stone" onclick = "magic()">
            <div class = "gift">
            <img src = "img/skyegg.png" class = "skyegg" onclick = "#">
            <img src = "img/balloon.png" class = "balloon" onclick = "stopballoon()">
            </div>
            </div>

css

.scene3{
    height:300px;
    width:400px;
    overflow:none;
    background:url("img/1x/Scene 2.png");
    opacity:0;
    display:none;
}

.tree{
    margin-top:20px;
    margin-left:20px;
    position:absolute;
}

.s3cloud1{
    position:absolute;
    margin-top:10px;
    margin-left:420px;
}
.s3cloud2{
    position:absolute;
    margin-top:60px;
    margin-left:450px;
}
.s3cloud3{
    position:absolute;
    margin-top:40px;
    margin-left:450px;
}
.s3cloud4{
    position:absolute;
    margin-top:20px;
    margin-left:450px;
}

.leafegg{
    width:40px;
    position:absolute;
    margin-left:125px;
    margin-top:100px;
    transform:rotate(5deg);
}

.leafegg:hover{
cursor:pointer;
}

.stoneegg{
    width:40px;
    margin-left:260px;
    margin-top:220px;
    position:absolute;
    transform:rotate(5deg);
}

.stone{
    margin-left:230px;
    margin-top:220px;
    position:absolute;
}

.stone:hover{
    cursor:pointer;
}

.skyegg{
    width:40px;
    position:absolute;
    margin-top: 89px;
    margin-left:437px;
}

.balloon{
    position:absolute;
    margin-left:400px;
}
.balloon:hover{
    cursor:pointer;
}

我的 Javascript

var giftenter = {
    delay:5,
    marginLeft:"-500px",
    repeat:-1,
    ease:Linear.easeNone,
    duration:20,
}

var giftmove = {
    delay:4,
    rotate:"15deg",
    yoyo:true,
    repeat:-1,
    duration:3,
    ease:Linear.easeNone,
}

function cue(){
    gsap.to(".gift", giftenter);
    gsap.to(".gift", giftmove);
}


function magic(){
    gsap.to(".stone", disappear);
}

function stopballoon(){
    giftmove.stop();
    giftenter.stop();

}

function transition2to3(){
    gsap.to(".ask", dialoguedisappear);
    gsap.to(".ZipperScene2", zipperdown);
    gsap.to(".scene2", twotothree);
    gsap.to(".scene3", activate3);
    gsap.to(".s3cloud1", cloud1);
    gsap.to(".s3cloud2", cloud2);
    gsap.to(".s3cloud3", cloud3);
    gsap.to(".s3cloud4", cloud4);
    setTimeout(cue, 1000);
}

Answer 1

giftmove.stop()不起作用，因为giftmove只是您的标准 object，而不是 animation。
您需要保存对 animation 的引用。
就像是
let giftAnimation = gsap.to(".gift", giftmove);
然后你就可以像这样调用stop() function 了。
giftAnimation.stop() 。

但是，当您设置要传递给to() function 的对象时，为什么不一开始就设置这些动画呢？
例如..改变这个..

var giftmove = {
    delay:4,
    rotate:"15deg",
    yoyo:true,
    repeat:-1,
    duration:3,
    ease:Linear.easeNone,
}

对此。

var giftmove = gsap.to('.gift', {
    delay:4,
    rotate:"15deg",
    yoyo:true,
    repeat:-1,
    duration:3,
    ease:Linear.easeNone,
    paused: true,
});

这样， giftmove就是实际的 animation，您可以调用 gsap 函数，如giftmove.play() 、 giftmove.stop()等。

这是一个很好的备忘单供参考。

Answer 2

我所要做的就是gsap.killTweensOf(".gift");