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();

편집 요약

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