[Starling-05] Tween 클래스를 이용한 애니메이션

Programming/Framework 2012. 1. 8. 02:57
이전 포스트에서 EnterFrame 이벤트를 사용하여 애니메이션을 구현하는 방법을 소개했다. 이번에는 Tween 클래스를 사용하는 방법이다. Tween을 사용한 경우의 특징 중 하나는 애니메이션의 시간을 초 단위로 지정하는 것이다. Tween은 지정된 시간이 지나는 과정에서 표시 객체의 속성 값, 예를 들어 x좌표를 최종 값에 도달하기까지 순차적으로 변화시킨다.

코드는 다음과 같다. 먼저 Tween 생성자에서 대상 객체와 시간을 지정하여 다음 animate() 메소드를 사용하여 변화하는 속성의 이름과 마지막 값을 설정한다. 여러 특성을 변화시키는 경우 animate()를 계속해서 부르면 된다. 

// myObject을 2 초 걸쳐 가로 50px, 세로 80px 이동하는 애니메이션 지정
var myTween:Tween = New Tween(myObject, 2.0); 
myTween.animate( "x", myObject.x + 50); 
myTween.animate( "y", myObject.y + 80); 


아래 예제는 onAddedToStage() 리스너 함수에 적용한 것이다. 사각형을 4초에 걸쳐 (0,0)에서 (220, 380) 좌표로 이동시키는 것이다.

package {
	import starling.animation.Tween;
	import starling.core.Starling;
	import starling.display.Quad;
	import starling.events.Event;

	private function onAddedToStage(e:Event):void {
		myQuad = new Quad(100,100);
		myQuad.color = 0x00FF00;

		// Tween 객체의 생성
		var myTween:Tween = new Tween(myQuad,4.0);

		// 변화시키는 속성 지정
		myTween.moveTo(220, 380);

		// Juggler에 Tween 객체를 추가하려면
		Starling.juggler.add(myTween);
	}
}


이 샘플에서는 animate() 메소드 대신 moveTo() 메소드를 사용했다. moveTo()는 x좌표와 y좌표를 동시에 이동 시킬 때 유용한 방법이다. 그 외에도 비슷한 방법으로 비율을 바꾸는 scaleTo()와 alpha를 바꾸는 fadeTo() 등이 제공되고 있다. 각도를 바꾸는 방법은 아직 없기 때문에 회전할 때는 animate()를 사용한다.

import starling.utils.deg2rad;
 
var myTween:Tween = new Tween (object, 2.0);
myTween.scaleTo(2);
myTween.fadeTo(0);
myTween.animate( "rotation", deg2rad (45));
Starling.juggler.add(myTween);

위 예제에서 사용한 deg2rad()는 각도를 라디안으로 변환하는 함수다. Starling 프레임워크에서 지원. Juggler 클래스 위 예제에서 살펴보면 Tween 인스턴스에 필요한 설정을 한 후, Tween 인스턴스를 Starling의 juggler이라는 속성에 추가했다. 이는 애니메이션의 시작을 알리는 신호라고 보면 된다. Juggler은 객체의 "시간을 진행하는" 클래스다.
그러나 IAnimatable이라는 인터페이스를 상속하는 객체에만 적용이 된다. Tween은 IAnimatable을 상속하고 있다. Juggler는 객체를 전달하면 해당 객체의 시간을 진행한다. 그리고 객체에 대해 지정된 시간이 지나면 객체에 대한 참조를 자동으로 해제한다. 그런데 Juggler는 delayCall()이라는 메소드가 있다. 이 것은 임의의 함수를 지정한 시간이 지나면 호출하도록 Juggler에게 지시하는 것이다. 호출 함수에 인수를 전달할 수도 있다.
아래는 1초 후에 myFunc()함수를 호출하면서 "Hello"라는 인수를 전달하는 예제다.

Starling.juggler.delayCall (myFunc, 1.0, "Hello");
 
private function myFunc (message:String):void{
  trace (message);
}

애니메이션의 시간과 함수의 실행 시점을 같은 Juggler을 통해서 관리함으로써 양자를 완벽하게 동기화시킬 수 있어 편리하다. Juggler 객체는 Starling 클래스를 제공하기 위해 일반적으로 이 것을 사용하여 애니메이션을 시작하면 충분하다. 단, 애니메이션을 개별적으로 제어하고 싶은 경우에는 Juggler 객체를 생성하는 것이 유용할 수 있겠다.
Juggler 객체를 직접 관리하는 경우 EnterFrame 이벤트에 대한 advanceTime() 메소드를 호출하도록 한다. 또한 dispose()에서 리소스 해제 처리가 필요할지도 모른다. easing 함수 지정 Tween에는 여분의 함수를 지정할 수 있다. easing 함수의 종류는 생성자의 3 번째 인수로 전달한다. 기본 값은 linear다. 생성자에서 설정한 easing 함수는 애니메이션이 시작한 이후에는 변경할 수 없다. Tween 객체의 transition 속성에서 값을 참조만 가능하다.

import starling.animation.Transitions;
var myTween:Tween = new Tween (myQuad, 4, Transitions.EASE_OUT_BOUNCE );
위 예제에서는 easing 함수 easeOutBounce를 지정하고 있다. 여기에 지정 가능한 값은 Transitions 플래스에 정의되어 있다.
아래는 Starling 저자의 사이트에 게재되어 있는 easing 함수의 동작 그래프다. 참고.



섬세한 조정은 허용하지 않는다. 이 점은 Edge 및 Flex와 같다. Tween 진행 상태 알림 Tween은 애니메이션의 시작, 진행, 종료를 알리는 함수를 설정할 수 있다. AS2의 이벤트 핸들러와 비슷하게 사용한다. 구체적인 함수 이름은 각각 onStart(), onUpdate(), onComplete()다. onStart()와 onComplete()는 한 번씩, onUpdate()는 업데이트 프레임 수만큼 실행한다. 아래는 3개의 함수를 설정한 예다.

private function onAddedToStage(e:Event):void {
		myQuad = new Quad(100,100);
		myQuad.color = 0x00FF00;

		var myTween:Tween = new Tween(myQuad,4,Transitions.EASE_OUT_BOUNCE);
		myTween.moveTo(220, 380);
		Starling.juggler.add(myTween);

		myTween.onStart = onStart;
		myTween.onUpdate = onProgress;
		myTween.onComplete = onComplete;

		addChild(myQuad);
	}

	private function onStart():void {
		trace("트윈이 시작되었습니다");
	}
	private function onProgress():void {
		trace("트윈 실행 중");
	}
	private function onComplete():void {
		trace("트윈이 완료되었습니다");
	}

애니메이션의 전처리와 후처리를 실시하고 싶은 경우에는 도움이 될 것이다. 다음에는 Starling의 텍스처의 사용법을 소개한다.

원문 : http://cuaoar.jp/2011/12/tween-starling.html



package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Quad;
	import starling.utils.deg2rad;
	import starling.display.Sprite;
	import starling.animation.Tween;
	import starling.animation.Transitions;

	public class Demo extends Sprite {
		private var myQuad:Quad;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}
		private function onAddedToStage(e:Event):void {

			myQuad = new Quad(100,100);
			myQuad.setVertexColor(0, 0xFFFF00);
			myQuad.setVertexColor(1, 0xFF0000);
			myQuad.setVertexColor(2, 0x00FF00);
			myQuad.setVertexColor(3, 0x0000FF);
			
			myQuad.pivotX = myQuad.width >> 1;
			myQuad.pivotY = myQuad.height >> 1;

			// Tween 객체의 생성
			var myTween:Tween = new Tween(myQuad, 2.0, Transitions.EASE_IN_OUT);

			// 변화시키는 속성 지정
			myTween.moveTo(stage.stageWidth >> 1, stage.stageHeight >> 1);

			// Juggler에 Tween 객체를 추가하려면
			Starling.juggler.add(myTween);
			Starling.juggler.delayCall(myFunc, 2.0);


			addChild(myQuad);

		}	
		
		private function myFunc():void{
			var myTween:Tween = new Tween(myQuad,4.0, Transitions.EASE_OUT_ELASTIC);
			myTween.animate( "rotation", myQuad.rotation+deg2rad(90));
			myTween.onStart = onStartHandler;
			myTween.onUpdate = onUpdateHandler;
			myTween.onComplete = onCompleteHandler;
			Starling.juggler.add(myTween);
		}

		private function onStartHandler():void{
			var myTween:Tween = new Tween(myQuad,4.0, Transitions.EASE_OUT_ELASTIC);
			if(myQuad.scaleX == 2.0){
				myTween.scaleTo(1);
			}else{
				myTween.scaleTo(2);
			}
			
			Starling.juggler.add(myTween);
		}
		
		private function onUpdateHandler():void{
			trace("트윈 실행 중");
		}
		
		private function onCompleteHandler():void{
			myFunc();
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

    

설정

트랙백

댓글

2009년 6월 18일 Tweener의 개발종료를 선언하다.

Programming/ActionScript 3.0 2009. 8. 20. 00:15

본인이 ActionScript 3.0을 처음 접할 때 사막의 오아시스처럼 큰 도움을 주었던 Tweener 라이브러리가 최종 버전을 끝으로 개발을 종료한다고 한다. 현재 본인은 TweenLite, TweenMax를 사용하고 있지만 ActionScript 3.0을 재미있게 공부하고, 연구할 수 있도록 나에게 동기를 준 멋진 라이브러리가 아닌가 생각한다.

MC Tween 시절부터 플래시의 발전 속에서 역사가 깊은 라이브러리이기에 여러 가지 생각이 머리 속에서 스쳐 지나간다. Zeh Fernando씨에게 박수를 보낸다. 아래는 원문을 번역한 내용이다. 명확히 알 수 없는 내용은 포함하지 않았으며 일부 문장은 나름대로 재 해석한 관계로 내용 전달이 정확하지 않을 수도 있지만 전체적인 요점은 파악할 수 있을 것이라 생각한다.


========================================================================================
원문 : Zeh Fernando Blog Archive Tweener, 4 years later - A post mortem

우선 시작부터 이야기 하자면 나는 몇 년 전에 Flash 개발 과정에서 애니메이션이 필요하여 MC Tween를 개발했다. MC Tween는 ActionScript의 기본적인 tween을 확장하여 사용했다. 당시에 뛰어난 tween 확장 기능이 존재하고 있었지만 모두 나의 취향과 맞지 않았다. API의 대부분이 너무 추상적이었고 내가 요구하는 것과 달랐기 때문에 prototype 형식을 채용하여 MovieClip의 오브젝트형에 새로운 기능을 추가해서 만들었다. MovieClip에 새로운 기능을 추가하는 형태에 찬사를 주는 사람들이 있었기 때문에 그만한 인기를 얻을 수 있었다.

그러나 2005년 해가 되면서 MC Tween의 변화가 필요하게 되었다. MC Tween은 의도대로 움직이고 있었지만 ActionScript의 문법이나 패러다임(특히 AS2의 등장)이 변화하고 객체지향프로그래밍을 이해하기 시작하면서 MC Tween은 이미 나의 개발 워크플로우에 맞지 않는다는 것을 깨닫게 되었다. 더욱이 MC Tween의 개발이 꽤 정체되어 있었다.

그러던 그 해 6월부터 나는 클래스를 사용하여 새롭게 tween 확장 기능을 실험적으로 개발하기로 했다. 개발 당초에는 인스턴스 베이스(tween 인스턴스를 생성)였지만 이후에 addTween() 이라는 하나의 메소드에 의해서 모든 tween을 생성하는 정적인 클래스 구조로 변경했다. 그리고 stopTween(), getTween()과 같은 부속 메소드를 사용하여 여러 가지 기능을 조작할 수 있도록 했다.

이후에도 클래스는 매우 많은 변경이 있었다. 클래스명이 바뀌거나(초기에는 Twina였던 것이 Tweener가 되고 ZTweener가 되었다가 다시 Tweener로 되돌아옴)  패키지의 위치가 바뀌거나(generic *에서 zeh.easing.*으로, 그리고 다시 caurina.transitions.*)  API가 변경되거나 인스턴스 베이스에서 정적 클래스로 변경한 것은 말할 것도 없고 그 외에도 내부 구조의 변경 등이 많이 있었다. 이러한 과정에서 스스로가 많이 배웠다는 것이 이 글의 취지이지만 자신을 위해서 무엇인가를 만드는 경우, 결과를 누군가가 보고 평가하거나 더욱이 그것을 누군가가 매우 소중한 일에 사용하지 않을 것이라고 생각하고 만든다면 결과적으로 많은 실수를 허용하게 된다. 그러나 그 과정에서 보다 좋은 방법을 찾아내게 되는 것이다.

내가 이 프로젝트를 시작했을 무렵, tween 확장 기능으로서 제일 유명했던 것은 Fuse Kit이였다. 나는 이것과 겨룬다는 생각은 없었다. 다만 나 자신을 위해서 무엇인가를 만들고 자신의 요구에 맞게 변경해 나가는 자유를 즐기고 있었다. Tweener는 긴 시간동안 비공개(나 자신만 사용) 였던 것이 그러한 이유다. 무엇보다 Gringo를 위한 프로젝트를 위해서 사용하고 있었지만 공개된 것은 2007년 1월 최초의 버전을 개발하고 나서 대략 2년 후였다. Nate Chatellier가 팀에 참가하여 AS3버전의 Tweener를 만들었었기에 이대로 비공개로 하는 것은 공정하지 않다고 생각했다. 더욱이 그 시점에서 생각하기에 앞으로 API에는 큰 변화가 있을 것 같지 않았기 때문에 다른 사람들로부터 피드백을 받고 싶은 생각도 있었다.

Tweener는 특별히 참신한 것도 아니고 API는 새로운 것이 없었다. Tweener가 채용한 새로운 tween생성 방식도 다른 tween의 확장에서도 채용되고 있었다. AS1 베이스 확장에서도 채용되고 있었다. 그렇지만 그것은 그 시기에 올바른 구문이었다. 그러한 형태는 인기가 있었고 다른 언어판까지 나오게 되었다.

이는 4년전의 이야기.(로그를 보면 Tweener은 2005년 6월 15일에 개발 개시한 것으로 되어 있다.) 현재는 이 밖에도 많은 tween 확장판이 등장하고 있고, 특히 유명한 것은 Go, TweenLite / TweenMax, GTween, BetweenAS3 등이 있다. 라고 하는 것은? 그래, 또 그 때가 찾아왔다고 하는 것이다. 현재와 같이 AS3버전이 있다고 해도 Tweener가 가지는 패러다임의 대부분은 이미 시대에 뒤떨어져 버렸다. 나는 점점 불안을 느끼게 되었다. 나는 그동안 많은 것을 배웠다. 이제 움직이기 시작할 때다.

바로 움직이기 시작할 수도 있었지만, 그 전에 되돌아보고, 잘 된 것, 가지 않았던 것을 되짚어 보려고 했다. 이 글은 말하자면 Tweener의 사망선고 글, 4년간 내가 무엇을 배웠고, Tweener와 같은 라이브러리가 어떻게 변화해 왔는가 하는 점에 대한 나름의 분석이다.

그런데 AS2에서 AS3로 이동하는 시점에 고려해야 할 중요한 포인트가 한 개 있다. ‘에러’다. AS2 에러는 null 오브젝트의 프로퍼티를 변경하는 스크립트를 실행해도 FlashPlayer는 그대로 지나쳐 버린다. 물론 오브젝트가 존재하지 않기 때문에 스크립트 자체는 기능하지 않지만 그것을 알려주는 에러 메시지가 없다.

이것은 엄밀한 동작이 기대되는 경우에는 문제가 된다. 취득한 데이터가 의도한 것인지를 알기 위해서는 몇 개의 레벨의 검증이 필요하고, 그렇게 해서 다른 방법으로 유저에게 경고를 보낼 수 있었다. Tweener의 AS2 버전에서는 유저에게 보다 안전하게 동작할 수 있도록 노력했다. 구체적으로는 tween 중에 대상이 되는 오브젝트가 존재하는지를 체크하고, tween 되고 있는 프로퍼티에 디폴트의 값이 설정되어 있는지를 체크하고 있다.

하지만 AS3 버전으로 만들면서 그 기능은 필요 없게 되었다. 존재하지 않는 오브젝트나 프로퍼티에 액세스 하려고 하면 코드의 실행은 중단되게 되었다. 이것은 좋은 일이다. 유저가 자신이 무엇인가 실수를 범하고 있고, 그것을 수정하지 않으면 안 된다고 하는 것을 이해하는데 도움이 되기 때문이다.

한편, AS3 버전으로 임포트하는 시점에 Tweener는 이러한 AS2의 패러다임을 계승해 버렸다. 조금 전에 쓴 것과 같이 체크 기능도 많이 남아 있다. 또한 존재하지 않는 프롭퍼티의 값을 tween하려고 하면 FlashPlayer의 에러가 아닌, Tweener 내에서 설정한 커스텀 에러를 표시하게 되어 있다.

if (rScopes[0][istr] == undefined) {
     printError("The property '" + istr + "' doesn't seem to be a normal object property of " + String(rScopes[0]) + " or a registered special property.");
}

속성을 업데이트하기 위한 반복 루프에서도 마찬가지다. 업데이트하는 개체가 있는지 확인하고, 속성이 존재하는지 확인하고 있다. 이 방식으로 인하여 성능이 저하되고, 크기가 증가라는 부작용도 제기됐다.

새로운 tween을 적용할 때, Tweener는 비슷한 tween (동일한 개체의 동일한 속성에 적용하는 tween)이 있는지를 찾아 그들을 제거하려고 한다. 별도로 애니메이션을 하기 위해 요구되는 행동이지만, 이로 인해서 2개의 문제가 발생한다. 먼저 tween 덮어쓰기를 강제로 실행하면서 옵션은 없다는 것, 그리고 새 tween을 생성할 때 성능을 크게 저하 시킨다는 것, 이미 많은 tween이 동일한 위치에 있는 경우에는 더욱 그러하다.

최근 tween 엔진 성능을 비교해보면 문제는 더 명백해 진다. 실제 tween 갱신에 소요되는 시간과 메모리 소비 등은 나쁘지 않지만, 생성 tween 양이 늘어나면 늘어날수록 Tweener 처리는 느려진다. 새로운 tween이 생성될 때마다 기존의 모든 tween과 충돌을 체크하기 때문에 tween 생성에 소요되는 시간이 증가하는 것이다. tween 수가 1000을 초과한 상태에서 새 tween을 생성하려고 하면, 애니메이션 자체의 소요 시간을 초과하거나 FlashPlayer가 잠깐 멈추는 경우도 종종 있다. Tweener는 tween 목록을 단지 하나의 배열에 관리하고 있기 때문이다. 더 유용한 AS3 기본 기술을 이용하여 위 사항은 해결할 수 있는지도 모른다. 어쨌든 Tweener은 너무 안전하게 작동하려고 한다. 사용자가 성능을 향상시키고 싶은 처리를 허용하지 않는다.

오늘 Tweener에 대해 언급하는 것은 더 이상 최적화 문제가 아니라고 생각하기 때문이다. 보완할 수는 있다. 몇 가지 검사하는 기능을 제거, 또는 Array 대신 Dictionary와 같은 AS3의 새로운 기능을 추가하여 목록을 관리하거나, Vector 기능을 추가하거나 할 수 있다. 하지만 솔직히 말해서 Tweener는 그 전성기가 끝났다고 나는 확신한다. 그렇기 때문에 그러한 변경을 해도 곧바로 모든 것이 단순히 해소될 수 없다. 그러니 더 이상 Tweener을 업데이트 하는 것은 무의미하다. 물론(특히 동시에 1000개 이상 같은 tween을 수행할 필요가 없는 경우) 현재도 작동하고, 앞으로도 계속 도움이 될 것이다.

숨어 있던 새로운 버그가 나타나지 않는다면 Tweener를 업데이트할 생각이 없지만 최근에 있었던 이슈들을 업데이트했다. 새로운 버전의 1.33.74 Google Code 프로젝트 페이지 subversion 서버에 공개된다. 이 업데이트는 기본 tween 덮어쓰기 내용은 남겨두면서 overwrite라는 새로운 매개 변수를 추가하고 (이 값을 true로 하면 그 동안의 기능과 같다.) autoOverwrite는 새로운 정적 속성을 추가했다.

Tweener Comparison

위 그림에서 파란색 그래프는 tween없는 상태를, 오렌지 그래프는 Tweener 1.31.74를, 노란색 그래프는 Tweener 1.33.74에서 overwriting을 false로 설정한 상황을 보여주고 있다.

대단한 일이 아닐지라도, 이것은 이 프로젝트에 참여했던 몇 년간 내가 받은 지원, 조언, 배움, 그리고 훌륭한 경험에 대한 감사의 표시로 받아들여 주길 바란다. 프로젝트를 직접 지원해 준 회원 뿐 아니라, 이 프로젝트를 다양한 측면에서 지원해 준 모든 분들에게 진심으로 감사한 마음이다.

내가 Tweener의 개발을 Google Code 사이트로 옮긴 후부터 집계해온 재미있는 그래프를 보여 주겠다. 이것은 버전별 안정 버전 Tweener 다운로드 비율(전체 다운로드 회수)을 비교한 것이다. AS3가 차지하는 비중이 늘고 있다는 것을 알 수 있다. 덧붙여서,

Tweener download statistics

오늘 출시 버전은 포함하지 않았다.

Tweener download statistics

후기로 여러분에게 전달하고자 하는 것이 있다. 나는 현재 tween에 있어서 개인적으로는 Tweener에 의해 소개된 것과 다른 접근을 사용하고 있다. 내 자신의 워크플로우는 조금 바뀌었다. 색 트윈 및 기타 특별한 지름길은 사용하지 않는다. 대신 독립적인 클래스와 getter / setter 및 decorator 등을 통한 특정 기능을 사용하게 되었다. 내가 Tweener를 개발한 이유는, 자신의 개발 흐름에 맞게 무언가를 적용하고, 수요가 있으면 다른 사람들이 사용할 수 있도록 하는 즐거움에 있었다. Tweener를 공개하는 데 많은 시간을 할애한 것은 그 때문이다. 나는 현재, 모든 사람의 요구에 부응하기 위해 만들어진 것을 사용하기보다는, 특정한 누구를 위해 만들어진 것을 사용하는 것을 선호한다.

분명한 것은, "Tweener2"나 그런 것은 나오지 않는다는 것이다.
다시 한번 감사합니다!

========================================================================================

세상의 모든 것들은 시간의 흐름에 따라 변화하고, 소멸하고, 다시 새로운 것이 탄생하기를 반복한다. 플래시의 경우도 예외가 아니다. 플래시는 1년이 멀다 하고 새로운 API와, 흥미로운 기능들이 추가되며 발전해 왔다. 하지만 그 화려한 변신에 가려진 개발자들의 눈물겨운 노력은 일반 사람들에게는 잘 알려지지 않는다. 더욱이 플래시라는 분야를 재미없는, 해야만 하는 일로 생각하는 개발자라면 그 정도는 더욱 심했을 것이다.

Zeh Fernando씨가 Tweener의 사망선고하는 글을 올리기까지 얼마나 많은 노력과 시간을 투자했을지, 그리고 스스로에게 의미가 있는 프로젝트를 종료하기까지 많은 고민과 생각을 했으리라. 다시 한번 멋진 프로젝트를 진행했던 Zeh Fernando씨에게 박수를 보낸다.

어쩌면 Zeh Fernando씨가 우리에게 도움을 준 것 보다 Tweener를 의미 있는 작업에 활용하며 피드백을 주었던 수 많은 사람들로부터 받은 관심이 Zeh Fernando씨가 불특정 다수에게 감사를 표하는 가장 큰 이유일 것이다. Tweener는 종료되었지만 앞으로도 더욱 다양한 작품으로 만날 것을 기대해 본다.

    

설정

트랙백

댓글

[AS3] TweenMax Bezier Tweening Released by Jack

Programming/ActionScript 3.0 2008. 4. 6. 21:33
TweenLite와 TweenFilterLite를 만들었던 jack이 이번에 TweenMax를 릴리즈하였다. 이번 TweenMax에서는 bezier 곡선을 지원한다.

http://blog.greensock.com/tweenmaxas3/


Tweener와 속도 비교해보면 많은 오브젝트를 tween 시킬 때의 속도 차이를 느낄 수 있다.

http://blog.greensock.com/bezier-speed-test/
    

설정

트랙백

댓글

[AS3] caurina Tweener 클래스 사용 방법

Programming/ActionScript 3.0 2007. 8. 5. 01:17
caurina Tweener는 Papervision3D를 접하면서 알게 되었는데 플래시에서 지원하고 있는 Tween 클래스보다 다양한 기능과 그 사용법도 간단하다. static 메소드를 지원하여 Tweener.addTween() 형태로 사용하며 파라미터로 넘겨주는 것은 아래와 같다.

Tweener 사용 방법


Tweener.addTween(DisplayObjectInstanceName, {x:-1050, y:300, _bezier:[{x:-575, y:450, z:-375}, {x:411, y:275, z:-337}, {x:344, y:114, z:370}, {x:-466, y:56, z:398}, {x:-336, y:305, z:-1177}], time:10, transition:"easeoutinexpo"});

위와 같이 트윈을 적용한 인스턴스와 그 인스턴스에서 트윈할 프로퍼티의 적용값을 지정하며 _bezier 형태로 복수의 포인트 간 포인트 적용으로 동선을 임의로 제작할 수 있다. time은 적용 시간을 나타내며 초단위이다. transition은 에싱의 형태를 지정.
           
Tweener.addTween(cube, {onStart:tweenStart, onComplete:tweenComplete, rotationX:active, rotationY:active, rotationZ:active, time:1.5, transition:"easeinoutexpo"});

위와 같이 모션의 시작 시점에서 실행할 handler 메소드를 지정할 수 있으며 끝나는 시점과 update마다 실행 하는 handler 메소드도 지정 가능하다. handler 메소드의 종류는 아래와 같다.

handler 종류
///////////////////////////////////////////////////////////////////////

onStart : tween 시작 핸들러 등록
onComplete : tween 큰 핸들러 등록
onUpdate : tween 진행중 핸들러 등록

이 밖에서 여러가지 핸들러 메소드를 지원하고 있다.

transitions 종류
///////////////////////////////////////////////////////////////////////
easeoutquad             // mx.transitions.easing.Regular.easeOut
easeinoutquad          // mx.transitions.easing.Regular.easeInOut
easeoutinquad
           
easeincubic
easeoutcubic
easeinoutcubic
easeoutincubic
           
easeinquart
easeoutquart
easeinoutquart
easeoutinquart
           
easeinquint
easeoutquint
easeinoutquint
easeoutinquint
           
easeinsine
easeoutsine
easeinoutsine
easeoutinsine
           
easeincirc
easeoutcirc
easeinoutcirc
easeoutincirc
           
easeinexpo        // mx.transitions.easing.Strong.easeIn
easeoutexpo        // mx.transitions.easing.Strong.easeOut
easeinoutexpo        // mx.transitions.easing.Strong.easeInOut
easeoutinexpo
           
easeinelastic        // mx.transitions.easing.Elastic.easeIn
easeoutelastic        // mx.transitions.easing.Elastic.easeOut
easeinoutelastic    // mx.transitions.easing.Elastic.easeInOut
easeoutinelastic
           
easeinback        // mx.transitions.easing.Back.easeIn
easeoutback        // mx.transitions.easing.Back.easeOut
easeinoutback        // mx.transitions.easing.Back.easeInOut
easeoutinback
           
easeinbounce        // mx.transitions.easing.Bounce.easeIn
easeoutbounce        // mx.transitions.easing.Bounce.easeOut
easeinoutbounce        // mx.transitions.easing.Bounce.easeInOut
easeoutinbounce


클래스 내부를 살펴보면 아래와 같은 코드를 확인 할 수 있는데 아래와 같이 _frame에 대한 모션도 적용 가능하며(이 클래스를 사용하면 따로 gotoAndPlay 모션 클래스를 제작할 필요도 없어보이지만 간단한 사용을위해서는 따로 제작해서 사용하는 편이 효율적일 듯 싶다.아무래도 프레임간 모션 적용으로 프레임을 많이 필요로 할 듯 싶다) _color 속성으로 사용하면 RGB값으로 DisplayObject의 tint색을 변경하는 모션도 가능하다. 또한 blur값 변경과 사운드 볼륨의 경우도 마찮가지...

DisplayObject의 프로퍼티가 아닌 Tweener 클래스 자체에서 내부적으로 가공하여 사용한 프로퍼티의 경우는 앞에 _를 붙여서 사용하고 있다.

// Normal properties
Tweener.registerSpecialProperty("_frame", frame_get, frame_set);
Tweener.registerSpecialProperty("_sound_volume", _sound_volume_get, _sound_volume_set);
Tweener.registerSpecialProperty("_sound_pan", _sound_pan_get, _sound_pan_set);
Tweener.registerSpecialProperty("_color_ra", _color_property_get, _color_property_set, ["redMultiplier"]);
Tweener.registerSpecialProperty("_color_rb", _color_property_get, _color_property_set, ["redOffset"]);
Tweener.registerSpecialProperty("_color_ga", _color_property_get, _color_property_set, ["greenMultiplier"]);
Tweener.registerSpecialProperty("_color_gb", _color_property_get, _color_property_set, ["greenOffset"]);
Tweener.registerSpecialProperty("_color_ba", _color_property_get, _color_property_set, ["blueMultiplier"]);
Tweener.registerSpecialProperty("_color_bb", _color_property_get, _color_property_set, ["blueOffset"]);
Tweener.registerSpecialProperty("_color_aa", _color_property_get, _color_property_set, ["alphaMultiplier"]);
Tweener.registerSpecialProperty("_color_ab", _color_property_get, _color_property_set, ["alphaOffset"]);
Tweener.registerSpecialProperty("_autoAlpha", _autoAlpha_get, _autoAlpha_set);

// Normal splitter properties
Tweener.registerSpecialPropertySplitter("_color", _color_splitter);
Tweener.registerSpecialPropertySplitter("_colorTransform", _colorTransform_splitter);

// Scale splitter properties
Tweener.registerSpecialPropertySplitter("_scale", _scale_splitter);

// Filter tweening properties - BlurFilter
Tweener.registerSpecialProperty("_blur_blurX", _filter_property_get, _filter_property_set, [BlurFilter, "blurX"]);
Tweener.registerSpecialProperty("_blur_blurY", _filter_property_get, _filter_property_set, [BlurFilter, "blurY"]);
Tweener.registerSpecialProperty("_blur_quality", _filter_property_get, _filter_property_set, [BlurFilter, "quality"]);

// Filter tweening splitter properties
Tweener.registerSpecialPropertySplitter("_filter", _filter_splitter);

// Bezier modifiers
Tweener.registerSpecialPropertyModifier("_bezier", _bezier_modifier, _bezier_get);

그리고 Tweener 클래스에서는 첫 파라미터인 DisplayObject에 DisplayObject를 복수로 가지고 있는 Array를 등록할 경우 Array에 있는 모든 DisplayObject에 해당 트윈을 적용 할 수 있다.

_bezier의 경우는 Papervision3D에서 주로 사용되었는데 이는 카메라의 위치나 각도를 변경할 때 효과적으로 사용되고 있다. 2D 형태에서도 복잡한 동선의 경우에 기존의 트윈 클래스의 모션이 매끄럽지 못하여 그 모션을 적용하기 위한 클래스를 따로 제작해서 사용해야 했지만 제공하고 있는 샘플을 통해서 쉽게 동선을 그리고 좌표를 축출할 수 있다.  그동안의 트윈 클래스에서 아쉬웠던 부분들을 속시원하게 채워주고 있는 듯 싶다.

코드가 업데이트 되고있는 위치
http://code.google.com/p/tweener/
    

설정

트랙백

댓글