이 바이올린 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();
});