jQuery Animation 구현 CSS 3 애니메이션 예시 소개

jQuery Animation 의 작업 원 리 는 요소 의 CSS 스타일 을 한 상태 에서 다른 상태 로 바 꾸 는 것 입 니 다.CSS 속성 값 은 애니메이션 효 과 를 만 들 수 있 도록 점점 바 뀌 었 습 니 다.숫자 값 만 애니메이션 을 만 들 수 있 습 니 다(예 를 들 어"margin:30px").문자열 값 으로 애니메이션 을 만 들 수 없습니다(예 를 들 어"background-color:red").상세 한 용법 은jQuery 효과-animate()방법 과 공식 튜 토리 얼 을 참고 하 시기 바 랍 니 다.CSS 3 와 같은 많은 효 과 는 수치 가 아니 기 때문에 애 니 메 이 트(animate)방법 으로 직접 실현 할 수 없다.예 를 들 어 translate(),rotate(),scale(),skew(),matrix(),rotateX(),rotateY()등 방법 은 문자 와 숫자 가 혼 합 된 것 이 특징 이다.따라서 우 리 는 애니메이션 의 효 과 를 애니메이션()방법 으로 동적 으로 수정 할 수 없습니다.만약 에 우리 가 자바 스 크 립 트 로 CSS 3 애니메이션 을 실현 한다 면 우 리 는 setInterval()방법 을 통 해 이 루어 질 수 밖 에 없고 복잡 하 게 이 루어 질 수 밖 에 없다.사실 animate()방법 은 setInterval()방법 을 바탕 으로 작업 을 하 는 것 이지 만 애니메이션 속 도 를 편리 하 게 설정 할 수 있 고 등 속 인지 변속 인지 설정 할 수 있다.animate()방법의 두 번 째 용법 은 step 매개 변수 가 애니메이션 의 모든 단계 에서 실행 할 함 수 를 규정 합 니 다.우 리 는 요소 효과 에 영향 을 주지 않 는 현저 한 CSS 값 을 사용 하여 animate()방법 을 촉발 한 다음 에 step 리 셋 함수 에서 우리 가 수정 하고 자 하 는 값 을 수정 하면 간접 적 으로 애니메이션 을 실현 할 수 있다.transform 예:

 
<div id="box"></div>
#box { 
width:100px; 
height:100px; 
position:absolute; 
top:100px; 
left:100px; 
text-indent: 90px; 
background-color:red; 
} 

$('#box').animate({ textIndent: 0 }, { 
step: function(now,fx) { 
$(this).css('-webkit-transform','rotate('+now+'deg)'); 
}, 
duration:'slow' 
},'linear'); 

여기 서 text-indent 속성 을 사용 하여 애니메이션 을 촉발 합 니 다.텍스트 가 없 기 때문에 text-indent 를 사용 하여 요소 의 스타일 효과 에 영향 을 주지 않 습 니 다.여기 서도 font-size 등 을 사용 할 수 있 습 니 다.그리고 animate()방법 으로 만들어 진 리듬 으로 애니메이션 을 실현 합 니 다.이런 식 으로 유추 하면 우 리 는 많은 효 과 를 실현 할 수 있다.구체 적 인 예 는 여기 참고 문서•jQuery 효과-animate()방법•.animate()