아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (199)
    • Web (145)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (5)
    • IT (32)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (6)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라

R 스토리

IT/UI | UX

[트윈맥스] 구문정리

2018. 5. 15. 14:58

기본 구문//

TweenMax.to(target:Object, duration:Number, variables:Object):TweenMax

target : Object - 오브젝트


duration : Number - tween 시간 /(초)

variables : Object - 객체의 모든 속성




VARIABLES



delay : Number - 지연시간

ease : Function - 따로 ease 클래스는 없나 봅니다. 상단에 fl.motion.easing.*; 한줄 추가 해주시고 Tween Class처럼 쓰면 됩니다.

      Default-Regular.easeOut

easeParams : Array - 직접 ease을 만들어서 쓸수 있습니다. 방정식이 있겠죠? 전 패스;;;

autoAlpha : Number - 그냥 alpha와 별 차이를 모르겠습니다;

visible : Boolean - 모션이 완전히 끝났을때 visible 처리

volume : Number - 볼륨조절

tint : Number - 16진수로 원하는 색상 넣어주면 됩니다. tint를 없애고 싶으면 tine:null

frame : Number - 기존 caurina와 방법 같습니다. useFrame이란 속성이 있는 찾아봐야겠습니다. 

                 찾기 전까진 gotoAndStop() 정도로만 써야 할듯;완전 덜덜 거리네요;

bezier : Array - 베지어입니다^^ 베지어 곡선 처리에 대해선 좋은글들이 많으므로 패스;  bezier:[{_x:250, _y:50}] 쭈욱 늘여 써 가면 되겠죠 

bezierThrough : Array - 베지어 점 사이사이를 통과하는게 아니라 점을 통과 합니다. 곡선이 더 심해지겠죠

orientToBezier : Array (or Boolean) - 무비클립을 베이지어 곡선 맞추어 회전시키면서 tweenning 합니다.

           간단하게 orientToBezier:true 하면 됩니다. 수정 하고 싶으시면

           orientToBezier:[["x", "y", "rotation", 0]] 마지막 param값을 조정해 보세요

hexColors : Object - 왜 아무변화가 없지;;

onStart : Function - tween 시작시


onStartParams : Array

onUpdate : Function - tween 되는 동안

onUpdateParams : Array

onComplete : Function - tween 완료시

onCompleteParams : Array

renderOnStart : Boolean - ~.from tween을 쓸때 delay되는 동안엔 Object를 어떻게 처리할것인지 결정

        false(default) : 지정한 속상값을 유지 합니다.

                          true :  this 속성값을 유지 합니다.


overwrite : Boolean - 같은 이름 또는 같은 Object에 tween이 두개이상이 진행될때 이미 진행중인 tween을 overwirte 할것인지 설정

       테스트해본 결과 난해함;;;(랜덤 결과 산출이라고나 할까;;;) 

       중복현상을 조정을 하기 위해 removeTween(여기에서는 이것을 이용해서 kill이라는 함수를 만들어서 쓰네요)을 생활화하는게 더 나을지도;;


blurRilter:{blurX:Number, blurY:Number quality:Number}


glowFilter:{alpha ,blurX ,blurY ,color ,strength ,quality ,inner ,knockout }

colorMatrixFilter:{colorize ,amount ,contrast ,brightness ,saturation ,hue ,threshold ,relative ,matrix }

dropShadowFilter :{alpha ,angle ,blurX ,blurY ,color ,distance ,strength ,quality 

bevelFilter :{angle ,blurX ,blurY ,distance ,highlightAlpha ,highlightColor ,shadowAlpha ,shadowColor ,strength ,quality }




KEY METHODS



TweenMax.to : this 속성에서 지정한 속성까지



TweenMax.from :  지정한 속성에서 this 속성까지

참고 -  속성값에 ""을 붙이면 절대값이 아닌 상대값만큼 이동 또는 변합니다.

  이건 caurina에서 안해 본것이였는데 신기하군요;;

  to 와 from을 적당히 조절 해서 쓰면 좀더 멋진 모션 효과를 낼듯 합니다.

TweenMax.sequence : from + to = sequence 라 할수 있겠죠

기본 구문: TweenMax.sequence(target:Object, tweenObjects:Array):Array 

ex)- TweenMax.sequence(mc, [{time:2,x:100, alpha:0.5}, {time:1, y:300}]);

   //2초동안 x좌표 100,알파는 50%로 이동,변화하고 난뒤 1초 동안 y좌표 300으로 이동

   *더 많은 tweenObject 추가 가능



TweenMax.multiSequence : sequence와 같지만 다른 target을 지정할 수 가 있습니다.   

기본 구문: TweenMax.multiSequence(target:Object, tweenObjects:Array):Array 

ex)- TweenMax.multiSequence([{target:mc1, time:1, x:"200"}, {target:mc2, time:2, autoAlpha:0}]);

  *더 많은 target,tweenObject 추가 가능



TweenMax.allTo : 여러 target을 동시에 적용 시킬수 있습니다 ^ o^b  //for 문 없이도 이런게 가능하군요;

기본 구문: TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array 

ex) - TweenMax.allTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"100", alpha:0, delayIncrement:0.2});


delayIncrement : Number - 각 target들 간에 delay

onCompleteAll : Function - onComplete은 각 target이 complete될때마다 각각 호출

                         - onCompleteAll은 tween이 다 끝나고 한번만 호출

onCompleteAllParams : Array



TweenMax.allFrom : 이건 그냥 패스해도 되겠죠~ ㅎ



TweenMax.getTweensOf(target:Object):Array 

TweenMax.isTweening(target:Object):Boolean 

TweenMax.getAllTweens():Array 

 -tween이 몇번 적용되는건지 알아내는건가; //이부분은 이해가 잘 안가네요

TweenMax.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array); 

 -target 없이 함수를 delay 후에 호출

TweenMax.killDelayedCallsTo(function:Function);

 -해당 delayedCall함수를 kill 함

TweenMax.killAllDelayedCalls(complete:Boolean):void;

 -모든 delayedCall 을 kill 함

 -false(default) : 바로 kill

 -true : 각 onComplete를 호출 후 kill

TweenMax.killTweensOf(target:Object, complete:Boolean);

TweenMax.killAllTweens(complete:Boolean):void 

 -false(default) : pause() 처럼 보이면서 tween kill

 -true : complete 화면을 보여주고 tween kill

 -delayedCall은 kill안됨

TweenMax.pauseAllTweens():void 

TweenMax.resumeAllTweens():void 

pause():void 

resume():void





출처: http://autosave.tistory.com/62 [계]


728x90
저작자표시 비영리 (새창열림)

'IT > UI | UX' 카테고리의 다른 글

[SNS] 공유 이미지 사이즈  (0) 2018.07.03
[횡스크롤] 예제모음  (0) 2018.06.05
[플러그인] 탭안에 슬라이드, 영역 밖의 화살표 => slick  (2) 2018.05.15
handlebars.js[jsfiddle]  (0) 2018.05.15
[반응형] 반응형 웹 디자인  (0) 2018.05.15

티스토리툴바