GSAP Variables (트윈 제어 - Tween Controlling )
GSAP는 움직임을 제어할 수 있는 메서드를 제공합니다.
이번 포스팅에서는 repeat(), repeatDelay(), delay(), yoyo(), start(), resume(), restart(), reverse(), isActive(), pause(), seek(), timeScale() 에 대해 예제와 설명을 통해 알아가 보겠습니다.
repeat(number)
애니메이션(트윈이라 정의) 반복 횟수 설정합니다.
기본값은 1이며, -1 을 설정하면 무한반복 됩니다. delay가 포함되어 있는 경우 첫 번째 트윈만 delay가 적용되고, repeat가 반복 실행되는 두 번째부터는 delay가 적용되지 않습니다.
//CSS
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
//JS
$(function(){
gsap.to('.tweenbox', 3, {
marginTop: 300,
marginLeft: 300,
backgroundColor: '#ccc',
border: '2px solid #222',
borderRadius: 30,
repeat: 3 //repeat 값이 -1 일 경우 무한 반복
});
});
//HTML
<div class="tweenbox"></div> gsap.repeat() 예제 실습 파일
repeatDelay(number)
트윈 반복 시 지연 시간을 초 단위로 설정합니다.
//CSS
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
//JS
$(function(){
gsap.to('.tweenbox', 3, {
marginTop: 300,
marginLeft: 300,
backgroundColor: '#ccc',
border: '2px solid #222',
borderRadius: 30,
repeat: 3 //repeat 값이 -1 일 경우 무한 반복
repeatDelay: 2 // 반복 지연시간 설정(초 단위)
});
});
//HTML
<div class="tweenbox"></div> gsap.repeatDelay() 예제 실습 파일
gsap.repeatDelay().zip
0.03MB
delay(number)
트윈 지연 시간을 초 단위로 설정합니다.
//CSS
.btn {
display:inline-block;
padding:5px 10px 6px;
background-color:#333;
font-size:13px;
color:#fff;
text-decoration:none
}
.content {
display:flex;
justify-content:center;
padding:200px 0;
border:1px solid #000
}
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
//JS
$(function(){
$('.btn').click(function(){
gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });
});
});
//HTML
<a href="#none" class="btn">Toggle Tween Delay</a>
<div class="content">
<div class="tweenbox"></div>
</div> gsap.delay() 예제 실습 파일
yoyo(Boolean)
트윈을 앞뒤로 반복하여 실행합니다.
//CSS
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
//JS
$(function(){
TweenMax.to('.tweenbox', 3, {
marginLeft: 300,
backgroundColor: '#ccc',
border: '2px solid #222',
borderRadius: 30,
repeat: -1, //repeat 값이 -1 일 경우 무한 반복
yoyo: true // 애니메이션을 앞뒤로 반복하여 실행 시킴 - yoyo: Boolean
});
});
//HTML
<div class="tweenbox"></div> gsap.yoyo() 예제 실습 파일
pause( ), resume( ), restart( )
pause( ) 일시 중지 하는 설정합니다.
resume( ) - 방향을 바꾸지 않고 현재 위치에서 트윈을 재시작 하는 설정합니다.
restart( ) - 트윈을 처음부터 다시 시작 하는 설정합니다.
//CSS
.btn {
display:inline-block;
padding:5px 10px 6px;
background-color:#333;
font-size:13px;
color:#fff;
text-decoration:none
}
.content {
display:flex;
padding:100px 30px;
border:1px solid #000
}
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
//JS
var tweenBox;
function tweenStart(){
var motionBox = document.getElementById("tweenBox");
tweenBox = TweenMax.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:500, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}
function tweenPause(){
tweenBox.pause(); //멈춤
}
function tweenResume(){
tweenBox.resume(); //재시작
}
function tweenRestart(){
tweenBox.restart(); //처음부터 다시시작
}
//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenPause();" class="btn">Pause()</a>
<a href="javascript:tweenResume();" class="btn">Resume()</a>
<a href="javascript:tweenRestart();" class="btn">Restart()</a>
<div class="content">
<div id="tweenBox" class="tweenbox"></div>
</div> pause(), resume(), restart() 예제 실습 파일
start(),restart(),resume(),pause().zip
0.03MB
reverse( )
트윈 재생을 역방향으로 설정 합니다.
//CSS
.btn {
display:inline-block;
padding:5px 10px 6px;
background-color:#333;
font-size:13px;
color:#fff;
text-decoration:none
}
.content {
display:flex;
padding:100px 30px;
border:1px solid #000
}
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
//JS
var tweenBox;
function tweenStart(){
var motionBox = document.getElementById("tweenBox1");
tweenBox = gsap.fromTo(motionBox, 2, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30})
}
function tweenReverse(){
tweenBox.reverse(); //역방향으로 진행
}
//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenReverse();" class="btn">Reverse()</a>
<div class="content">
<div id="tweenBox1" class="tweenbox"></div>
</div> reverse() 예제 실습 파일
isActive( )
트윈의 활성화 여부를 나타냅니다.
//CSS
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
button {margin:10px}
//JS
$(function(){
var tween = gsap.to('.tweenbox', 2, {
x: 300,
backgroundColor: '#ccc',
border: '2px solid #222',
borderRadius: 30,
reversed: true //reversed() : 애니메이션의 역방향에 대한 여부 및 설정
});
$('#tweenBox').click(function(){
if(!tween.isActive()){ //isActive() : 애니메이션 활성화 여부
tween.reversed() ? tween.play() : tween.reverse(); //삼항연산자 : 조건 ? ture : false
}
});
});
//HTML
<div class="tweenbox"></div>
<button id="tweenBox">Toggle Tween Reverse</button> isActive() 예제 실습 파일
seek(number)
트윈을 지정한 위치로 이동 설정 합니다.
//CSS
.btn {
display:inline-block;
padding:5px 10px 6px;
background-color:#333;
font-size:13px;
color:#fff;
text-decoration:none
}
.content {
display:flex;
padding:100px 30px;
border:1px solid #000
}
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
//JS
var tweenBox;
function tweenStart(){
var motionBox = document.getElementById("tweenBox");
tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}
function tweenSeek(){
tweenBox.seek(3); //지정한 위치로 이동(3초 위치로)
}
//HTML
<div class="content">
<div id="tweenBox" class="tweenbox"></div>
</div> seek() 예제 실습 파일
timeScale(number)
트윈의 속도 증가와 감속을 설정합니다.
기본값은 1이며, 1보다 작을 경우 속도가 감소하며, 값이 1보다 클 경우 속도가 증가합니다.
//CSS
.btn {
display:inline-block;
padding:5px 10px 6px;
background-color:#333;
font-size:13px;
color:#fff;
text-decoration:none
}
.content {
display:flex;
padding:100px 30px;
border:1px solid #000
}
.tweenbox {
width:100px;
height:100px;
border:2px solid crimson;
background:lightcoral;
box-sizing:border-box
}
//JS
var tweenBox;
function tweenStart(){
var motionBox = document.getElementById("tweenBox");
tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:700, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}
function tweenTimescale(){
tweenBox.timeScale(0.5); //배율, 속도 감소(0.5는 최초 속도의 절반 느려짐 의미함) / timeScale(2) - 속도가 2배 빨라짐
}
//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenTimescale();" class="btn">Timescale(0.5)</a>
<div class="content">
<div id="tweenBox" class="tweenbox"></div>
</div> timeScale() 예제 실습 파일
GSAP Controlling을 마치며...
이번 포스팅은 트윈 컨트롤 중 이벤트 발생 시 트윈 컨트롤에 대해 주로 알아보았습니다.
GSAP 트윈 컨트롤 포스팅해드린 내용만 완벽하게 숙지하신다면, 웹퍼블리싱(이벤트 발생 시트 윈 컨트롤 ) 하는데 문제가 없으리라 생각됩니다.
다음 편에는 트윈 컨트롤 중 style 컨트롤 에 대해서 포스팅 하고자 합니다.
퍼블리셔가 해야 할 공부가 너무 많죠??
다들 힘내서 퍼블리싱 합시다!! 파이팅!!!!!!
