추적 • adolproblembehavior • std095 • terrain-usingterrains • adminer • tweenlite

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판		이전 판
tech:tweenlite [2016/09/18 13:32] – 만듦 V_Ltech:tweenlite [2016/09/18 13:41] (현재) – V_L
줄 1: 줄 1:
 +
 {{tag>tweenlite}} {{tag>tweenlite}}
 ====== Tweenlite ====== ====== Tweenlite ======
줄 5: 줄 6:
   TweenLite   TweenLite
 Tween 클래스의 대표주자 TweenLite Tween 클래스의 대표주자 TweenLite
 +http://turfrain.tistory.com/entry/TweenMax
 +
 +http://hwaba.nflint.com/lab/tween/
 +
  
 TweenLite TweenLite
줄 18: 줄 23:
 ( jquery 없이 사용 가능 ) ( jquery 없이 사용 가능 )
  
 +<file>
 +var box = document.getElementById( "box" );
 +TweenLite.to( box, 1.5, { left:100, width:200 } );
 +</file>
 +
 +
 +<file>
 +TweenLite.to( $("box"), 1.5, { left:100, width:200 } );
 +</file>
 +
 +  ====스타일====
 +
 +  TweenLite.to( box, 1.5, { width:800, height:70 } );
 +
 +  TweenLite.to( box, 1.5, { left:400, top:50 } );
 +
 +  TweenLite.to( box, 1.5, { backgroundColor:#00f; } );
 +
 +  TweenLite.to( box, 1.5, { scaleX:2, scaleY:3, rotation:120 } );
 +
 +  TweenLite.to( "#box", 1.5, { left:800, ease:Power3.easeInOut } );
 +
 +  TweenLite.to( box, 1.5, { left:800, delay:1 } );
 +
 +  TweenLite.to( box, 1.5, { left:800, onComplete:endFunction } );
 +
 +  TweenLite.fromTo( box, 1.5, { left:10, height:30 }, { left:800, height:100 } );
 +
 +  var myTween = new TweenLite.to( box, 1.5, { left:800, paused:true } );
 +  myTween.resume();
 +  myTween.reverse();
 +  
 +  //mc3을 알파가 0이고, 현재 위치에서 100픽셀 위인 곳에서 현재 위치로 트윈시킵니다. (vars 인수의 오브젝트는 끝나는 지점이 아닌 시작하는 지점입니다.)
 +  TweenLite.from(mc3, 1, {y:"-100", alpha:0});