inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

인터랙티브 개발 실무 끝장내기 [역량 강화편]

forEach 문 활용 (delay, rotationZ)

안녕하세요~ 레퍼런스 사이트의 코드 문의드립니다.

해결된 질문

184

티라미수

작성한 질문수 7

0

안녕하세요~ 올려주신 레퍼런스 사이트 코드를 살펴보던 중에 이해가 가지 않는 부분이 있어서 여쭤봅니다.

function mainMotionFunc() {
    for (var t = 0; t < $(".card").length; t++) {
        var e = $(".card").eq(t);
        TweenMax.set(e, {
            rotation: randomReturn(-50, 50)
        })
    }
    for (t = 0; t < $(".card").length; t++) {
        e = $(".card").eq(t);a
        TweenMax.from(e, .5 * Math.random() + .5, {
            y: 650,
            yPercent: 100,
            x: randomReturn(-250, 250),
            rotation: randomReturn(-250, 250),
            delay: .7 * Math.random() + .3,
            ease: Power2.easeOut
        })
    }
}

두번째 for 문 선언 시 사용된 .5 * Math.random() + .5 <- 이 부분이 이해가 가지 않아서요. 트윈맥스 공식사이트에서 검색하면 .from(e, {...}) 형식으로만 나와있어서 코드 해석이 막혔네요 ㅎㅎ. 이게 어떤걸 의미하는 건지 궁금합니다 : )

인터랙티브-웹 javascript

답변 1

1

코딩일레븐

안녕하세요

.5 * Math.random() + .5

(0~0.5까지 랜덤 ) 더하기 0.5 입니다.

만약 앞의 랜덤의 수가 0이 나오더라도 뒤에서 0.5를 더해주니

최소 0.5~ 최대 1 까지 나올 수 있는거죠.

0.5를 기본으로 깔고 가는 수라고 생각하시면 됩니다.

.5 * Math.random() + .5 -> 0.6, 0.7, 0.5...

.5 * Math.random() -> 0.1, 0.2, 0.4...

+ 0.5 를 해준 위쪽은 최소 0.5~ 최대 1 까지 랜덤의 수

+ 0.5 를 안해준 아래쪽은 최소 0~ 최대 0.5 까지 랜덤의 수

f12 누르시고 콘솔에 작성해서 확인해보실 수도 있어요.

_

트윈맥스와 관계없이 for 문 안에서 랜덤이 필요할 때 많이 사용합니다.

0

티라미수

아 랜덤이였군요~ 어떤 속성인지 몰라서 감이 안왔는데, duration 의 축약형으로 기재되는 것 같네요. 감사합니다!

0

코딩일레븐

아아 네.

TweenMax.to(오브젝트 , duration, { 상태 변경, delay, ease 등등 } ) 이런식으로 됩니다.

TweenMax.from 도 같고요.

TweenMax.set 만 duration 이 없습니다. 

모바일 스와이프 구현 마지막 숙제

0

402

2

레퍼런스 사이트

0

339

1

스크롤위치에 따른 페이지 변화에서

0

267

1

배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요?

0

380

1

스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문

0

675

1

페이징.페이지고정2 질문드립니다.

0

459

1

scrollTo 완성본

0

603

2

모바일 3D 입체 카드 제작 아이폰에서 에러

0

386

1

css 질문 드립니다

0

623

1

css 질문

0

284

1

pointBtn.addEventListner("click")

0

305

2

if문의 첫번째 조건 질문 있습니다~

0

285

1

offsetTop, offsetHeight

0

785

2

기존의 축 회전값에 더해서 rotate

0

320

1

모바일 드래그 강의 질문드립니다!

0

256

1

질문입니다.

0

215

1

GSAP(트윈맥스) 라이센스 관련 질문 드립니다.

0

1657

1

wrap 안에 click 이벤트

0

225

1

greensock을 사용하려면

0

701

1

TweenMax 효과 리셋

0

524

1

max 이상으로 입력했을 때 질문입니다.

0

192

1

dom에서 직접i nput의 value 값을 갖고 나오는 것에 대해

0

370

1

화살표 회전 질문

0

261

1

질문이용~

0

217

1