본문

프로그래밍 코드(JS)를 짜려고 하는데 질문입니다.

글꼴

자바스크립트(JS. 자바 아님)로 프로그래밍을 하려고 하는데요,

제가 미술전공자이고 툴도 프로그래밍 툴이 아닌 전혀 다른 걸 써서 문외한이다보니 간단한 코드조차 못짜고 있네요 ㅠㅜ;;;

 

 

애프터이펙트 라고 하는 영상제작 관련 프로그램인데,

이게 JS를 활용하여 객체나 효과를 일일히 수동으로 지정하지 않고

시간의 흐름에 따라 자동으로 변화 또는 반복을 시킬 수가 있어서

만들어보고 있거든요 ㅎㅎ

(box라는 객체의 position 레이어에서 wiggle (100, 500)을 하면 box가 wiggle에 지정된 값으로 흔들리는 식)

 

 

 

간단하게 그림으로 먼저 설명을 드립니다.

 

 

 

 

 

이런 걸 만들고 싶습니다.


 

 

속도를 조절하는 슬라이더 = 슬라1

방향을 설정하는 드롭다운 메뉴 셀렉터 = 셀렉터

조종할 상자 = box

이렇게 지정되었다고 할 때

 

 

위 그림과 같은 조절을 하기 위한 간단한 코드가 어떻게 될까요?


SPEED = time*슬라1이라고 지정한다면

셀렉터 선택값에 맞춰서 셀렉터가 1 (LEFT) 이면 -SPEED, 셀렉터가 2 (RIGHT) 이면 SPEED 값을 "최종결과"라는 것으로 반환해야 합니다.

 

그래서 마지막줄에

[최종결과]

이렇게 끝나면 됩니다.

 

 

 

부탁드립니다.

 

 

 






댓글 13 | 쓰기
1


jquery 사용하면 아주 간단할 건데 써도되나요?

루리웹-2009277371 | 64.114.***.*** | 20.01.24 05:40
루리웹-2009277371

애프터이펙트가 제이쿼리를 안쓰는 거 같아요.. ㅠㅠ 감사합니다

여우할아버지 | 122.42.***.*** | 20.01.24 14:31

자바스크립트를 써본지가 워낙 오래 되어서 정확하게 코드까지 짜드리진 못하겠지만 나름 생각나는대로만 말로 짜 보자면요 1. slide1이 클릭오프할 때 (마우스 클릭이 떨어질 때) checkupdate. 실행. slide1.on__clickOut(checkUpdate();) //<- 이렇게... checkUpdate(){ if (슬라이드1.value 가 0이 아니면) { moveVar = 슬라이드1.value; if(셀렉터.value 가 1이면) moveVar = -moveVar; box.position.x = box.position.x + moveVar; SPEED = time * moveVar; 문자출력("최종결과 : [SPEED]"); checkUpdate를 time초 후 실행; //<- 시간차는 마음대로. } } 만약 슬라이드를 움직인 직후 외에 셀렉터를 왼쪽 오른쪽 클릭한 직후에도 움직이고 싶다면 똑같은 checkUpdate()를 셀렉터에도 붙여주세요. 셀렉터.on__clickOut(checkUpdate();) 이렇게요... 이런 구조로 짜면 될겁니다.

Pre-Dec | 112.185.***.*** | 20.01.24 05:50
Pre-Dec
댓글 이미지 입니다.
이미지를 보려면 여기를 눌러주세요.

웹페이지가 아니다보니 checkUpdate()라는 게 무엇인지 지정해달라고 뜨네요.. 그래서 이렇게 해봤는데 작동이 안되네용 ㅠㅠ 변형으로 아래처럼 해봐도 에러가 뜨고... sld = 슬라이더 a = if(셀렉터===1)(-sld) else if(셀렉터===2)(sld) [값, a] 일반적인 자바스크립트하고 좀 다른가봐요... ㅠㅠ leadingZeros 같은 것도 작동이 안되서 if(입력값<10)["0000"+입력값] else if(입력값<100)["000"+입력값] ... 이런식으로 만들었었거든요.. 여튼 감사합니다. 좀 더 연구해봐야겠어요.

여우할아버지 | 122.42.***.*** | 20.01.24 16:58
여우할아버지

아... 애프터이펙트는 함수를 프로그램 안에서 만들 수 없나보죠?? 뭔가 시원하게 도움 드리고 싶었는데, 그쪽은 저도 전혀 모르는 쪽이예요;;; 대부분 프로그래밍들이 거의 다 그렇지만 이 문제도 다른사람들의 예제를 찾아보시는게 제일 빠를것 같습니다. 거기서 내가 필요한 부분만 남기고 다 지운 다음 추가할거 있으면 추가해서 쓰고.... 대부분 프로그래머들이 그렇게 실력을 쌓아 갑니다. 화이팅하세요~

Pre-Dec | 112.185.***.*** | 20.01.24 22:30
Pre-Dec

감사합니다 ㅋㅋㅋ 역시 기존작을 리버스 엔지니어링하면서 이해하는 게 최고군요 ㅎㅎ 감사합니다!!

여우할아버지 | 223.38.***.*** | 20.01.25 00:23

스크립트로 직접 짜는거보다. 제이쿼리 쓰는게 쉽고 성능도 더 좋습니다.

루리웹-6942285846 | 222.107.***.*** | 20.01.24 13:05
루리웹-6942285846

예제요. https://www.everdevel.com/jQuery/animate/

루리웹-6942285846 | 222.107.***.*** | 20.01.24 13:06
루리웹-6942285846

제이쿼리 이름만 들어보고 어떤걸까 했었는데 님께서 보여주신 예제를 보니까 쉽게 이해가 되네요 다만 애프터이펙트가 제이쿼리를 안쓰는 거 같아요.. ㅠㅠ 코딩하는 방식이 CSS나 HTML상에서 구현하는 게 아니라 저 JS 엔진 자체만으로 구현해야 하는 거 같아요.. 감사합니다

여우할아버지 | 122.42.***.*** | 20.01.24 14:35

제이쿼리 추천

수험의제왕 | 121.148.***.*** | 20.01.24 13:54
수험의제왕

애프터이펙트가 제이쿼리를 안쓰는 거 같아요.. ㅠㅠ 감사합니다

여우할아버지 | 122.42.***.*** | 20.01.24 14:35

ㅋㅋㅋ 미치겠다 프로그래밍 기초도 없는 사람한테 다짜고짜 제이쿼리를 추천해주는건 무슨 경우인거야 ㅋㅋㅋ 아무리 좋은 라이브러리라고 해도 기초가 있어야 쓰는거지... 본문에 이미 떡하니 프로그래밍 전공자도 아니고 전용 툴도 아닌걸 쓴다고 적혀 있구만.. 대단하신분들 많네 ㅎㅎ

다산=파산교주 | 117.16.***.*** | 20.01.24 17:21

제이쿼리가 애들 다 망쳐놨네 ㅋㅋㅋㅋㅋ 보면 문제의 근본을 읽어보고 조언할 생각안하고 제이쿼리무새 소리하고있음 ㅋㅋㅋㅋㅋㅋ 이래서 바닐라 JS가 각광받지 ㅋㅋ

케르발 | 121.140.***.*** | 20.01.24 23:18


1
댓글은 로그인 후 이용 가능합니다.
목록보기


위로가기
루리웹-3895933130 | 추천 0 | 조회 265 | 날짜 17:52
철민총각 | 추천 0 | 조회 596 | 날짜 14:02
🙊팥보이 | 추천 0 | 조회 536 | 날짜 13:12
{린튼} | 추천 0 | 조회 168 | 날짜 12:58
JimmyEatWorld | 추천 0 | 조회 386 | 날짜 11:45
M°C | 추천 0 | 조회 195 | 날짜 09:57
루리웹-4905803756 | 추천 0 | 조회 872 | 날짜 05:03
천군이라고하오 | 추천 0 | 조회 290 | 날짜 04:48
sogeum | 추천 0 | 조회 193 | 날짜 00:05
루리웹-1732090994 | 추천 0 | 조회 895 | 날짜 2020.02.18
루리웹-0962599980 | 추천 2 | 조회 248 | 날짜 2020.02.18
MattDi | 추천 0 | 조회 337 | 날짜 2020.02.18
나베리우스 | 추천 0 | 조회 293 | 날짜 2020.02.18
RAZR, | 추천 0 | 조회 515 | 날짜 2020.02.18
cristallake | 추천 0 | 조회 359 | 날짜 2020.02.18
유스테니아 | 추천 0 | 조회 501 | 날짜 2020.02.18
Freshmen | 추천 0 | 조회 169 | 날짜 2020.02.18
다정한사람 | 추천 0 | 조회 462 | 날짜 2020.02.18
케리건 남친 | 추천 0 | 조회 323 | 날짜 2020.02.18
Rezen94 | 추천 0 | 조회 706 | 날짜 2020.02.18
쵸고 | 추천 0 | 조회 482 | 날짜 2020.02.18
이사를가즈아이아이야야야 | 추천 0 | 조회 535 | 날짜 2020.02.18
루리웹-6036417446 | 추천 0 | 조회 395 | 날짜 2020.02.18
디파이 | 추천 0 | 조회 219 | 날짜 2020.02.18
루리웹-2665666548 | 추천 0 | 조회 221 | 날짜 2020.02.18
금발의제니 | 추천 0 | 조회 162 | 날짜 2020.02.18
제약과 서약 | 추천 0 | 조회 244 | 날짜 2020.02.18
피부를위해 | 추천 0 | 조회 598 | 날짜 2020.02.18

1 2 3 4 5




글쓰기
힛갤
오른쪽 BEST