Leturn.Interaction.Tween

threadCountPropertystatic/read-only

현재 Tween 메인엔진에서 처리중인 thread의 모든 갯수를 반환한다.
기본적으로 이 thread는 해당 tween 요청이 모두 중지되면 자동으로 제거되며, 쓰레드는 항상 유동적이다. <body> <input type='text' id='dp'> <script type='text/javascript'> function checkThreadCount() { for( var i = 0; i < 100; i++ ) { new Leturn.Interaction.Tween().play( { sv:1, ev:0, d: i * 100 } ); } setInterval( function() { document.getElementById('dp').value = 'thread count : ' +Leturn.Interaction.Tween.threadCount; },100 ); } </script> <button onclick='checkThreadCount();'>Check thread count.</button> </body>
useCountDurationProperty

duration 방식을 time 기반으로 사용하지 않고, count 방식으로 처리한다.
time기반의 경우, 지정된 시간동안 duration이 수행되기 때문에, 과부하나 복잡한 트위닝일경우 트위닝처리 과정이 보이지 않지만
count 방식은 지정된 count 수만큼 duration을 무조건 수행하기 때문에 시작과 끝에 대한 트위닝이 명확하게 구별된다. <body> <script type='text/javascript'> var tween = new Leturn.Interaction.Tween; function toggleChangeMode() { tween.useCountDuration = !tween.useCountDuration; tween.play( { sv:0, ev:100, d:200, cb: function(e) { document.getElementById('dp').value = 'useCountDuration : '+this.useCountDuration+ ' position : '+ this.position + ' tweenedValue : '+ this.tweenedValue; }} ); } </script> <input type='text' id='dp' style='width:100%;' /><br> <button onclick='toggleChangeMode();'>Change Duration Mode.</button> </body>
startValueProperty

트위닝 처리를 위한 시작값을 설정한다.
이 값은 리터럴 넘버형 타입과 오브젝트형 타입 모두 적용가능하다.
오브젝트의 경우 배열까지도 적용가능하다. 만약 startValue = [ 1,2,3 ] 이라고 가정한다면 각 배열의 원소 모두가 동시에 트위닝 대상으로 적용된다. <body> <script type='text/javascript'> var tween = new Leturn.Interaction.Tween; tween.onTweening = tween.onFinish = function(e) { var dp = document.getElementById('dp'); dp.value = ''; LtnU( e.parameters.tweenedValue, function( v, i, o ) { dp.value += i + ' : ' + v + ', '; }); }; function testNumberType() { tween.play( { sv:0, ev:100 } ); } function testArrayType() { tween.play( { sv: [ 1, 2, 3 ], ev: [ 100, 200, 300 ] } ); } function testObjectType() { tween.play( { sv: { a:1, b:2, c:3 }, ev: { a:100, b:200, c:300 } } ); } function testComplicateType() { tween.play( { sv: [ 1, {a:2}, [4] ], ev: [ 100, {a:200}, [300] ] } ); } </script> <input type='text' id='dp' style='width:100%;' /><br> <button onclick='testNumberType();'>Test Number Type.</button><br> <button onclick='testArrayType();'>Test Array Type.</button><br> <button onclick='testObjectType();'>Test Object Type.</button><br> <button onclick='testComplicateType();'>Test Complicate Type.</button> </body>
playMethod
( options:Object=null ):void

트윈처리를 실행한다.
options 객체를 통해서 다양한 커스터마이징을 부여할 수 있다. <div id='A' style='position:relative; width:100px; height:100px; background-color:#ff0000;' ></div> <button onclick='basic1();'>basic1</button> <button onclick='basic2();'>basic2</button> <button onclick='basic3();'>basic3</button> <button onclick='extend1();'>extend1</button> <button onclick='extend2();'>extend2</button> <button onclick='extend3();'>extend3</button> <button onclick='extend4();'>extend4</button> <button onclick='if(window.at) at.isTweening? at.pause(): at.resume(); extend5(); '>pause/resume(토글)</button> <script type='text/javascript'> var ele = document.getElementById('A'); // 기본 사용법 function basic1() { var at = new Leturn.Interaction.Tween(); at.startValue = 1; at.endValue = 200; at.addEventListener(Leturn.Interaction.Tween.TWEENING, function(e) { ele.style.left = e.parameters.tweenedValue+'px'; // or at.tweenedValue+'px'; }); at.play(); } // 기본사용법2 - duration을 기본값 500(0.5초)에서 1000(1초) 로 조정하고 addEventListener대신 onEvent 핸들러로 처리. function basic2() { var at = new Leturn.Interaction.Tween(); at.onTweening = function(e) { ele.style.left = e.parameters.tweenedValue+'px'; // or at.tweenedValue+'px'; }; at.play( {sv:1, ev:200, d:1000 }); } /* 기본사용법3 - duration을 useCountDuration =true로 20으로 설정.(이렇게 되면 주어진 duration 카운터동안 순차적으로 무조건실행- 타임기반이 아님) 따라서 무조건적으로 어떤 트위닝을 해야하는 경우가 있다면 이방식으로 활용할수 있슴, 모든 이벤트처리를 play 호출시 options으로 처리, fcb 콜백을 등록해서 완료시점 확인 */ function basic3() { (new Leturn.Interaction.Tween). play( { sv: 1, ev: 200, uc: true, d: 20, cb: function(e) { ele.style.left = e.parameters.tweenedValue+'px'; }, fcb: function(e) { alert('tween Finished'); } } ); } // 고급사용법1 - repeatCount를 10번으로 설정, 즉, 10번동안 반복플레이를 수행하고 autoReverse모드를 false로 설정. function extend1() { (new Leturn.Interaction.Tween). play( { sv: 1, ev: 200, d:1000, ar: false, rc:10, cb: function(e) { ele.style.left = e.parameters.tweenedValue+'px'; }} ); } // 고급사용법2 - repeatCount를 무한대로 설정, 즉 계속플레이 되면서 기본 autoReverse는 수행됨 function extend2() { (new Leturn.Interaction.Tween). play( { sv: 1, ev: 200, d:1000, rc:0, cb: function(e) { ele.style.left = e.parameters.tweenedValue+'px'; }} ); } // 고급사용법3 - easing 변경(기본 in.out -> bounce.inout) function extend3() { (new Leturn.Interaction.Tween). play( { sv: 1, ev: 200, d:1000, es:'bounce.inout', cb: function(e) { ele.style.left = e.parameters.tweenedValue+'px'; }} ); } // 고급사용법4 - 시작 position head를 500 위치에서 시작하도록 설정하고 2번 반복플레이. function extend4() { (new Leturn.Interaction.Tween). play( { sv: 1, ev: 200, p:500, rc:2, d:1000, cb: function(e) { ele.style.left = e.parameters.tweenedValue+'px'; }} ); } // 고급사용법5 - pause, resume 메소드 혼용사용 function extend5() { if(window.at) return; window.at = new Leturn.Interaction.Tween; at.play( { sv: 1, ev: 200, uc: true, d: 100, cb: function(e) { ele.style.left = e.parameters.tweenedValue+'px'; }, fcb: function(e) { window.at = null; } } ); } </script>