SVG Line Painter for Unity
It works like a js version of SVG line animation like "LazyLinePainter" which you can find js library link in below. https://github.com/camoconnell/lazy-line-painter
Also SVG part of code is a port of https://github.com/colinmeinke/svg-points/blob/master/src/toPoints.js
Preparing your SVG data
Create your Line art in your vector editor of choice
- Ensure there are no fills.
- No closed paths. i.e - Line needs a start and end.
- No compound path. If you have compound paths, you need to release.
- Crop Artboard nice & tight!
- If you draw simple circle, you need to add anchor point. Othewise library will not draw circle.
Export as .SVG (Default export options are fine)
Convert SVG file to text file. e.g - You can rename like "test.svg.txt".
SetUp
Copy Assets/SVGPainterUnity
directory to your Assets directory.
Add a SVGPainter
component to a GameObject.
Add your SVG text file to Resources/
directory.
Example Code
Here is how to animate.
var svgPainter = GetComponent<SVGPainter> ();
svgPainter.Init ("test.svg");
svgPainter.Play (3f, PainterEasing.EaseInOutCubic);
If you want to rewind animation, here it is.
svgPainter.Play (3f, PainterEasing.EaseInOutCubic, () => {
svgPainter.Rewind (3f, PainterEasing.EaseInOutCubic);
});
Setup line width and color.
svgPainter.Init ("test.svg",0.002f,new Color (1f, 1f, 1f));
Canvas Example Code
var svgPainter = GetComponent<SVGPainter> ();
svgPainter.InitCanvas ("test.svg");
svgPainter.Play (3f, PainterEasing.EaseInOutCubic);
Setup line width and color.
svgPainter.InitCanvas ("test.svg",1f,new Color (1f, 1f, 1f));
Compatibility
SVGLinePainter is only tested on MacOS with OpenGLCore and not sure about another platform.
License
MIT