爲什麼相對測量會偏移元素的起始位置？

這個小提琴http://jsfiddle.net/NK3pe/69/的相對位置爲-=10px，這意味着時間線將使元素從其起始位置（其通過css設置）行進-10px。爲什麼相對測量會偏移元素的起始位置？

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

這撥弄，http://jsfiddle.net/NK3pe/70/，具有-=20px的相對位置，這意味着時間軸將導致元件行進-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(); 
});

來源

2014-07-22 Starkers

這是GSAP的他們的時間軸from功能的預期行爲。

它在做什麼：

演示，而不是從0開始去了（因爲窗口的座標系中(0,0)是屏幕的左上角），以n，你喜歡指定的值10px等，它是相反從那n（-=10px）到的值，因爲這是您指定的位置。

如何解決此問題：

您可以指定原來的位置，這意味着設置n（-10px）在CSS的top位置，然後再去從 0時間軸中的

或

您能給我們的to函數：

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

使用to功能

的 Demo

來源

2014-07-25 02:56:47

爲什麼相對測量會偏移元素的起始位置？

回答

相關問題