[자바스크립트] anime js 사용해서 애니메이션 주기 (사용법, 예제)

아래 소스 코드는 Anime.js 라이브러리를 사용하여 박스와 텍스트에 애니메이션을 적용한 예제입니다. box는 이동하며, 텍스트는 설정 방향에 따라 이동하며 나타나고 사라집니다.

 

소스코드 설명

// 박스 애니메이션
const boxes = document.querySelectorAll('.box');
anime({
    targets: boxes,
    translateX: [250, -250],
    translateY: [50, -50],
    rotate: ['1turn', '2turn'],
    duration: 2000,
    easing: 'easeInOutQuad',
    direction: 'alternate',
    loop: true
});

// 첫 번째 텍스트 애니메이션
const textElements = document.querySelectorAll('.text');
anime({
    targets: textElements,
    translateY: [-50, 0], // Y 축으로 위로 이동해서 나타나도록 설정
    opacity: [0, 1], // 투명도 설정
    delay: anime.stagger(500), // 500ms 간격으로 나타남
    duration: 1000, // 애니메이션 지속 시간
    easing: 'easeOutExpo', // 이징 함수 설정
    loop: true // 무한 반복
});

 

ㅇ Anime.js를 사용하여 애니메이션을 생성합니다. 애니메이션의 속성과 동작을 정의합니다.
ㅇ targets 속성은 애니메이션을 적용할 대상을 설정합니다. 이 경우, boxes 변수에 저장된 모든 box 클래스를 가진 엘리먼트가 대상입니다.
ㅇ translateX와 translateY는 엘리먼트의 X 및 Y 축 이동 거리를 설정합니다. [250, -250]와 [50, -50]은 각각 시작과 끝 값입니다. 이렇게 설정하면 엘리먼트가 X와 Y 축으로 이동하면서 애니메이션 됩니다.
ㅇ rotate는 엘리먼트의 회전을 설정합니다. '1turn'에서 '2turn'으로 회전하면서 애니메이션 됩니다.
ㅇ duration은 애니메이션의 지속 시간을 밀리초 단위로 설정합니다. 이 경우 2000ms로 설정되어 있으므로 2초 동안 애니메이션 됩니다.
ㅇ easing은 애니메이션의 이징 함수를 설정합니다. 애니메이션의 속도와 효과를 조절합니다.
ㅇ direction은 애니메이션의 진행 방향을 설정합니다. 'alternate'로 설정하면 애니메이션이 왕복 방식으로 반복됩니다.
ㅇ loop는 애니메이션이 무한 반복되도록 설정합니다.
ㅇ opacity는 엘리먼트의 투명도를 설정합니다. [0, 1]은 텍스트가 완전히 투명한 상태에서 완전히 불투명한 상태로 나타나면서 애니메이션됩니다.

ㅇ delay는 각 엘리먼트의 애니메이션이 시작되는 지연 시간을 설정합니다. anime.stagger(500)은 500ms 간격으로 엘리먼트들이 나타납니다.

 

결과적으로 box 클래스를 가진 엘리먼트를 대상으로 박스가 이동하고 회전하는 애니메이션을 만들고 무한 반복시킵니다. text 클래스는 텍스트가 위에서 아래로 이동하면서 투명도가 조절되며 반복됩니다.

---

전체 소스코드

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<style>
	.box {
		width: 100px;
		height: 100px;
		background-color: #3498db;
		border-radius: 50%;
		margin-right: 20px; /* 박스 사이의 간격 조정 */
	}
	.text-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute; /* 절대 위치 지정 */
		top: 30px; /* 원하는 높이로 조정 */
		font-size: 36px; /* 큰 font-size 설정 */
	}
	.text , .text1 {
		font-size: 36px; /* 큰 font-size 설정 */
		font-weight: bold;
		opacity: 0; /* 초기에 숨겨짐 */
		margin: 0 10px; /* 텍스트 간의 간격 조정 */
		color: #e74c3c; /* 텍스트 색상 지정 */
	}
</style>
<div class="box"></div>
<div class="box"></div>
<!-- 첫 번째 텍스트 엘리먼트 -->
<div class="text-container">
	<div class="text">Hello</div>
	<div class="text">World</div>
</div>

<!-- 두 번째 텍스트 엘리먼트 -->
<div class="text-container" style="top: 80px;"> 
	<div class="text1">반가워요</div>
	<div class="text1">즐거운</div>
	<div class="text1">하루 되길 바랍니다.</div>
</div>
<script>
	// 박스 애니메이션
	const boxes = document.querySelectorAll('.box');
	anime({
		targets: boxes,
		translateX: [250, -250],
		translateY: [50, -50],
		rotate: ['1turn', '2turn'],
		duration: 2000,
		easing: 'easeInOutQuad',
		direction: 'alternate',
		loop: true
	});

	// 첫 번째 텍스트 애니메이션
	const textElements = document.querySelectorAll('.text');
	anime({
		targets: textElements,
		translateY: [-50, 0], // Y 축으로 위로 이동해서 나타나도록 설정
		opacity: [0, 1], // 투명도 설정
		delay: anime.stagger(500), // 500ms 간격으로 나타남
		duration: 1000, // 애니메이션 지속 시간
		easing: 'easeOutExpo', // 이징 함수 설정
		loop: true // 무한 반복
	});

	// 두 번째 텍스트 애니메이션
	const textElements2 = document.querySelectorAll('.text1');
	anime({
		targets: textElements2,
		translateX: [-100, 0], // 왼쪽에서 오른쪽으로 이동해서 나타나도록 설정
		opacity: [0, 1], // 투명도 설정
		delay: anime.stagger(100, { start: 1000 }), // 100ms 간격으로 나타나며 1초 후 시작
		duration: 3500, // 애니메이션 지속 시간
		easing: 'easeInOutBack', // 이징 함수 설정
		loop: true // 무한 반복
	});
</script>

 

---

 

소스코드 실행화면