CSS를 사용하여 SVG 애니메이션을 만드는 방법
SVG 애니메이션은 다음과 같은 원시 요소를 통해 수행 할 수 있습니다.
CSS Animation은 SnapSVG와 같은 JavaScript 라이브러리를 사용하는 또 다른 방법 일 수도 있습니다. 이 포스트에서 우리는 SVG에서 CSS Animation으로 우리가 제공 할 수있는 것을 볼 것입니다.
1. 도형 만들기
먼저 애니메이션을 적용 할 모양과 객체를 그릴 필요가 있습니다. 다음과 같은 애플리케이션을 사용할 수 있습니다. 스케치, 어도비 일러스트 레이터, 또는 잉크 스케이프 하나를 만들려면.
이 예에서는 흐린 하늘을 배경으로하고 로켓 우주선을 위로 쏘면 불길이 생깁니다.
드로잉을 끝내면 생성 한 각 객체를 SVG로 내보내야합니다..
이 단계에서는 Sketch를 예로 사용합니다. SVG 형식으로 바꾸려는 객체를 선택하십시오. 창 오른쪽 하단에서을 클릭하십시오. 내보내기 가능하게 만들기. SVG 형식을 선택한 다음 object-name 내보내기를 클릭하십시오. 이 작업은 한 번에 하나의 객체에서만 수행해야합니다..
2. HTML에 SVG 삽입
코드 편집기에서 SVG 파일을 열면 SVG 코드가 상당히 엉망이라는 것을 알 수 있습니다. 따라서 SVG 파일을 배포하기 전에 SVGO라는이 명령 줄 도구를 사용하여 코드를 정리하고 최적화 해 봅시다..
쏘다 단말기 또는 명령 프롬프트, 이 명령 줄을 사용하여 SVGO를 설치하십시오.
[sudo] npm install -g svgo
명령 튜닝, 자상 한, SVG 파일에서 --예쁜 읽을 수있는 SVG 코드 생성 :
svgo rocket.svg --pretty
디렉토리에 SVG가 여러 개있는 경우 한 번에 모두 함께 최적화 할 수 있습니다. 디렉토리 이름이 지정되었다고 가정합니다. / images, 그런 다음 상위 디렉토리에서 다음 명령을 사용하십시오.
svgo -f 이미지 --pretty
SVGO 사용 전후의 차이점을 알아 보겠습니다..
SVG 파일 내의 코드를 복사하여 HTML 파일에 붙여 넣으십시오. 우리는 800px x 600px의 작업 공간에서 작업 할 것이므로, 폭 SVG 요소에.
SVG는 HTML 파일에 설정됩니다. 각 객체에 대해 ID를 정의해야하므로 나중에 CSS에서 선택할 수 있습니다..
이 튜토리얼에서는 로켓과 화염의 ID와 구름의 ID를 정의해야합니다. 객체가 나중에 애니메이션 단계를 처리하도록하려면 신분증 - 너는 또한 사용할 수있다. 수업 - 각 개체에. 이 단계에서 코드는 다음과 같습니다.
3. CSS를 사용하여 애니메이트하기
이제 재미있게 보자. 로켓을 우주로 끌어 올리는 것이 계획입니다. 로켓트는 두 그룹으로 나뉩니다. 로켓 자체와 불꽃.
우선, 로켓을 작업 공간의 중간에 배치합니다. 다음과 같습니다 :
#rocket transform : translate (260px, 200px);
당신이 보는 것은 이것입니다 :
이제 로켓이 위쪽으로 향하는 것처럼 보이게하려면 구름이 떨어지는듯한 환상을 만들어야합니다. 우리가 사용하는 CSS는 다음과 같습니다.
# cloud1 애니메이션 : 1 초 선형 무한; @keyframes fall from transform : translateY (-100px); ~ 변형 : 번역 Y (1000 픽셀)
더욱 사실적으로 보이게하려면 네 개의 구름을 애니메이션으로 만들어 보자. “가을” 다른 속도로. 또한 X 축과 다르게 배치합니다..
두 번째 클라우드에는 다음과 같은 코드가 있습니다.
# cloud2 애니메이션 : fall-2 2s linear infinite; @keyframes fall-2 from transform : translate (200px, -100px); ~ transform : 번역 (200px, 1000px)
우리는 클라우드 # 2를 약간 오른쪽으로 이동 시켰습니다. 200px 와 옮기다. 이 단계에서 결과는 다음과 같아야합니다..
다음으로 로켓에 생명을 불어 넣자. 다음과 같이 애니메이션 키 프레임을 지정합니다.
#rocket 애니메이션 : 팝업 1s 무한; @keyframes popup 0 % transform : translate (260px, 200px); 50 % transform : translate (260px, 240px); 100 % transform : translate (260px, 200px);
그리고 로켓 불꽃에도 애니메이션을 추가하십시오.
#flame 애니메이션 : 흔들림 .2s 선형 무한; @keyframes 흔들기 0 % 변형 : 번역 (55 픽셀, 135 픽셀) 회전 (7도); 20 % transform : translate (55px, 135px) rotate (0deg); 40 % 변형 : 번역 (55 픽셀, 135 픽셀) 회전 (-7도); 60 % 변형 : 번역 (55 픽셀, 135 픽셀) 회전 (0도); 100 % 변형 : 번역 (55 픽셀, 135 픽셀) 회전 (0도);
권리! 이제 코드가 모두 설정되었으므로 SVG에서 애니메이션이 작동해야합니다..
우주로 발사되는 로켓을보세요..
최종 생각
애니메이션은 CSS에서 파악하기 쉬운 기능이 아닙니다. 그러나이 튜토리얼은 SVG에서 CSS Animation을 더 자세히 살펴보기위한 좋은 출발점이 될 것입니다. 당신은 CSS Animation으로 무엇을 얻을 수 있는지 알고 놀랄 것입니다..
매우 기초부터 시작하려면 먼저 SVG (Look Into : SVG) 애니메이션을 따르거나 나머지 SVG 시리즈를 따르십시오..
- 데모보기
- 소스 다운로드
