2014-07-22 4 views
0

이 바이올린 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를 여행하게됩니다 의미 -=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(); 
}); 

답변

0

이 자신의 타임 라인의 GSAP의 from 기능의 의도 된 동작입니다 (물론, 나는 -.- 생각했을 것이다). n에 (윈도우의 좌표계에 (0,0) 화면의 왼쪽 상단이기 때문에)

데모를 대신 0에서 시작에가는, 당신이 좋아 지정된 값 : 무엇을하고있어

10px 등의 경우 에서 으로 그 값이 지정한 위치이기 때문에 n (-=10px) 에서으로 변경됩니다.

를 해결하는 방법 :

당신은 CSS에서 top 위치로, 의미 n (-10px) 설정을 원래의 위치를 ​​지정할 수 있습니다, 다음 타임 라인에서 0에서

대신 우리에게 to 기능을 할 수 또는

:

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

Demo