Question

这个小提琴http://jsfiddle.net/NK3pe/69/的相对位置为-=10px，这意味着timeLine将使元素从其起始位置-10px移动，该位置通过css设置。

trackMaster.from( $('.particle')[i], randomNumber(10,100), { top:'-=10px', ease: Linear.easeNone, repeat: -1 }, 0 );

这个小提琴http://jsfiddle.net/NK3pe/70/的相对位置为-=20px，这意味着timeLine将导致元素移动-20px。

然而，请注意点的起始位置在空中较高。

使用http://jsfiddle.net/NK3pe/71/，-=30px空中的点数甚至更高！

无论元素要走多远，我都需要点在同一个起始位置！（显然，我会想到 - .-）

var trackMaster = new TimelineLite({ paused: false, repeat: -1 });

function randomNumber(minimum, maximum){
    return Math.round (Math.random() * (maximum - minimum) + minimum )
}

function randomHue(){
    switch(randomNumber(0,4)){
        case(0):
            return 'B';
            break;
        case(1):
            return 'C';
            break;
        case(2):
            return 'D';
            break;        
        case(3):
            return 'E';
            break;
        case(4):
            return 'F';
            break;
    }
}



function addParticle(particleClass){
    var size = randomNumber(20, 30),
        hue = randomHue(),
        shade = randomNumber(0,9)
    // hue + shade + hue + shade + hue + shade +

    $('#display').append("<span class='" + particleClass + "' style='left: 0px; font-size: " + size + "px; color: white" + " '> . </span>"); 
}

for(i = 0; i < 30; i++){
   addParticle('particle');

   trackMaster.from( $('.particle')[i], randomNumber(10,100), { top:'-=30px', ease: Linear.easeNone, repeat: -1 }, 0 );

}

//trackMaster.time(6);

function midAnimation(){
     trackMaster.time(2);   
}

$('#initial_state').on('click', function(){
    trackMaster.time(8);
});

$('#restart').on('click', function(){
    trackMaster.restart();
});

$('#pause').on('click', function(){
    trackMaster.pause();
});

$('#resume').on('click', function(){
    trackMaster.resume();
});

Answer 1

这是GSAP的TimeLine from函数的预期行为。

它正在做什么：

演示，而不是从0开始向上（因为在窗口的坐标系(0,0)是屏幕的左上角）到n，你指定的值如{{1相反，它是从将10px（n）的值转移到 0，因为这是您指定的位置。

如何修复：

您可以指定原始位置，即将-=10px（n）设置为CSS中的-10px位置，然后在 0中输入时间线

或

您可以改为使用top功能：

to

Demo使用trackMaster.to( $('.particle')[i], randomNumber(10,100), { top:'+=30px', ease: Linear.easeNone, repeat: -1 }, 0 );函数

为什么相对测量值会偏移元素的起始位置？

1 个答案: