자바스크립트로 공이 튀는 애니메이션 만들기

18 Oct 2023

javascript

이번 블로그 포스트에서는 자바스크립트를 사용하여 공이 튀는 애니메이션을 만드는 방법에 대해 알아보겠습니다.

필요한 라이브러리 가져오기

먼저, 애니메이션을 만들기 위해 필요한 라이브러리를 가져와야 합니다. 이 예제에서는 PixiJS를 사용할 것입니다.

PixiJS는 HTML5 Canvas와 WebGL을 기반으로 한 2D 렌더링 라이브러리로, 높은 성능과 간편한 사용법을 제공합니다.

import * as PIXI from 'pixi.js';

애니메이션 요소 설정하기

애니메이션에 사용할 요소들을 설정해보겠습니다. 공 하나를 만들고, 시작 위치, 크기, 색상 등을 설정할 수 있습니다.

const app = new PIXI.Application();
document.body.appendChild(app.view);

const ball = new PIXI.Graphics();
ball.beginFill(0xff0000);
ball.drawCircle(0, 0, 50);
ball.endFill();
ball.x = app.screen.width / 2;
ball.y = app.screen.height / 2;
ball.vx = 5; // x축 방향 속도
ball.vy = 5; // y축 방향 속도

app.stage.addChild(ball);

애니메이션 만들기

이제 실제 애니메이션을 만들 차례입니다. requestAnimationFrame을 사용하여 공의 위치를 업데이트하고, 경계에 다다랐을 때 튕기도록 설정해보겠습니다.

function animate() {
    requestAnimationFrame(animate);
    
    ball.x += ball.vx;
    ball.y += ball.vy;
    
    if (ball.x + 50 > app.screen.width || ball.x - 50 < 0) {
        ball.vx *= -1; // x축 방향 반전
    }
    
    if (ball.y + 50 > app.screen.height || ball.y - 50 < 0) {
        ball.vy *= -1; // y축 방향 반전
    }
    
    app.render(stage);
}

animate();

실행해보기

모든 설정이 완료되었습니다. 작성한 코드를 실행하여 애니메이션을 확인해보세요!

<!doctype html>
<html>
<head>
    <title>공 튀는 애니메이션</title>
</head>
<body>
    <script src="pixi.js"></script>
    <script>
        // 위에서 작성한 코드를 붙여넣으세요.
    </script>
</body>
</html>

위와 같이 HTML 파일에 자바스크립트 코드를 추가하고, pixi.js 파일을 포함한 후 브라우저에서 실행하면 공이 튀는 애니메이션이 보여집니다.

자바스크립트와 PixiJS를 사용하여 공이 튀는 애니메이션을 만드는 방법에 대해 알아보았습니다. 더욱 다양한 애니메이션을 만들고 싶다면 PixiJS의 문서를 참고해보세요.