[jQuery] Count-Up Animation 개발일지 (09.23~10.01)

1. Count-Up Animation (v.0.1-2015.09.23)

/* Today's Mission Count-Up Animation*/
var total = $('#today-total').text();
var up = 0;
var num;
var limit = -110*total;

for(var i=0; i<=total; i++){
  $('span#today-now').append('<span class="today-num">'+i+'</span>');
}

function countUp(num){
  if(num==undefined)
    num=1;
  if(up>limit && num<=total)
    up -= 110*num;
  $('#today-now .today-num').css('top',up+'px');
}

See the Pen Count-Up Animation by Hyejin Oh (@mmt-zinee) on CodePen.

[기본구조]
- total 값을 받아와 그만큼 <span>으로 숫자들을 줄 세운 뒤 position:relative top값을 위로 올리면서 애니메이션을 주는 구조

- 한 번에 여러값을 넘길 수도 있음 (ex. countUp(5);)

[부족한점]

- total 값이 매우 클 경우 <span> 태그가 매우 많이 생김. dom이 무거워 짐

- total overflow가 발생하지 않을 것이라고 생각하고 만듦

[디버그] http://s.codepen.io/mmt-zinee/debug/pjEJNV?

2. Count-Up Animation (v.0.2-2015.09.24)

/* Today's Mission Count-Up Animation */
var total = $('#today-total').text();
var height = $('#today-now').height();
var up=0,
		countNum=1,
		numDefault=1,
		speedDefault=0.6,
		i;

function makeSpan(num){
	for(i=1; i<=num; i++){
		$('#today-now').append('<span class="today-num">'+countNum+'</span>');
		countNum++
	}
}

function countUp(num, speed){
	up -= height*num;
	$('#today-now .today-num').css({
		'top': up+'px',
		'transition-duration': speed+'s'
	});
}

function doUp(num, speed){
	if(num==undefined){
		num = numDefault;
	}
	if(speed==undefined){
		speed = speedDefault;
	}
	makeSpan(num);
	setTimeout(function(){
		countUp(num, speed);
	}, 100);
}

See the Pen Count-Up Advanced Animation by Hyejin Oh (@mmt-zinee) on CodePen.

[기본구조]

- 입력받은 값 만큼 <span>태그를 생성한 뒤, setTimeout으로 시간차를 둔 후 애니메이션 실행

[부족한점]

- setTimeout로 시간차를 준다하더라도 span이 엄청나게 많이 생긴다면 dom이 그려지기 전에 애니메이션이 실행될 수 있다.

- view에서 지나간 span들을 삭제하는 방법

- span을 최소로 활용하는 방법을 찾아볼 것

[디버그] http://s.codepen.io/mmt-zinee/debug/epdGaa?

[참고] CSS3 Transition 타이밍 이슈

3. Count-Up Animation (v.0.3-2015.09.30)

/* Today's Mission Count-Up Animation v.0.3 */
var countNum=1;

function makeSpan(){
	$('#today-now').append('<span class="today-num">'+countNum+'</span>');
	countNum++
}

function countUp(){
	$('.today-num').eq(0).attr('data-pos','up-hide');
  $('.today-num').eq(1).attr('data-pos','up-show');
}

function removeSpan(){
	$('.today-num').eq(0).remove();
}

function doUp(){
  makeSpan();
  $('.today-num')[0].offsetWidth; // reflow but not works
  
  countUp();
  $('.today-num')[0].offsetWidth; // reflow but not works
  
  //removeSpan();
}

doUp();

See the Pen Count-Up Animation v.0.3 by Hyejin Oh (@mmt-zinee) on CodePen.

[기본구조]

- <span>을 positon:absolute로 잡고 -110 / 0 / 110px (위로 올라간/보여지는/아래에 있는) 이렇게 세가지 상태로 설정

- 지나간 <span>은 삭제, 새로 카운트 될 숫자가 있는 <span>은 매번 새로 생성

doUp()

ㄴ makeSpan()

1) <span style="top:0px"> 아래에 <span style="top:110px"> 추가

ㄴ countUp()

2) <span style="top:0px">→<span style="top:-110px"> 되면서 위로 올라가며 hide (data-pos="up-hide")

3) <span style="top:110px">→<span style="top:0px"> 되면서 아래에 있던 것이 위로 올라오며 show (data-pos="up-show")

ㄴ removeSpan()

4) <span style="top:-110px"> 올라가서 가려진 것 remove

[부족한점]

- 타이밍 이슈를 setTimeout으로 해결(reflow hack not working)

- 다중 값 처리는 구현하지 못함

[디버그] http://s.codepen.io/mmt-zinee/debug/YyNNZG?

[참고]

- Triggering reflow for CSS3 transitions

- Reflow 원인과 마크업 최적화 Tip