# 8.animate()

javascript,

partial

# 1. animate()

MDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

animate() 메서드는 새 애니메이션을 생성하고 엘리먼트에 적용한 다음 애니메이션을 재생하는 메서드입니다. 생성된 애니메이션 객체 인스턴스를 반환합니다.

요소에는 여러 애니메이션을 할 경우 Element.getAnimations() 을 사용한다.

MDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAnimations

# 1.1. 기본문법

animate( [!badge variant='ghost' size='s' text='Array'] keyframes | [!badge variant='ghost' size='s' text='Object'] keyframes, [!badge variant='ghost' size='s' text='Integer']duration |[!badge variant='ghost' size='s' text='Dictionary'] optional)

# 1.2. 매개변수

keyframes Array 필수

미리보기

https://qwerewqwerew.github.io/source/js/partial/animation/0.html

애니메이션 키프레임을 가지고 있는 배열이며 각 키프레임을 객체로 구현한다. 그리고 객체의 프로퍼티로 애니메이션이 적용될 속성을 정의한다.

document.querySelector('.box').animate(
  [
  	// from keyframe
  	{
  		opacity: 0,
  		backgroundColor: '#FFF',
  	},
  	// to keyframe
  	{
  		opacity: 1,
  		backgroundColor: '#CCC',
  	},
  ],
  1000
);

# 1.3. 예제

# 01

Code

미리보기

https://qwerewqwerew.github.io/source/js/partial/animation/1.html

<div id="box">Click me</div>

#box {
	width: 100px;
	height: 100px;
	background: #0000ff;
	display: inline-block;
	position: absolute;
	top: 10%;
	color: #fff;
	text-align: center;
}

window.addEventListener('load', function () {
	var el = document.querySelector('#box');
	el.onclick = function () {
		this.animate(
			[
				{ left: '0%', transform: 'rotate(0deg)' },
				{ left: '50%', transform: 'rotate(360deg)' },
			],
			2000
		);
	};
});

# 02

미리보기

https://qwerewqwerew.github.io/source/js/partial/animation/2.html

<div class="container">
	<div class="rect"></div>
</div>

body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.container {
	position: relative;
	width: 940px;
	height: 520px;

	background: rgba(0, 0, 0, 0.5);
}

.rect {
	width: 100px;
	height: 100px;
	display: block;
	position: absolute;
	background: white;
	top: 200px;
}

// 요소 가져오기
const element = document.querySelector('.rect');
element.animate(
	{
		transform: [
			'translateX(0px) rotate(0deg)', // 시작값
			'translateX(800px) rotate(360deg)', // 종료값
		],
	},
	{
		duration: 3000, // 밀리초 지정
		iterations: Infinity, // 반복 횟수
		direction: 'normal', // 반복 작업 방식
		easing: 'ease', // 가속도 종류
	}
);

es6 javascript animate