From 358623a4b2ca09babafedb7d057e967b79a57ff9 Mon Sep 17 00:00:00 2001 From: MINJOO-KIM Date: Mon, 10 Oct 2022 13:47:03 +0900 Subject: [PATCH] =?UTF-8?q?Part=203=20-=202.3=20JavaScript=20animations=20?= =?UTF-8?q?=EA=B3=BC=EC=A0=9C=201-2=20=EB=B2=88=EC=97=AD=20#1597?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 7-animation/3-js-animation/1-animate-ball/solution.md | 8 ++++---- 7-animation/3-js-animation/1-animate-ball/task.md | 4 ++-- .../3-js-animation/2-animate-ball-hops/solution.md | 10 +++++----- 7-animation/3-js-animation/2-animate-ball-hops/task.md | 8 ++++---- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/7-animation/3-js-animation/1-animate-ball/solution.md b/7-animation/3-js-animation/1-animate-ball/solution.md index 5d3f08eefb..286a9320d9 100644 --- a/7-animation/3-js-animation/1-animate-ball/solution.md +++ b/7-animation/3-js-animation/1-animate-ball/solution.md @@ -1,10 +1,10 @@ -To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`. +공을 튀어 오르게 하기 위해서는 공에는 CSS 프로퍼티인 `top`과 `position:absolute`를, 공이 들어있는 필드에는`position:relative`를 사용할 수 있습니다. -The bottom coordinate of the field is `field.clientHeight`. The CSS `top` property refers to the upper edge of the ball. So it should go from `0` till `field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball. +필드의 아래쪽 좌표는 `field.clientHeight`입니다. `top` 프로퍼티는 공의 위쪽 모서리를 의미합니다. 그러므로 공의 위쪽 모서리는 `0`부터 그 위치의 최솟값인 `field.clientHeight - ball.clientHeight`까지 움직입니다. -To to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode. +튀어 오르는 애니메이션 효과를 적용하기 위해 `easeOut`모드에서 timing 함수 `bounce`를 사용합니다. -Here's the final code for the animation: +다음은 애니메이션 효과를 적용한 최종 코드입니다. ```js let to = field.clientHeight - ball.clientHeight; diff --git a/7-animation/3-js-animation/1-animate-ball/task.md b/7-animation/3-js-animation/1-animate-ball/task.md index 903e823843..8b7893dba7 100644 --- a/7-animation/3-js-animation/1-animate-ball/task.md +++ b/7-animation/3-js-animation/1-animate-ball/task.md @@ -2,8 +2,8 @@ importance: 5 --- -# Animate the bouncing ball +# 공에 튀어 오르는 애니메이션 효과 주기 -Make a bouncing ball. Click to see how it should look: +튀어 오르는 공을 만들어봅시다. 애니메이션이 어떻게 적용되어야 하는지 보려면 클릭해보세요. [iframe height=250 src="solution"] diff --git a/7-animation/3-js-animation/2-animate-ball-hops/solution.md b/7-animation/3-js-animation/2-animate-ball-hops/solution.md index d47387e30a..5500ee925f 100644 --- a/7-animation/3-js-animation/2-animate-ball-hops/solution.md +++ b/7-animation/3-js-animation/2-animate-ball-hops/solution.md @@ -1,12 +1,12 @@ -In the task we had only one property to animate. Now we need one more: `elem.style.left`. + 과제에서는 애니메이션 효과를 주는 프로퍼티가 오직 한개 존재했습니다. 이제 `elem.style.left`라는 하나의 프로퍼티가 더 필요합니다. -The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right. +튀어 오르지 않지만 공이 서서히 오른쪽으로 이동하는 또 다른 규칙에 의해 수평좌표가 바뀝니다. -We can write one more `animate` for it. +오른쪽으로 움직이는 것을 위한 `animate`를 하나 더 사용할 수 있습니다. -As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better. +time function으로 `linear`을 사용할 수 있지만 `makeEaseOut(quad)`같은 것을 사용하는게 더 좋을 것 같습니다. -The code: +코드는 다음과 같습니다. ```js let height = field.clientHeight - ball.clientHeight; diff --git a/7-animation/3-js-animation/2-animate-ball-hops/task.md b/7-animation/3-js-animation/2-animate-ball-hops/task.md index fdc26c8da0..d3db28206c 100644 --- a/7-animation/3-js-animation/2-animate-ball-hops/task.md +++ b/7-animation/3-js-animation/2-animate-ball-hops/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Animate the ball bouncing to the right +# 공을 오른쪽으로 튀어 오르게하는 애니메이션 효과 주기 -Make the ball bounce to the right. Like this: +다음과 같이 공이 오른쪽으로 튀어 오르게 해봅시다. [iframe height=250 src="solution"] -Write the animation code. The distance to the left is `100px`. +애니메이션 코드를 작성해보세요. 왼쪽으로부터 거리는 `100px`입니다. -Take the solution of the previous task as the source. +이전 과제 의 해답을 참고해보세요.