Tweenlite - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

{{tag>tweenlite}}
====== Tweenlite ======
{{INLINETOC}}

TweenLite
Tween 클래스의 대표주자 TweenLite

http://hwaba.nflint.com/lab/tween/

TweenLite
<file>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
</file>
TweenMax
<file>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</file>
( 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});

2+1? 이 필드는 비어 있도록 유지하세요:

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International