마크업 부터 시작하는 UI/트윈맥스(TweenMax)2019. 1. 12. 07:13

트윈맥스로 움직임이 필요한 엘리먼트에 유연한 애니메이션 진행을 표현할 수 있는 메서드가 존재합니다.사용 방법에 대한 글을 쓰기에 앞서 도데체 어떤 방법으로 곡선방향을 만들어 낼 수 있는지 알아보는게 좋습니다. 위키백과 베지어 곡선 링크: https://en.wikipedia.org/wiki/B%C3%A9zier_curve 일단 핵심 내용은 이렇습니다. 선형(扇形: 부채꼴)은 두 점 사이의 직선일 뿐이다. 부채를 보면 각져있는것 보다는 약간 휘어져 있습니다. 아 물론 네모난 부채도 충분히 있지만요..부채하면 딱 떠오르는 그런 물건을 생각하시면 됩니다. 그리고 곡선이 어떻게 만들어 지는지 움짤로 보여드리겠습니다. 음... ㅋㅋㅋ직접 제작한 움짤입니다. ㅋㅋㅋㅋ마지막에 곡선이 이렇게 생긴다 라는걸 굵은 선으로..

마크업 부터 시작하는 UI/트윈맥스(TweenMax)2017. 9. 21. 15:16

repeat(반복) 트윈맥스는 반복 옵션을 설정할 수 있습니다. repeat 이 바로 그 속성 입니다.이 반복 속성은 원래 하려고 했던 애니메이션에 몇번 더 반복할 껀지 넣어주면 됩니다.자바스크립트 코드를 보면 이렇습니다.1TweenMax.to('.box', 2, {width:100,height:100,repeat:1});cs 뒷쪽에 repeat 이라는 속성이 보이실 꺼예요. 지금 repeat 의 값으로 1 이라는 숫자가 들어가 있습니다.그러면 일반적으로 한번만 움직이는거 아닌가 생각이 들텐데 이 옵션은애니메이션이 최초 1회 실행 후에 반복하는 횟수 입니다. 즉 repeat이 1 이면 총 두번에 걸쳐 같은 애니메이션이 진행 됩니다. 무한 반복 무한 반복은 repeat 속성에 -1 이라는 값을 넣어주면 됩..

마크업 부터 시작하는 UI/트윈맥스(TweenMax)2017. 9. 20. 15:56

Plugins 트윈맥스는 트윈맥스플러그인을 별도로 가지고 있습니다. 이 플러그인을 통해 여러가지 동적 기능을 사용할 수 있습니다.각 플러그인은 속성 이름에 연관되어 있습니다.맨처음 트윈맥스를 다운 받았을 때 플러그인 파일도 함께 들어있습니다. greensock-js/src/minified/plugins 경로로 접근하시면 압축된 플러그인 파일들을 볼 수 있습니다.이중 TextPlugin.min.js 를 먼저 사용해 보겠습니다. 다운 받아서 쓰시는 분은 사이에 TextPlugin.min.js 를 연결시켜 주세요. 이 플러그인에 다른 옵션이 있는데, 어떻게 사용하는지는 잘 모르겠네요.혹시 아시는 분은 jsFiddle 주소 또는 codePen 주소를 댓글로 달아주시면 감사합니다!다른 트윈맥스 플러그인은 사용은 ..

마크업 부터 시작하는 UI/트윈맥스(TweenMax)2017. 9. 20. 11:56

Tween을 변수로 만들어 사용할 수 있습니다.1var myTween = new TweenLite(photo, 1.5, {width:100, height:200});cs 다시 재실행 시키려면 브라우저를 새로고침 할 필요 없이 저 jsFiddle 에서 다른 탭을 선택했다가 Result 를 다시 클릭해주면 됩니다.객체 지향 접근 방식을 선호하거나, 변수에 Tween에 대한 참조를 저장하는 경우 이런식으로 js를 작성한다고 하네요.우선 봐야할건, 이렇게 변수에 할당만 했을 뿐인데 애니메이션이 실행이 되었습니다. 애니메이션을 제어하려면 옵션을 작성해 줘야 합니다. 예를들면, 멈춤, 재생, 반전, 재시작 등을 하려면요.한가지 옵션을 더 넣어주면 됩니다. 아래 jsFiddle 를 보시면 버튼이 총 4개 입니다. 먼..

마크업 부터 시작하는 UI/트윈맥스(TweenMax)2017. 9. 19. 18:37

지난 장에서 트윈맥스 사용법을 간단하게 알아봤습니다.[어떤걸?] [몇초동안?] [뭘?어떻게?]이 세개만 기억하고 있다면 간단하게 활용할 수 있습니다.또, [뭘?어떻게?] 부분은 제이쿼리 animate 쓸때 처럼 옵션을 여러가지 붙힐 수 있습니다.아래 예제는 width, height, backgroundColor 값 3가지를 3초동안 변환시켜 줍니다. 또 선택자의 종류는 제이쿼리를 사용해도 되고 제이쿼리를 사용 안해도 됩니다.트윈맥스가 jQuery의 엔진을 의존하지 않기 때문에 유연하게 선택자를 써도 됩니다.123TweenLite.to('.box', 3, {width:100});TweenLite.to($(".box"), 3, {width:100});// 이 둘은 동일하게 사용이 가능합니다.cs .from(..

마크업 부터 시작하는 UI/트윈맥스(TweenMax)2017. 9. 18. 17:47

여기서 다루게 될 예제들은 거의 모든 부분을 jsFiddle 로 보여드릴까 합니다.하지만, 어떤 js파일을 가져와서 써야할지 고민되시는 분들께 스샷과 함께 압축파일을 올려놓겠습니다. 일단 바로 이전 포스팅 http://recoveryman.tistory.com/377 에서 보셨다면 압축파일을 다운로드하는 부분이 있을꺼예요.압축을 풀고 나오는 폴더 greensock-js 폴더 안에 src 라는 폴더가 있습니다. 그폴더로 접근해 주세요. src 폴더로 들어왔다면 위에 minified 는 압축된 트윈맥스 소스가 있고 uncompressed 는 압축되지 않은 소스가 있습니다.minified 로 들어갑니다. 다음과 같은 파일 목록이 있는데 여기서TweenMax.min.js 를 복사하셔서 사용하시면 됩니다. 또 저..

마크업 부터 시작하는 UI/트윈맥스(TweenMax)2017. 9. 18. 13:46

최근들어 트윈맥스에 관심이 많아져서 포스팅 합니다.jQuery 의 animate 와 무엇이 다른지, 어째서 이걸 사용하는지 아래 jsfiddle 를 봐주세요! 잘 보면 jQuery animate 의 움직임이 조금 부자연 스러운게 보입니다.현재 이 jsFiddle 는 jquery 1.9.1 버전을 사용하고 있습니다.상위 버전의 jQuery 를 사용하면 둘이 별로 다를게 없어 보일 수 있습니다. 그럼 배경색 변환을 시도해 보겠습니다.자연스럽게 배색을 변환 시켜 주기위해 애니메이션이 필요합니다. 트윈맥스를 사용하면 배경색을 바꿔줄 수 있지만jQuery animate 메소드는 배경색을 변경시켜주지 못합니다.이뿐만이 아니라.. 움직임에 효과를 줄 수 있는 easing 기능도 기본 탑재되어 있습니다.jQuery 로..