如何使用 onclick 功能停止 gsap.to 动画？

Question

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

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 只是您的标准对象，它不是动画。
您需要保存对动画的引用。
类似
let giftAnimation = gsap.to(".gift", giftmove);
然后你就可以像..
giftAnimation.stop() 一样调用stop() 函数。

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

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 是实际的动画，你可以调用 gsap 函数，如giftmove.play()、giftmove.stop() 等。

Here is a nice cheatsheet for reference.

Answer 2

我只需要gsap.killTweensOf(".gift");