댓글 검색 목록

[javascript] 애니메이션으로 CSS 및 SVG에 애니메이션을 적용하는 방법

페이지 정보

작성자 운영자 작성일 20-03-19 16:08 조회 923 댓글 0

설치

애니메이션에 들어가기 전에 Animejs를 설치해야 합니다.

npm install animejs
#or
yarn add animejs

이제 Animejs를 JavaScript 파일로 가져옵니다.

import anime from "animejs";

CONSTRUCTOR AND TARGET SETTING

AnimeJS로 애니메이션을 시작하려면 다음과 같은 생성자가 필요합니다. 대상은 타겟팅 하려는 요소의 선택기입니다.

anime({
	targets: "ul > li"
});

애니메이션의 기본

지속(DURATION)

애니메이션에 지속 시간을 추가하면 애니메이션 재생 시간이 설정됩니다. 지속 기간의 값은 밀리 초입니다.

anime({
	targets: "ul > li",
	duration: 1000 // 1 second
});

방향(DIRECTION)

아래 코드를 사용하여 애니메이션 방향을 선택할 수 있습니다. 선택할 수 있는 길 찾기 옵션은 보통, 반대, 대체입니다. 방향 값을 설정하지 않으면 기본 방향은 보통입니다.

anime({
	targets: "ul > li",
	duration: 1000,
	direction: "normal"
});

EASING

애니메이션에 여유를 추가 할 수도 있습니다. animejs.com/documentation/#linearEasing에서 찾을 수 있도록 설정해야 할 값이 여러 가지 있습니다. 내가 가장 좋아하는 값은 easeInOutSine입니다.

왜냐하면 CSS 애니메이션과 같은 기능을 수행하고 내가 만드는 모든 애니메이션에서 잘 작동하기 때문입니다.

anime({
	targets: "ul > li",
	duration: 1000,
	direction: "normal",
	easing: "easeInOutSine"
});

태깅 및 지연(STAGGERING AND DELAYS)

내 생각에, 엇갈림은 하나의 애니메이션을 다른 애니메이션 후에 (또는 그 동안) 설정할 수 있기 때문에 가장 멋진 기능입니다. 즉, 애니메이션으로 멋진 웨이브 효과를 만들 수 있습니다.

스태거 링에 대한 설명서는 animejs.com/documentation/#staggeringBasics에서 찾을 수 있습니다.

애니메이션에 여러 요소를 선택한 경우 아래 코드는 각 요소의 시작 애니메이션 사이에 100 밀리 초 지연을 설정합니다.

anime({
	targets: "ul > li",
	duration: 1000,
	direction: "normal",
	easing: "easeInOutSine",
	delay: anime.stagger(100)
});

일반 지연을 설정하려면 다음과 같이 지연 값을 밀리 초 단위로 설정합니다. 이 코드는 각 요소 사이에 지연을 설정하는 대신 전체 애니메이션에 대한 지연을 설정합니다. 이 예제는 호출 될 때 100ms를 기다렸다가 애니메이션을 시작합니다.

anime({
	targets: "ul > li",
	duration: 1000,
	direction: "normal",
	easing: "easeInOutSine",
	delay: 100
});

CSS 변환

애니메이션에 변형을 추가하려면 CSS 변형과 비슷하지만 변형을 건너 뛰고 바로 변환, 회전 또는 기울이기로 이동할 수 있습니다.

이것이 의미하는 바는 CSS에서 x 축에서 transform과 같이 -1rem의 번역을 설정한다는 것입니다.

translateX (-1rem); AnimeJS를 사용하면 이 예제와 같은 작업을 수행 할 수 있습니다.

anime({
	targets: "ul > li",
	duration: 1000,
	direction: "normal",
	easing: "easeInOutSine",
	delay: 100,
	translateX: "1rem"
});

TO AND FROM VALUES

HTML 및 CSS로 설정 한 것과 다른 위치에서 애니메이션을 시작하려는 경우 값의 배열을 설정할 수 있습니다. 배열에서 원하는 만큼 값을 추가 할 수 있습니다.

anime({
	targets: "ul > li",
	duration: 1000,
	direction: "normal",
	easing: "easeInOutSine",
	delay: 100,
	translateX: ["-1rem", 0]
});

AnimeJS와 위의 예제를 사용하여 Codepen을 만들었습니다.

https://codepen.io/brettanda/pen/oNXEMoj

ANIMATING SVG'S

이제 재미있는 SVG 애니메이션을 위해!

LINE DRAWING

아무 것도 사용하지 않는 SVG를 만들려면 이 기능이 마음에 듭니다.

선 그리기를 추가하려면 stroke-dasharray 및 stroke-dashoffset과 함께 작동하므로 SVG의 경로와 같은 요소가 필요합니다.

anime({
	targets: ".cool-svg path",
	duration: 1000,
	easing: "easeInOutSine",
	strokeDashoffset: [anime.setDashoffset, 0]
});

MORPHING

SVG를 다른 모양으로 변환하려면 이 기능이 좋습니다! path 요소의 d 속성과 같은 경로 세트를 사용하여 SVG 요소에 모핑을 추가 할 수 있습니다.

아래 예에서는 요소 경로를 설정하는 모든 요소에 대해 d를 변경할 수 있습니다 (예 : 다각형 요소를 사용하여 점으로 변경).

anime({
	targets: ".cool-svg path",
	duration: 1000,
	easing: "easeInOutSine",
	d: [
		{
			value:
				"M53,234c143.452,-81.953,313.407,-167.554,430,-107c116.592,45.554,70.404,361.126,236,472c235.595,95.873,447.977,-197.535,477,-306"
		},
		{
			value:
				"M53,434c143.452,181.953,213.407,267.554,330,107c56.592,-125.554,70.404,-161.126,236,-172c235.595,-55.873,447.977,-197.535,500,206"
		}
	]
});