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() 예제 실습 파일  

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() 예제 실습 파일  

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 컨트롤에 대해서 포스팅 하고자 합니다.

퍼블리셔가 해야 할 공부가 너무 많죠??

다들 힘내서 퍼블리싱 합시다!!  파이팅!!!!!!