Yarrow - 애니메이션 화살표를 SVG로 작성

SVG 콘텐츠는 재미있어, Flash와 같은 애니메이션도 지원하고 있습니다.

콘텐츠를 서서히 그려 나갈 수 있도록 하기만 하면 됩니다.

수작업으로 실현하는 것은 무리가 있을 것입니다. 

그래서 사용해보고 싶은 것이 Yarrow입니다. 

HTML 프리젠 테이션 등과 결합하면 효과적 일 수 있습니다.

Yarrow 사용법

 실제로 움직이고있는 곳입니다. 나중에 선이 당겨지는 것을 알 수 있습니다.

선에 문자를 올릴 수 있습니다

소스가되는 곳에서 선이 시작한다는 연출도 가능합니다.

섹션의 상자를 향해 뻗어나가는 애니메이션도 가능합니다.

그래프의 포인트를 향해 당겨지는 데모. 

이것은 효과가있을 것입니다. D3와 함께합니다.

그래프가 그림에서 단순히 화살표가 그려져있는 것만으로 시선을 끌기 쉽지 않습니다. 

그래서 애니메이션함으로써 주목을 받게됩니다. 

특히 SVG 콘텐츠는 이미지와 달리 쌍방향 움직임이 가능하므로 

Yarrow를 사용함으로써 더 임팩트있는 ​​콘텐츠를 만들 수가 있을 것입니다. 

Yarrow는 HTML5 / JavaScript로 만든 오픈 소스 소프트웨어 (MIT License)입니다.

Yarrow — svg animated arrow pointer and tooltip

krispo/yarrow: svg animated arrow pointer and tooltip