확장 가능한 벡터 그래픽 (SVG) 애니메이션의 모습
오늘 우리는 계속 토론 할 것입니다. 확장 가능한 벡터 그래픽 (SVG), 이번에는 SVG 애니메이션. 두려워하지 마라. SVG Animation은 비교적 쉽고 실제로이 포스트에서 우리는 기초부터 시작할 것이다..
기본 구현
SVG의 애니메이션은
위의 코드 스 니펫에서 볼 수 있듯이
attributeName:이 속성은 애니메이션에서 영향을받을 요소의 속성을 지정합니다.
...에서:이 속성은 선택 사항입니다. 정확한 값을 지정하거나 그것이 있던 곳에서 시작하도록 남겨 둘 수 있습니다..
에:이 속성은 애니메이션 방향을 지정합니다. 에 지정된 값에 따라 attributeName, 결과는 다를 수 있습니다. 그러나이 예제에서는 신장.
~하다:이 속성은 애니메이션 기간을 지정합니다. 이 속성의 값은 클럭 값 구문으로 표현됩니다. 예를 들어, 02:33 2 분 33 초를 나타내는 반면, 3 시간 3 시간과 같지만 시간이 오래 걸리지 않아서 3 대 또는 3 초;
같은 일이 생깁니다. 아르 자형).
- 기본 구현 데모
움직이는 요소
SVG 요소를 이동하는 경우 요소의 좌표 만 대상으로 지정하면됩니다. 엑스 과 와이;
위의 예제에서 우리는 사각형을 0 에 200 3 초 안에 사각형이 왼쪽에서 오른쪽으로 수평으로 이동하여 나타납니다. 또한주의 깊게 보면 Google 애널리틱스에 다른 속성을 추가했습니다. 가득 따르다.
가득 따르다 여기에있는 속성은 다른 SVG 요소와 같은 배경색과는 아무런 관련이 없습니다. 이 속성은 재생 시간이 끝난 후 애니메이션이 어떻게 작동 할 것인지 지정합니다. 이 예제에서 우리는 얼다 영향을받는 요소이므로 애니메이션이 종료되는 위치를 유지합니다..
또한 CX 또는 cy, 이렇게 :
- 움직이는 요소 데모
여러 속성에 애니메이션 적용
지금까지는 하나의 속성 만 대상으로 애니메이션을 만들었지 만 한 번에 여러 속성에 애니메이션을 적용 할 수도 있습니다. 아래 예제는 우리가 어떻게하는지 보여줍니다 :
보시다시피, 비슷한 방식으로 작동합니다. 이제는 두 가지가 있습니다.
- 다중 속성 데모
경로 따라 가기
이전 게시물 SVG에서 텍스트로 작업하기, 우리는 텍스트를 경로로 보내는 방법을 보여 줬습니다. 같은 일을하는 것도 가능합니다. SVG 애니메이션, 요소를 움직여 경로를 따라 움직일 수 있습니다. 여기에 예제가있다..
경로는 신분증 와
이제 그걸 보자.
- 경로 데모 다음
변환
우리는 또한 다음과 같은 변환을 사용할 수 있습니다. 규모, 옮기다 과 회전하다 애니메이션을 위해, 그리고 그렇게하기 위해 우리는
SVG의 변형은 CSS3와 비슷한 원칙을 공유하며 CSS3 2D 변환에 대한 이전 게시물에서이를 포괄적으로 다뤘습니다.
- 변환 데모
마지막 생각들
SVG 애니메이션에 대한 숙련도에 따라 다음과 같은 것을 만들 수 있습니다..
Flash Animation보다 SVG Animation을 사용하는 한 가지 이점은 타사 플러그인을 사용하여 작업하는 것이 아니라 Flash보다 훨씬 빠릅니다. Adobe가 Android에서 플래시 지원을 중단 한 후에는 다음 웹 사이트에서 애니메이션을 제공하기 위해이 방법을 시도해 볼 수 있습니다..
추가 참고 문헌
- SVG 애니메이션 문서화
- 고급 SVG 애니메이션 기술
- 데모보기
- 소스 다운로드
