[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 포지션 효과 적용!!
'1%' 카테고리의 다른 글
| [코딩]Day27_웹폰트,비디오,javascript (0) | 2023.03.13 |
|---|---|
| [애프터이펙트]Day12_*애니메이션 박스만들기 (0) | 2023.03.13 |
| [코딩]Day26_반응형웹 적용(Coffee실습) (0) | 2023.03.09 |
| [애프터이펙트]Day10_*쉐이프레이어확인(애니메이션) (0) | 2023.03.09 |
| [애프터이펙트]Day09_텍스트 레이어 확인 (0) | 2023.03.08 |
