Question

下午好，我正在制作一个带绿色摇滚动画的横幅。为了简洁起见，我删除了所有内容，只留下了一个弹跳球。完成后，动画会按照定义的变量（＆＃34; loop＆＃34;）重复多次。第一次一切正常，问题出现在第二次（和第三次等）重复 - 其中一个补间（第二次）没有正确执行，更准确地说，它的＆＃34;顶部＆＃34;财产没有执行。如果我删除以下第三个补间的位置参数，一切正常，但我显然想用它:)。非常感谢！这是代码：

<html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TimelineLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/easing/EasePack.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/plugins/CSSPlugin.min.js"></script>
    </head>
    <body>
        <div id="banner">
            <img id="ball" src="ball.png"/>
        </div>

        <style>
#banner{
    height: 600px;
    width: 160px;
    background-color: black;
}
#ball{
    position: absolute;
    height: 50px;
    width: 50px;
    top: -50px;
    left: 60px;
}
        </style>
        <script>
        var ball = document.getElementById("ball");
var loop = 2;
var tween1 = new TimelineLite({onComplete: onAnimationComplete});
    tween1.to(ball, 0.1, {top: 100, left: 0})
    .to(ball, 0.3, {top: 480, left: 52})
    .to(ball, 0.3, {top: 160, rotation: 360}, '-=0.1')
    .to(ball, 0.1, {top: 160})
    .to(ball, 0.2, {top: 420})
    .to(ball, 0.1, {left: -60, top: 530});

function onAnimationComplete() {

            if (loop > 0) {
                loop -= 1;
            }

            if (loop !== 0) {
                setTimeout(function () {
                    tween1.pause().progress(0);
                }, 2000);

                setTimeout(function () {
                    tween1.restart();
                }, 4000);
            }
        }</script>
    </body>
</html>

Answer 1

您可能希望将所有值重置为时间轴开头的默认值，例如。

tween1.set(ball, {top:-50, left:60});

你也可能想要动画x和y而不是顶部和左边，因为它会通过动画转换来提高性能。

第一次运行后，greensock动画未正确执行

1 个答案: