如何使用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);然后，您将可以像上面一样调用stop()函数。giftAnimation.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。