WEB Animation 1탄입니다. CSS Animation과 JS Animation 중 JS Animation을 다루었습니다. setTimeout과 setInterval, requestAnimationFrame에 대해 공부했습니다.

1. WEB

2. Animation

3. 1탄
[WEB

4. UI

5. Study]
NHN NEXT 우재우

6. 반갑습니다~ 오랜만이에요 :)
기말고사 + 메르스 방학 덕분에
우리는 Javascript를 다 까먹었죠 ㅋ

7. 지금까지 우리는 Javascript를 공부하면서
DOM을 선택하고 조작하고
이벤트를 발생시키는 법을 배웠어요!

8. 오늘은 WEB Animation을 배워봅시다!

9. 사실 저는 Animation 전문가라능!!!

10. WEB에서 Animation을 구현하는 방법은
크게 두 가지 방법이 있습니다
하나는 CSS Animation,
다른 하나는 JS Animation

11. 그리고 JS Animation에는
또 두 가지 방법이 있어요
하나는 setTimeout, setInterval이 있고,
requestAnimationFrame이 있습니다.

12. 오늘은 JS Animation만 공부할게요~
자, 하나씩 살펴봅시다!

13. 참고로 오늘 만드는 모든 실습은
파란색 박스가 오른쪽으로 계속 가는
애니메이션 만들기입니다~
아래와

14. 같은

15. HTML

16. 코드를

17. 준비해주세요.

18.
body

20. div

21. id=box

22. style=position:

23. relative;

24. top:

25. 50px;

26. left:

27. 10px;

28.
width:

29. 50px;

30. height:

31. 50px;

32. background-color:

33. blue;/div

35. script

36. src=test.js/script

37.
/body

38. 참고로 Javascript에서
element.style.(속성)을 쓰려면
external css 파일이 아니라
inline으로 style에 추가되어 있어야 해요!
아래와

39. 같은

40. HTML

41. 코드를

42. 준비해주세요.

43.
body

45. div

46. id=box

47. style=position:

48. relative;

49. top:

50. 50px;

51. left:

52. 10px;

53.
width:

54. 50px;

55. height:

56. 50px;

57. background-color:

58. blue;/div

60. script

61. src=test.js/script

62.
/body

63. JS Animation
setTimeout setInterval

64. setTimeout(callback, milliseconds)
지정한

65. 시간

66. 이후에

67. callback함수를

68. 실행해줍니다.

69.
크롬

70. 개발자도구

71. 콘솔에

72. 아래와

73. 같이

74. 입력해봅시다.
setTimeout(function(){

75. alert(Hello);

76. },

77. 3000);

78. setInterval(callback, milliseconds)
setInterval은

79. setTimeout이

80. 계속

81. 반복된다고

82. 보시면

83. 됩니다.

84. 그래서

85. 일
정시간마다

86. callback에

87. 등록한

88. 함수를

89. 계속

90. 실행해주죠!

91.
크롬

92. 개발자도구

93. 콘솔에

94. 아래와

95. 같이

96. 입력해봅시다.
setInterval(function(){

97. alert(Hello);

98. },

99. 3000);

100. clearTimeout(timeoutID),
clearInterval(intervalID)
setTimeout과

101. setInterval을

102. 멈출

103. 때는

104. clearTimeout과

105. clearInterval을

106.
사용합니다.

107. setTimeout과

108. setInterval의

109. 리턴

110. 값은

111. 각각

112. timeout의

113. ID와

114.
interval의

115. ID를

116. 나타냅니다.

117. clear의

118. 인자로

119. 넣어주면

120. 멈춥니다!!
var

121. si

122. =

123. setInterval(function(){

124. alert(World);

125. },

126. 3000);

127.
clearInterval(si);

128. setTimeout으로 Animation 만들기
setTimeout은

129. 딱

130. 한

131. 번만

132. 실행되기

133. 때문에

134. 계속해서

135. 실행하려면

136.
재귀함수로

137. 만들어줍니다.
예시)

138.
function

139. goRight()

140. {

141.
box.style.left

142. =

143. parseInt(box.style.left)

144. +

145. 5

146. +

147. 'px';

148.
setTimeout(goRight,

149. 20);

150.
}

151.
setTimeout(goRight,

152. 20);

153. setInterval로 Animation 만들기
setInterval은

154. 계속

155. 호출되기

156. 때문에

157. 굳이

158. 재귀로

159. 만들

160. 필요는

161. 없어요~
예시)

162.
function

163. goRight()

164. {

165.
box.style.left

166. =

167. parseInt(box.style.left)

168. +

169. 5

170. +

171. ‘px';

172.
}

173.
setInterval(goRight,

174. 20);

175. set 시리즈의 단점
브라우저에서

176. Javascript는

177. 싱글

178. 뜨레드라고

179. 누누히

180. 얘기했습니다.

181.
그래서

182. 다른

183. Javascript

184. 로직처리가

185. 길어지다

186. 보면

187. setTimeout과

188. setInterval
에서

189. 지정해준

190. 시간이

191. 정확하게

192. 작동하지

193. 않을

194. 수도

195. 있습니다.

196.
마치

197. 밥

198. 먹고

199. 있는데

200. 계속

201. 누가

202. 말을

203. 시키면

204. 밥을

205. 제대로

206. 먹지

207. 못

208. 하는

209. 것과

210.
같은

211. 이치죠.

212. 읭?

213. ㅋㅋㅋㅋ

214.
그뿐만이

215. 아닙니다!

216. 디스플레이가

217. 갱신되는

218. 주기와

219. 맞지

220. 않을

221. 경우

222. 불필요한

223.
렌더링

224. 또는

225. 오작동

226. 애니메이션이

227. 발생하기도

228. 하는데요,

229. 보통

230. 주파수가

231. 60Hz
인

232. 대부분의

233. 디스플레이

234. 갱신

235. 주기는

236. 16.67밀리초입니다.

237. 만약

238. setInterval을

239.
16.67보다

240. 작게

241. 주면

242. 한

243. 갱신

244. 주기

245. 안에

246. 두

247. 번의

248. 애니메이션이

249. 발생하겠죠?

250. 정리하면...
set시리즈는 비효율적이다.
- 애니메이션이 과도하게 그려진다.
- CPU가 낭비된다. - 추가 전력을 사용한다.
- 에너지가 부족해진다.
- 에너지를 더 생산해내기 위해 자원을 소모한다.
- 자원을 더 채취하기 위해 환경을 파괴한다.
- 지구멸망

251. 결론적으로 말씀드리면
JS Animation에서
setTimeout setInterval은
지구를 위해서 사용하지 않는 것이 좋습니다!

252. 그래서 내가 나왔다!!!
requestAnimationFrame!!!

253. requestAnimationFrame(callback)
requestAnimationFrame이

254. 앞서

255. 살펴본

256. set

257. 시리즈와

258. 다른

259. 점은

260. 바로

261. 개발자가

262.
시간을

263. 지정하지

264. 않는다는

265. 점입니다!!

266. 대신

267. 바로

268. 다음

269. 렌더링

270. 프레임

271. 타이밍
에

272. 맞춰

273. callback함수를

274. 실행할

275. 뿐이죠.

276. 그래서

277. 주기가

278. 일정한

279. 렌더링

280. 타이밍
에

281. 함수를

282. 실행하기

283. 때문에

284. 불필요하거나

285. 잘못된

286. 애니메이션을

287. 발생시킬

288. 걱정
이

289. 없습니다.

290.
requestAnimationFrame

291. 역시

292. 단일

293. callback만을

294. 인자로

295. 가지기

296. 때문에

297. set

298. 시
리즈로

299. 작성한

300. 애니메이션도

301. 쉽게

302. requestAnimationFrame으로

303. 바꿀

304. 수

305. 있어요!
requestAnimationFrame(

306. function()

307. {alert(‘Hello!')}

308. );

309. 모르겠으면 JS Animation은
닥치고 requestAnimationFrame!

310. requestAnimationFrame으로 Animation 만들기
requestAnimationFrame으로

311. Animation을

312. 만들

313. 때는

314. setTimeout과

315. 같은

316. 방식
으로

317. 만들면

318. 됩니다.

319. 단지

320. 시간만

321. 지정해

322. 주지

323. 않았을

324. 뿐이죠.
function

325. goRightWithRAF

326. (timestamp)

327. {

329. box.style.left

330. =

331. parseInt(box.style.left)

332. +

333. 5

334. +

335. 'px';

337. requestAnimationFrame(goRightWithRAF);

338.
}

339.
requestAnimationFrame(goRightWithRAF);

340. timestamp?!?!

341. requestAnimationFrame

342. 예제를

343. 찾다보면

344. 현재

345. 시간을

346. 저장하기

347. 위해서

348. 경우
에

349. 따라

350. Date.now()로

351. 현재

352. 시간을

353. 받아오는데,

354. 그럴

355. 필요가

356. 전혀

357. 없죠!

359. requestAnimationFrame은

360. 기본적으로

361. callback함수의

362. 인자로

363. timestamp가

364. 존
재합니다.

365. timestamp는

366. 해당

367. callback함수가

368. 호출된

369. 시점의

370. 시간을

371. 말합니다.

373.
시간을

374. 알

375. 수

376. 있으니

377. 시간에

378. 따른

379. 변화를

380. 코딩할

381. 수

382. 있게

383. 되었어요.

384. 물리학

385.
시간에

386. 배운

387. 운동

388. 방정식을

389. 구현할

390. 수

391. 있다는!!!

393. 다음

394. 장은

395. 3초

396. 동안

397. 상자를

398. 800px까지

399. 옮기고

400. 멈추는

401. 코드입니다.

402. 차근차근

403.
읽으면서

404. timestamp를

405. 이용해서

406. 어떻게

407. 시간에

408. 따른

409. 변화를

410. 반영하는지

411. 살펴
봅시다.

412. var

413. startTime;

414.
var

415. startLeft

416. =

417. parseInt(box.style.left);

418.
var

419. unitDist

420. =

421. (800

422. -

423. startLeft)

424. /

425. 3000;

426.
function

427. tick(timestamp)

428. {

430. if

431. (!startTime)

432. startTime

433. =

434. timestamp;

436. var

437. deltaTime

438. =

439. timestamp

440. -

441. startTime;

443. box.style.left

444. =

445. Math.floor(Math.min(startLeft

453. +

454. unitDist

455. *

456. deltaTime,

457. 800))

458. +

459. ‘px’;

465. if

466. (parseInt(box.style.left)

468. 800)

469. {

472. requestAnimationFrame(tick);

474. }

475.
}

476.
requestAnimationFrame(tick);

477. //

478. 초기값들을

479. 저장해줍니다.

480.
var

481. startTime;

482.
var

483. startLeft

484. =

485. parseInt(box.style.left);

486.
//

487. 이동할

488. 거리를

489. 3000ms(3초)로

490. 나누면

491. 1ms

492. 동안

493. 이동하는

494. 거리가

495. 나오겠죠?

496.
var

497. unitDist

498. =

499. (800

500. -

501. startLeft)

502. /

503. 3000;

504.
//

505. 프레임마다

506. 호출될

507. tick함수입니다.

508. timestamp를

509. 기본

510. 인자로

511. 가지고

512. 있어요!!!

513.
function

514. tick(timestamp)

515. {

517. if

518. (!startTime)

519. startTime

520. =

521. timestamp;

523. var

524. deltaTime

525. =

526. timestamp

527. -

528. startTime;

530. //

531. 물리시간에

532. 배운

533. (거리)

534. =

535. (시간)

536. *

537. (속력)에

538. 의해

540. //

541. unitDist

542. *

543. deltaTime은

544. 애니메이션

545. 시작부터

546. 변화된

547. 거리가

548. 되겠죠?

551. box.style.left

552. =

553. Math.floor(Math.min(startLeft

561. +

562. unitDist

563. *

564. deltaTime,

565. 800))

566. +

567. ‘px’;

569. //

570. left가

571. 800보다

572. 작으면

573. 계속

574. tick이

575. 호출될거예요.

581. if

582. (parseInt(box.style.left)

584. 800)

585. {

588. requestAnimationFrame(tick);

590. }

591.
}

592.
//

593. 애니메이션을

594. 시작하는

595. 코드입니다!

596. 이거

597. 없으면

598. 실행

599. 안

600. 되겠죠?

601.
requestAnimationFrame(tick);

602. 이벤트와 requestAnimationFrame를
적절히, 잘, 멋지게 이용하면
재미있는 애니메이션을 만들 수 있겠죠?
예를

603. 들어서

604. 이동

605. 버튼을

606. 누르면

607. 상자가

608. 움직이다가,

609.
정지

610. 버튼을

611. 누르면

612. 상자를

613. 멈춘다거나...

614. 강려크한 라이브러리 사용!
우리가

615. 자주

616. 쓰는

617. jQuery에도

618. .animate()

619. 함수가

620. 있고,

621.
이외에도

622. TweenJS,

623. Jsanim,

624. animo.js,

625. Move.js,

626. Collie,

627. GSAP

628.
(GreenSock

629. Animation

630. Platform)

631. 등

632. 애니메이션을

633. 지원하는

634.
라이브러리가

635. 많습니다.

636.
그렇지만

637. 언제나

638. 말씀드리지만

639.
라이브러리

640. 너무

641. 좋아하면

642. 게을러져서

643. 소가

644. 될

645. 수

646. 있으니

647. 주의합시다.

648.
나중에

649. 라이브러리

650. 쓰는

651. 법도

652. 따로

653. 공부를

654. 해보죠~

655.
공부할게

656. 정말

657. 드럽게

658. 많네요

659. ^^

660. 사실 지금 여러분께는 무지 어려울 거라 생각해요
저도 처음 애니메이션 배울 땐 뭔 소린지 몰랐거든요
일단 따라서 코딩해보고, 패턴을 차차 익히면
언젠가 애니메이션에 자신감이 생길거예요!!

661. 다음 시간에는 CSS Animation을 공부합시다
:)