본문 바로가기

html

 (4)
[입문] TWEENMAX 트윈맥스 배우기 4 - easing easing은 jQuery Animation에서 볼수 있는 메소드이다.easing Function은 매개변수의 변화율을 시간이 지남에 따라 정하는 것으로,지정한 값의 속도로 움직이게 된다. * easing 종류 트윈맥스는 이 easing을 쉽게 구현하기 위한 페이지가 있으므로 하단 링크를 통해예시, 실행을 해본 뒤 코드를 복사해서 지정을 하면 된다. https://greensock.com/docs/Easing * 그래프형태 * 시계형태 * 박스형태
[입문] TWEENMAX 트윈맥스 배우기 3 - 변수 기본 구문// 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 : Numbe..
[입문] TWEENMAX 트윈맥스 배우기 2 - 메서드 KEY METHODS- 기본 메서드 TweenMax.to : this 속성에서 지정한 속성까지 TweenMax.from : 지정한 속성에서 this 속성까지 TweenMax.fromTo : from에서 지정한 속성에서 to에서 지정한 속성까지 ex) TweenMax.fromTo(target, duration, {from vars}, {to vars}); TweenMax.allTo / TweenMax.allFrom : for문 없이 여러 target을 동시에 적용 기본 구문: TweenMax.allTo(targets:Array, duration:Number, vars:Object):Array ex) TweenMax.allTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"100", alpha..
[입문] TWEENMAX 트윈맥스 배우기 1 - 기본 평소 CSS Transition, Animation으로 HTML 애니메이션 작업을 많이 하는 편이었는데, 이벤트성 페이지에선 작업이 많을경우 소스가 길어지는것도 있고 복잡해져 한계가 있다. jquery animation 역시 부드럽게 보이지 않을 때도 있으므로, 애니메이션 라이브러리인 TWEENMAX로 처리하는게 좋을것으로 판단하여 트윈맥스 공부를 시작하고자 사용법 포스팅을 시작하였다. 트윈맥스는 greensock 에서 만든 라이브러리로 https://greensock.com/ 위 사이트에 접속하여 다운을 받거나 cdn을 연결해주면 사용이 가능하다. - 기본 템플릿.to() 트윈맥스에서 가장 기본적으로 사용하는 것은 TweenMax.to() 이다. .to()는 일반적으로 .animate() 라고 생각하면..

티스토리툴바