신씨드

[박스만들기]

01. 정사각형 솔리드레이어 만들기

02. 솔리드 레이어 복제 후 옆면으로 만들어주기 위해 로테이션 90도시켜주기

03. 솔리드 레이어 가운데의 위치 x축 값에서 빼기 반지름 해주기

04. 위치 잡히면 레이어 복제후 x축 값에서 더하기 지름 해주기

05. 가운데 정사각형의 솔리드 레이어에서 다시 시작하여 옆면처럼 위아래 만들기

06. 위,아래,양 옆면이 만들어지면 정면의 레이어에서 z축값으로 +-값으로 앞뒷면 만들기

07.각 뷰에서 모양확인가능(custom view혹은 각 사이드 뷰를 통해 확인)

​

[Null Object]

• 상단메뉴 layer - new - null object
• 눈에 보이지 않는 레이어로 레이어가 가진 설정은 모두 가지고 있지만, 영상으로는 출력이 되지 않는다.
• 보통 페어런츠와 익스프레션의 제어용으로 사용!

[주사위 전개도 만들기]

1.전개도 만들기 6개 면 만들고(지름 더하고 빼서) + 중심점 접히는 곳으로 옮기기

2.페어런츠 하기 중앙면 중심으로 바로 옆면들은 중앙면으로 연결 마지막 꼬리 면만 바로 옆에 면으로 페어런츠 해주기!!

3.중심에 있는 면 포지션이랑 Null 만든거 포지션 동일하게 해주고! Y값 반지름 만큼 올라오게 수치 주고

4.하나씩 3D 애니메이션 넣어주면 됨!

[카메라 확인]

• 상단메뉴: layer - new - camera
• one node camera: 중심이 하나인 카메라 주체가 카메라 자신이 되어 마치 사람 고개를 돌리듯이 보게 만들어 준다.
• two node camera: 중심이 두개인 카메라
• 주시점(Point of Interest)이 존재하여 원하는 타겟을 정하고 주시점을 중심으로 보게 만들어준다.
• 편의에 따라 다르겠지만, 가장 기본적인 형태의 카메라로 two node 카메라 사용

​

• 카메라를 생성하면 null을 생성하고 3d 오브젝트로 변환 한 후
• 카메라를 null에 페어런츠로 연결해서 사용
• 기본적인 애니메이션은 null로 해결
• (기본적으로 카메라 사용X, 복합적인 모션을 쓸때만 사용한다.)

​

[조명확인]

위 Layer - New - Light

• point: 일반 조명으로 구 형태로 퍼지는 조명을 말함
• intensity: 빛의세기
• falloff: 빛이 퍼지는 거리, 빛이 퍼지는거리와 그 이후 빛의 감쇠를 결정하는 거리로 존재
• cast shadows: 그림자 생성 옵션
• shadow darkness: 그림자의 진함
• shadow diffusion: 그림자의 거리에 따른 퍼짐 정도
• cast shadow: 오브젝트의 그림자 생성 끄기/켜기
• light transmission:그림자의 투명도 옵션
• accepts shadows: 그림자가 생성된 오브젝트의 그림자 받기 옵션

(only를 선택시 다른 오브젝트와 합성을 위해 흰색으로 변화-합성옵션)

• accepts lights: 빛의 영향을 받아 어두워지는 옵션 끄기켜기(그림자 생성은 이루어짐)

​

[Themeforest]

• 웹사이트 디자인참고:https://themeforest.net/

[getbootstrap.com]

[motionscript.com]

• https://motionscript.com/articles/bounce-and-overshoot.html
• alt + 초시계 클릭 : 익스프레션(모션스크립트 영역) 열기 (익스프레션 끄기/켜기)

freq = 3; decay = 5; t = time - inPoint; startVal = [0,0]; endVal = [200,200]; dur = 0.1; if (t < dur){ linear(t,0,dur,startVal,endVal); }else{ amp = (endVal - startVal)/dur; w = freq*Math.PI*2; endVal + amp*(Math.sin((t-dur)*w)/Math.exp(decay*(t-dur))/w); }

• 숫자패드 쪽 엔터가 마무리

1번 누르면 잠깐 애니메이션 끄고 수동으로 조절가능 2번은 애니메이션 그래프 확인가능

[keyframe overshoot]

Rotation이나 Position에 추가해주고, 키프레임 입력까지 완료하면 키프레임 애니메이션에 자동으로 코딩 에니메이션 추가됨!!

(각각 키프레임 넣은 애니메이션에만 반응이 일어남!!)

[Wiggle(a,b)]:랜덤값을 부여해주는익스프레션

• wiggle (a,b) : a - 속도값 / b- +-의 진동폭의 값

​

[텍스트 애니메이션]

1.텍스트입력 2.Animation버튼 누르고 position추가 3.Add에서 selector에서 Expression선택!!

4.포지션이나 로테이션 등 기준점 잡아주고! 5.Amount내 코딩 입력창에 코딩복붙

freq = 3; decay = 5; maxDelay = 1.0; seedRandom(textIndex,true); myDelay = random(maxDelay); t = time - (inPoint + myDelay); startVal = [100,100]; endVal = [0,0]; dur = 0.1; if (t < dur){ linear(t,0,dur,startVal,endVal); }else{ amp = (endVal - startVal)/dur; w = freq*Math.PI*2; endVal + amp*(Math.sin((t-dur)*w)/Math.exp(decay*(t-dur))/w); }

​

[페어런츠 기능 추가한 애니메이션]

기능 연결시킬때 레이어로가 아니라! 속성으로 연결해야함!!

• 레이어 선택후 마우스 우클릭 디테일하게 Sperate Dimension변경가능(다른속성끼리 연결가능! 1번레이어 Y축과 2번레이어 X축 연결가능!)

[시계 애니메이션]

• 원형 shape layer로 그려주고 position 0,0으로 맞추기
• 네모로 도형 그리고 postion x축만 0으로 설정, 12시 위치 맞추기(시침)
• layer 복제하고 postion x축만 0으로 설정, 마우스 우클릭 펜툴 path처럼 변경(convert~)(분침)
• 시침 Rotation 속성 분침 Rotation속성에 연결 --> 코딩 / 12

​

• wiggle (a,b):랜덤값을 부여해주는 익스프레션
  • a-속도값 / b- +-의 진동폭의 값

[바람부는선풍기]

1.선풍기 연출

• Twist 효과 추가 (효과가 적용되길 원하는 선풍기 머리 부분에 넣어줘서 선풍기 머리만 twist 효과 추가)
• 애니메이션으로 선풍기 twist 효과 적용

​

• 선풍기가 돌아가는 효과는 Rotation 애니메이션 적용 시간 대별로 0, 5, 20 이런식으로

2.Bubble

• 한개를 repeat효과 add 해서 가로로 10개 생기도록 만들기
• 위에 만든 repeat 그룹 자체를 repeat 효과 add
• wiggle transform 효과 add (위 repaet그룹 1,2 모두 적용해주기위해 wiggle transform효과가 가장 아래로 위치하도록 배치!!!!)

3.Bubble 흩날리는 효과

• 버블 한개한개 자체의 x,y 포지션 효과 적용
• 버블 전체 x,y 포지션 효과 적용!!

• ID는 특정한위치로 갈 수 있도록 지정
• 모바일 그리드계산법: 460(내용물너비_px)/500(전체너비_px)*100=92%

​

[HTML]

[CSS]

[결과_모바일]

[결과_태블릿]

[결과_PC]

​

[쉐이프레이어 확인]

• shape layer 안의 contents 안에 도형레이어들이 쌓여지는 시스템
• contents 옆의 add 부분을 통해서 도형을 이루는 구조를 만든다
• path부분으로 기본적인 도형의 형태 만들기/기본 값은 화면 중앙 <옵션의 path는 다른 구조>
• stroke 부분으로 path부분에 아웃라인을 만들어주기
• fill부분으로 path부분 안쪽에 칼라 채우기

​

• 각 부분을 만든 후 contents 안의 그룹 기능을 이용하여 하나로 묶어주는것이 가능 원하는 속성을 드래그 하여 넣어주면 ok

• path: 기본적인 선의 형태를 만들어준다. 영상출력으로 되지 않으면 일종의 설계도 기능 <기본값은 화면 중앙>
• stroke: 순차적으로 위에 있는 속성에 아웃라인을 만들어 주는 기능 점선과 선의 두께 색등을 조절 가능
• fill: 안쪽에 채워지는 색상을 변경 가능 <그라디언트 옵션을 하게 되면 이름만 다르고 그라데이션 색상조절가능>
• 옵션의 path: 팬툴을 사용하였을 경우의 옵션을 말하며 마스크와 같이 점의 위치가 바뀌는 애니메이션이 가능. 점의 추가와 점의 제거 핸들러 옵션도 똑같이 적용가능
• 기본값이 화면의 중앙이 아니라 자신이 그려지는 위치가 중앙으로 인식
• stroke옵션의 line cap의 경우 선이 도형이 되지 않았을때 끝나는 부분의 모양을 변경 가능
• alt키를 눌러서 도형 그리기의 경우 path로 인식하여 점 추가 가능
• 쉐이프레이어의 path옵션에서 마우스 우클릭으로 convert to bezier path 바꾸기 (*추천)
  • bezier path로바꾸는 순간 펜툴로 자유롭게 path 변경이 가능하나, 기존 기능을 쓸수 없기 때문에 기존 기능 다 활용후 'convert to bezier path로 바꾸는걸 추천!
• 상단메뉴에서 bezier path 활성화후 그려주기

[디자인 옵션]

• 컨텐츠 옆의 add 버튼을 눌러 추가 <적용시키기 전에 컨텐츠를 한번 꼭 클릭!>
• merge path: 마스크 옵션과 마찬가지로 영역의 옵션 <차집합/합집합/교집합/여집합>

• offset path: 영역의 확장값 <축소와 확대가 가능하며 라인 조인의 옵션이 포함> 확장의 개념에 복제의 개념이 추가 되어 패턴 디자인 가능

• Pucker&Bloat: 모서리 부분이 안쪽이나 바깥쪽으로 이동하여 선을 베이지어(곡선)에 대한 옵션으로 바뀜

• round corner: 각진 부분을 유선형으로 만들어 주는 옵션 (짱구 얼굴형 그리기 편하고, 펜툴 다루기 힘들때 활용하면 좋음!)

• Twist: 도형을 원형으로 꼬아주는 형태

• zigzag: 스트로크 부분을 산의 형태로 만들어 주는 옵션(유선형으로 변경 가능)

효과중 round 효과를 add하고 zigzag효과 위로 올리면 좀 더 부드러운 표현 가능(효과 적용할때도 효과의 위치 중요!!)

[애니메이션 옵션]

• trim path: 선이 그려지는 애니메이션 <보통 안쪽의 fill 칼라 없이 사용>
• wiggle path: 선이 흔들리는 옵션 <기본값만 되어 있어도 선이 움직이는 애니메이션 적용>

• wiggle transform: 위치의 값에 랜덤값을 적용해주는 옵션
• wiggle 이라는 옵션의 경우 wiggle / second 의 값이 존재
  • 이 값은 초당 키프레임의 갯수로 전체적인 애니메이션의 속도라고 보면 됨
  • 두번째로 기준값이 존재 하게 되는데 기준값의 경우 +-값으로 랜덤한 값이 적용이 됨(예:50 입력시 기본값이 300일때 250~350)

​

• Repeater

1)사각형그리고 position애니메이션 적용(12시방향으로 위로)

2)꼭 레이어랑, contents 선택되어 있는상태에서 add, repeater 선택!

3)copies 갯수 5개 입력, 각도 360/5, position 0,0으로 설정

• 리피터사용법
  • 쉐이프레이어 자체 애니메이션을 만든다(쉐이프레이어의 도형레이어 자체로 만들기/투명한 쉐이프레이어 트랜스폼X)
  • 리피터 적용(도형을 선택하면X, contents선택!)
  • 리피터의 복사할 갯수를 정해주고 리피터 안의 트랜스폼 설정을 통해 배치(카피갯수/ 포지션:0,0/ Rotation각도)
  • 기본값으로 포지션 100의 값이 정해져 있으니 주의!!
• 리피터 적용(도형을 선택하면X)
  • 리피터의 복사할 갯수를 정해주고 리피터 안의 트랜스폼 설정을 통해 배치
  • 기본값으로 포지션 100 값이 정해져 있으니 주의!!
  • 선이 그려지는 애니메이션의 경우 trim path를 통해 만들어 준다.

​

​

​

[텍스트 레이어]

• Source Text 기능: 스톱모션 (네모로 표시 <-> 다이아몬드 표시: 애니메이션 가능해) - 텍스트의 속성이 변함에 따라 키프레임이 추가되며 이미지 형식으로 바로 바뀌는 옵션
• Path:텍스트에 마스크 씌우는 기능 가능 - 텍스트 레이어에 마스크를 추가하여 마스크 라인에 맞춰 배치 되는 기능
• Reverse path: 글씨가 기본적으로 마스크 라인의 위쪽에 배치되어 있는곳에서 뒤집어져 밑으로 배치
• Perpendicular to path: 글씨의 기울기가 마스크 라인에 맞춰 기울어질건지 혹은 원형그대로 배치 될건지 결정
• Force alignment: 글씨 전체의 길이가 마스크 라인 전체에 맞춰 자간이 띄어져 배치가 될건지 결정
• First margin: 제품, 사람따라 텍스트가 움직이는 애니메이션 가능 / first margin/last margin: paragraph (글씨 정렬기능)의 영향을 받아 마스크 라인의 앞/뒤/중앙에 맞춰 위치를 옮기고 싶을때 사용

[텍스트_애니메이션_opacity]

• Text 옆 Animate 버튼 누르고 Opacity 선택후 0%로 바꿈
  • 피아노 건반을 손바닥 전체로 누루고 있다고 보면됨(Range Selector)
    • Offset으로만 설정변화가능!!! 왼쪽이 - 오른쪽이 +라고 생각!!! 플러스 수치로 바꾸면 Range가 오른쪽으로 마치 건반 누르는 손바닥이 오른쪽으로 가면 흰색 건반이 올라온다(텍스트가 나타남)고 보면됨

​

• 애니메이터 - 텍스트 레이어에 원하는 속성을 추가 해주는 개념 <힘의 종류와 크기>
• start와 end 값은 속성이 미치는 영역 <글씨 전체를 기준/힘의 영역>
• offset - 속성영역 값이 미치는 범위를 조절(힘의 종류와 크기 + 힘이 미치는 영역)
  • -100~0~100 / -100 왼쪽으로 이동 +100 오른쪽으로 이동 <힘이 미치는 영역의 이동>

​

[텍스트_애니메이션_position]

[텍스트_애니메이션_position:점프 + 스케일 추가]

**기준이 되는 scale에는 '키프레임 추가하면 안됨!!**

[텍스트_애니메이션_position:점프 + 스케일 추가: 점프하고 도착했을때 찌그러지는 애니메이션]

• 1)점프 애니메이션 만들고
  • 점프하고자 하는 텍스트 위치를 먼저 설정
  • End 수치로 첫번째 글자만 점프하도록 설정
  • Offset 키프레임 추가해서 첫번째글자도 내린 상태로 시작해서 마지막 글자까지 다 점프되도록 설정!!
• 2)scale로 찌그러지는 애니메이션 만든후 위에 점프 애니메이션 첫번째 글자가 땅에 닿는 타이밍에 맞춰서 두번째 scale keyframe 조정!!
  • scale 링크 풀고 Y값 줄여서 찌그러지는 애니메이션 만들기
  • End 수치로 첫번째 글자만 찌그러진 기준점 설정
  • Offset 키프레임 추가해서 찌그러지고 커지는 애니메이션 만든후 위에 Position 애니메이션 타이밍과 맞춰서 설정!!

​

• 속도 빠르게 하고 싶을때 Position이랑 Scale 키프레임뒤에 앞으로 땡기고 Scale 키프레임 앞에꺼 위에 Position 애니메이션에 맞춰서 설정!!

​

[텍스트_애니메이션_Rotation]

• Rotation 1바퀴 설정 -> offset으로 키프레임 주고 -> 한글자 씩 적용 또는 Rotation 중심점 바꾸고 싶을때 More Options에서 'Anchor Point Grouping 또는 Grouping Alignment로 설정가능!!

​

[텍스트 애니메이션_Advanced 옵션]

Based on으로 한글자 적용할지 전체 적용할지 | Shape로 위로 올라가는 모양할지 내려가는 모양할지 | Randomize Order 'On'하면 랜덤하게 배치됨

[텍스트 애니메이션_자연스럽게 랜덤으로 생기는 텍스트, Advanced 옵션]

• 1)텍스트 애니메이션에 scale, opacity, blur 추가 후 scale 키우고 opacity 0, blur 30정도 적용
• 2)Offset설정을 -100~ 100으로해서 (200퍼센트 활용할 수 있도록 설정)
• 3)Ramp Up 기능 설정해서 자연스럽게 순차적으로 생겨나도록 설정
• 4)Randomize Order 'On'해서 랜덤으로 글자들 생겨나도록

​

[animate - enable per character 3d]

• 레이어 자체와 애니메이트 안의 옵션에 3D 옵션 부여. 애니메이트 생성은 되지 않으며 옵션 체크용!

Position 애니메이션 추가, Add로 Property --> enable 3D --> Z값으로 화면 밖에 텍스트 되도록 설정 --> Offset으로 글자 하나씩 나타나게 애니메이션 주기!!

[Piano 텍스트_Easy High 기능]

Position 애니메이션 진행 --> Advanced옵션에서 --> Easy High 옵션추가 (100% 부드럽게 점프 -100% 속도감 짧게 점프)

[3D 회전 텍스트 만들기]

• 01.텍스트 레이어에 원형(타원형X) 마스크 추가
• 02.텍스트 레이어의 path 옵션으로 글씨들을 마스크 라인에 배치(Path option --> Mask1설정)
• 03.텍스트 레이어에 enable character 3d 옵션 켜기 (Animator 1 옆 Add 버튼 눌러서)
• 04.텍스트 레이어의 자체 X축 로테이션으로 전체적으로 회전으로 일자로 만들기 (밑에 Transform부분에서)
• 05.텍스트 레이어의 animator - rotation으로 <x축값> 글씨들 세워주기
• 06.텍스트 레이어 path option - margin 기능을 이용하여 글씨 회전 시키기

​

+

• Effects - perspective - cc sphere: 이미지를 구의 형태로 만들어주는 효과

지구본 사진도 꼭 아래 3D 표시 체크해주기!!!

[반응형웹]

• 모바일 first
• 모바일
  • 320px ~ 768px
• 태블릿
  • 768px ~ 1024px
• PC버전
  • 1024px ~~

​

• 단위변환 사이트: http://pxtoem.com/

​

[HTML]

[결과]

1024(가로)

1440(가로)

[반응형웹으로 단위변환]

ex) 

#wrap 960px 100%

header 960px 100%

.content 600px 62.5% -> 600/960*100

padding 15px 1.5625% -> 15/960*100

.right-side 300px 31.25% -> 300/960*100

footer 960px 100%

- 글자크기(em) = 글자크기(px)/16px(부모 요소 기준 단위)

32px/16px(부모) = 2em

30px/12px(루트-html) = 2.5rem

- vw, vh : 브라우저 기준(100%) 

ex) 5vw -> 5%

3.5vw -> 3.5%

calc(16px + 0.7vw);

​

• em단위는 상위 부모태그에 영향을 받음 (부모 태그의 글자 크기가 기준)
• rem은 HTML 태그가 기준!

​

[미디어 쿼리]

브라우저 사이즈에 따라 레이아웃을 작성하거나, 다른 미디어 종류에 따라 따른 CSS 코드를 작성하는 등 반응형 웹페이지를 작성할 때 유용한 구문

​

• caniuse.com
• 모바일(min-width) 퍼스트와 PC 퍼스트(max-width)는 순서가 다르고 입력 조건이 다름 

​

[반응형웹]

[결과]

모바일버전

테블릿 버전

PC버전

• 소스를 입력할땐 PC버전을 보고 입력