[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?
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?
[참고]