mo.js - API

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

• mojs.io
• mojs-master.zip

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()	애니메이션 리셋합니다.