TweenCSS

Type : Constructor

Support : 1.0

Extend : $B.Class

  • CSS를 반복적으로 조작하여 대상의 부드러운 움직임을 줄때 사용한다.
  • IE7에서 left나 top처럼 좌표를 이동 시키려 하는데, 동작하지 않을시 대상에 position을 설정하면 된다.
    scrollLeft, scrollTop 지원.

Methods

  • TweenCSS( target, duration, begin_props, finish_props, option, data )

    TweenCSS 생성
    • target : SelectorElementjQuery
      대상개체
      ※대상 개체는 단일 개체
    • duration : Number
      지속시간, 초
    • begin_props : String
      출발값들, null을 설정하면 대상의 스타일 속성을 검색(해당스타일 속성이 없으면 에러)
    • finish_props : String
      도착값들
    • option : Object
      • ease : Function
        $B.utils.ease 설정 (기본값 "quadOut")
    • data : *
      핸들러에서 전달받을 e.data

  • delay( time, callback ) : TweenCSSver 1.0~

    해당 초만큼 지연시킨후 다음 Method실행, 한명령줄에 하나의 delay만 사용한다.
    • time : Number
      초단위, 예) 0.5초
    • callback : Function
      delay가 끝나는 호출

  • start() : TweenCSSver 1.0~

    TweenCSS 리셋후 시작.

  • stop() : TweenCSSver 1.0~

    TweenCSS 정지.

  • reset() : TweenCSSver 1.0~

    TweenCSS 정지후 0.

  • seek( progress ) : TweenCSSver 1.0~

    해당탐색 구간으로 Tween.
    • progress : Number
      0 ~ 1

  • seekTo( progress ) : TweenCSSver 1.0~

    해당탐색 구간으로 즉시 이동.
    • progress : Number
      0 ~ 1

  • toggle() : TweenCSSver 1.0~

    progress가 0이면 1, 1이면 0으로 Tween.

  • addProp( begin_props, finish_props ) : TweenCSSver 1.0~

    스타일 속성들 추가. 예)'width: 100px; z-index: 3;'
    • begin_props : String
      출발 CSS문자열, 예) "left:10px; top:20px",
      null을 설정하면 대상개체의 현재스타일 속성을 검색(해당스타일 속성이 없으면 에러)
    • finish_props : String
      도착 CSS문자열, 예) "left:200px; top:200px"

  • removeProp( propName ) : TweenCSSver 1.0~

    스타일 속성들 삭제
    • propName : String
      삭제할 CSS속성명, 'z-index' 표기법 사용

  • fps( frame ) : TweenCSSver 1.0~

    FPS (초당 프레임) 설정.
    • frame : Int
      기본 fps PC : 60, Mobile : 30

Events

No. type description property ver
1 tween Tweener동작이 멈출때까지 계속 발생
  • currentValue: 현재값
  • progress: 진행률
  • percent: begin, finish 설정대비 비율
  • currentCount: 현재 호출된 횟수
  • totalCount: 전체 호출될 횟수
  • data: 설정했던 data
 1.0
2 complete Tweener가 완료시 발생 tween 와 동일 1.0
2 seekcomplete seek(), seekTo()로 Tween시킨후 완료시 발생 tween 와 동일 1.0

Example

var tweener = new $B.utils.TweenCSS( '#box', 0.3, 'left: 0px', 'left: 200px' )
        .addListener( 'tween', function (e) {
            //
        })
        .addListener( 'complete', function (e) {
            //
        })
        .addListener( 'seekcomplete', function (e) {
            //
        }).start();

//TweenCSS 정지
tweener.stop();

//Tween시킬 CSS속성 추가
tweener.addProp( 'color: #ff00ff; left:20px', 'color: #004400; left:100px' ).start();

//TweenCSS에 등록된 CSS속성 삭제
tweener.removeProp( 'color', 'left' );