Vivus.js

Vivus는 SVG를 애니메이션화하여 그려지는 것처럼 보이게하는 가벼운 JavaScript 클래스입니다.

무료 앱
Self-Hosted
JavaScript

Vivus는 SVG를 애니메이션화하여 그려지는 것처럼 보이도록하는 가벼운 JavaScript 클래스 (종속성이 없음)입니다.SVG는 원하는 방식으로 그릴 수 있도록 사용자 정의 스크립트를 생성하는 옵션뿐만 아니라 다양한 애니메이션이 제공됩니다.애니메이션 유형 • 지연 : 모든 경로 요소는 시작시 약간의 지연으로 동시에 그려집니다.이것은 현재 기본 애니메이션입니다.• 동기 : 각 선이 동 기적으로 그려집니다.그것들은 모두 동시에 시작하고 끝나기 때문에 이름은 'sync'입니다.• OneByOne : 각 경로 요소가 차례로 그려집니다.이 애니메이션은 라이브 드로잉에 대한 최고의 인상을줍니다.타이밍 기능 더 많은 자유를주기 위해 각 경로 및 / 또는 전체 SVG의 애니메이션을 재정의 할 수 있습니다.CSS 애니메이션 타이밍 기능과 약간 비슷합니다.그러나 큐빅 베 지어 함수를 사용하는 대신 간단한 JavaScript 함수를 사용합니다.숫자를 매개 변수 (0-1)로 승인 한 다음 숫자 (0-1)를 리턴해야합니다.후크입니다.Scenarize이 기능을 사용하면 SVG의 애니메이션을 스크립팅 할 수 있습니다.이를 위해 사용자 정의 값은 SVG의 DOM에서 직접 설정됩니다.다음은 scenario-sync를 사용하는 예입니다.자세한 내용은 소스 코드와 readme 파일을 참조하십시오.