프로그래밍 기술에 대한 간단한 클립 수준의 글들을 올려드리려 합니다.
HTML5 의 CSS3 를 이용하여 쉽게 애니메이션을 할 수 있습니다. Javascript 로 애니메이션을 지정하는 과정을 간단히 정리해봤습니다.
구현할 것은 페이지 전환효과 입니다.
Webkit 기준이며, HTML5 문서로 지정하셔야 합니다.
먼저, 상자 두개가 필요하죠. 빨간 상자에는 애니메이션 구동을 위한 버튼을 하나 놓겠습니다.
<style>
.page { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; text-align: center; }
</style>
<div id="box1" class="page" style="display: block; background: #FF0000;" >
빨간 상자
<br>
<input type="button" value="시작" onClick="SetTransform();">
</div>
<div id="box2" class="page" style="background: #00FF00;" >
녹색 상자
</div>
버튼에 SetTransform(); 이라는 함수를 연결해 놓았으니 만들어야겠습니다.
<script>
function SetTransform(){
var t_obj1 = document.getElementById('box1');
var t_obj2 = document.getElementById('box2');
// 초기화
t_obj1.style.webkitTransitionProperty = '';
t_obj1.style.webkitTransitionDuration = '0s';
t_obj1.style.webkitTransitionTimingFunction = '';
t_obj1.style.left = '0%';
t_obj2.style.webkitTransitionProperty = '';
t_obj2.style.webkitTransitionDuration = '0s';
t_obj2.style.webkitTransitionTimingFunction = '';
t_obj2.style.display= 'block';
t_obj2.style.left = '100%';
setTimeout( function() {
// 애니메이션 지정 및 실행
t_obj1.style.webkitTransitionProperty = 'left';
t_obj1.style.webkitTransitionDuration = '0.5s';
t_obj1.style.webkitTransitionTimingFunction = 'ease-in';
t_obj1.style.left = '-100%';
t_obj2.style.webkitTransitionProperty = 'left';
t_obj2.style.webkitTransitionDuration = '0.5s';
t_obj2.style.webkitTransitionTimingFunction = 'ease-in';
t_obj2.style.left = '0%';
}, 0 );
}
</script>
style 속성을 간단히 설명해 드리면
'오브젝트.style.webkitTransitionProperty' 는 어떤 스타일 속성에 대해 애니메이션을 수행할지 입니다.
SetTransform 함수의 뒷쪽을 보시면 'left' 로 값이 지정되어있죠. 그것은 'left' 이니 좌측위치 변경시 애니메이션으로 표현하라는 지정값 입니다. 예를 들어 'opacity' 로 지정하면 투명도 변경시 애니메이션으로 표현되겠지요.
'오브젝트.style.webkitTransitionDuration' 는 애니메이션 시간입니다.
'오브젝트.style.webkitTransitionTimingFunction' 는 가속도 설정 입니다.
중간에 'setTimeout' 이 이용되었습니다. 그것은 처리를 중단하고 화면에 적용한뒤에 애니메이션을 시작하기 위한 것입니다. 지연시간은 상관없습니다. 그저 타이머 설정을 통해 초기화 부분을 적용하고 애니메이션을 실행되게하기 위한 것입니다. setTimeout를 사용하지 않을 경우, 각 도형이 시작위치로 이동하지 못하기 때문에 애니메이션이 정상적으로 되지 않을 것입니다.
마무리로 전체 코드를 보시죠. Webkit 기준이므로 구글 크롬 브라우져에서 실행해 보셔야 합니다. 혹은 스마트 폰의 웹브라우져에서 보시던가요.
<!DOCTYPE HTML>
<HTML lang="ko">
<HEAD>
<TITLE>NEAT master</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<div id="box1" class="page" style="display: block; background: #FF0000;" >
빨간 상자
<br>
<input type="button" value="시작" onClick="SetTransform();">
</div>
<div id="box2" class="page" style="background: #00FF00;" >
녹색 상자
</div>
<script>
function SetTransform(){
var t_obj1 = document.getElementById('box1');
var t_obj2 = document.getElementById('box2');
// 초기화
t_obj1.style.webkitTransitionProperty = '';
t_obj1.style.webkitTransitionDuration = '0s';
t_obj1.style.webkitTransitionTimingFunction = '';
t_obj1.style.left = '0%';
t_obj2.style.webkitTransitionProperty = '';
t_obj2.style.webkitTransitionDuration = '0s';
t_obj2.style.webkitTransitionTimingFunction = '';
t_obj2.style.display= 'block';
t_obj2.style.left = '100%';
setTimeout( function() {
// 애니메이션 지정 및 실행
t_obj1.style.webkitTransitionProperty = 'left';
t_obj1.style.webkitTransitionDuration = '0.5s';
t_obj1.style.webkitTransitionTimingFunction = 'ease-in';
t_obj1.style.left = '-100%';
t_obj2.style.webkitTransitionProperty = 'left';
t_obj2.style.webkitTransitionDuration = '0.5s';
t_obj2.style.webkitTransitionTimingFunction = 'ease-in';
t_obj2.style.left = '0%';
}, 0 );
}
</script>
</BODY>
</HTML>
'프로그래밍' 카테고리의 다른 글
| [cocos2d-x] Visual C++ 2012 express 에 템플릿 설정하기 (0) | 2013.03.14 |
|---|---|
| [cocos2d-x] 한글 출력시 깨짐 문제 해결 (0) | 2013.03.14 |
| PHP - 문자 인코딩 정보를 헤더에 포함시키기 (0) | 2012.11.27 |
| PHP - 외부 서버에서 페이지 읽어오는 방법 (0) | 2012.11.27 |
| Web - MP3 링크시 스트리밍 되지 않고 다운로드 되도록 만들기 (0) | 2012.11.15 |