코드랩 레퍼런스

mo.js - API 본문

BASIC

mo.js - API

webstoryboy 2018.02.04 15:03

mo.js는 자바스크립트 애니메이션 플러그인 입니다. mo.js를 이용하면 애니메이션을 쉽고 퀄리티 있게 구현 할 수 있습니다.

CSS API Reference

속성 기본값 설명
el null 선택자 선택
x 0 translateX 속성 값 설정
y 0 translateY 속성 값 설정
z 0 translateZ 속성 값 설정
skewX 0 skewX 속성 값 설정
skewY 0 skewY 속성 값 설정
angleX 0 rotateX 속성 값 설정
angleY 0 rotateY 속성 값 설정
angleZ 0 rotateZ 속성 값 설정
scale 1 scale 속성 값 설정
scaleX 1 scaleX 속성 값 설정
scaleY 1 scaleY 속성 값 설정
opacity 1 투명도 속성 값 설정
customProperties null 속성을 개별적을 설정합니다.
isShowStart true 애니메이션을 시작합니다.
isShowEnd true 애니메이션을 끝냅니다.
isForce3d false 애니메이션을 수동으로 설정합니다.
isSoftHide true display 대신에 tramsform을 이용하여 숨김니다.
isRefreshState true 애니메이션을 새로고침 합니다.
callbacksContext this 애니메이션 완료 후 텍스트를 설정합니다.

SHAPE PROPERTIES Reference

속성 기본값 설명
parent document.body 부모 선택자를 설정합니다.
className string 클래스 이름을 설정합니다.
shape 'circle' 객체 모양을 설정합니다. [ 'circle' | 'rect' | 'polygon' | 'line' | 'cross' | 'equal' | 'curve' | 'zigzag' ]
stroke 'transparent' 선 색을 설정합니다.[color name, rgb, rgba, hex]
strokeOpacity 1 선 투명도를 설정합니다.
strokeLinecap '' 선 끝 모양을 설정합니다. ['butt' | 'round' | 'square']
strokeWidth 2 선 두께를 설정합니다.
strokeDasharray 2 선의 Dasharray를 설정합니다.
strokeDashoffset 2 선의 Dashoffset을 설정합니다.
fill 'deeppink' 면색을 설정합니다.
fillOpacity 1 면의 투명도를 설정합니다.
left '50%' 요소의 왼쪽 위치 포지션 값을 설정합니다.
top '50%' 요소의 위쪽 위치 포지션 값을 설정합니다.
x 0 요소의 X축 위치를 설정합니다.
y 0 요소의 Y축 위치를 설정합니다.
angle 0 요소의 각도를 설정합니다.
scale 1 요소의 크기를 설정합니다.
scaleX null 요소의 X축 크기를 설정합니다.
scaleY null 요소의 Y축 크기를 설정합니다.
origin '50% 50%' 요소의 x, y, scale, rotate 속성의 방향을 설정합니다.
opacity 1 요소의 투명도를 설정합니다.
rx 0 circle 요소의 보더 레디우스의 X축 값을 설정합니다.
ry 0 circle 요소의 보더 레디우스의 Y축 값을 설정합니다.
points 3 요소의 꼭지점 값을 설정합니다.
radius 50 요소의 레디우스 값을 설정합니다.
radiusX 50 요소의 레디우스 X축 값을 설정합니다.
radiusY 50 요소의 레디우스 Y축 값을 설정합니다.

TWEEN API Reference

속성 기본값 설명
duration 350 애니메이션 지속 시간을 설정합니다.
delay 0 애니메이션 지연 시간을 설정합니다.
repeat 0 애니메이션 반복 횟수를 설정합니다.
speed 1 애니메이션 스피드를 설정합니다.
isYoyo false 애니메이션 끝난 후 다시 처음으로 이동합니다.
easing sin.out 애니메이션 움직임을 설정합니다.
backwardEasing null 애니메이션 반대로 움직일 때 설정합니다.
timeline CALLBACKS 타임라인 전체의 속성을 설정합니다.

TWEEN CALLBACKS API Reference

속성 설명
onProgress(p, isForward, isYoyo){}
onStart (isForward, isYoyo){}
onStart (isForward, isYoyo){}
onStart (isForward, isYoyo){}
onFirstUpdate (isForward, isYoyo){}
onUpdate (ep, p, isForward, isYoyo){}
onRepeatComplete (isForward, isYoyo){}
onComplete (isForward, isYoyo){}
onPlaybackStart (){} 애니메이션 시작하고 트윗이 동작하기 전에 이벤트가 발생합니다.
onPlaybackPause (){} 애니메이션 멈추고 트윗이 동작하기 전에 이벤트가 발생합니다.
onPlaybackStop (){} 애니메이션 정지되고 트윗이 동작하기 전에 이벤트가 발생합니다.
onPlaybackComplete (){} 애니메이션 끝나고 이벤트가 발생합니다.
.then({ }) 애니메이션 다음 동작을 설정합니다.
.play() 애니메이션을 플레이합니다.
.playBackward() 애니메이션을 뒤로 플레이합니다.
.resume() 애니메이션을 다시 시작합니다.
.pause() 애니메이션을 정지합니다.
.stop() 애니메이션을 멈춥니다.
.replay() 애니메이션을 다시 시작합니다.
.replayBackward() 애니메이션을 뒤로 리플레이합니다.
.setProgress() 애니메이션 진행을 다시 설정합니다.
.setSpeed() 애니메이션 스피드를 다시 설정합니다.
.reset() 애니메이션 리셋합니다.

Ad

Comments
댓글쓰기 폼