drawing_animation 0.0.1 drawing_animation: ^0.0.1 copied to clipboard
An dart-only library for gradually painting SVG path objects on canvas (drawing line animation).
drawing_animation #
See more examples in the showcasing app. | ||
---|---|---|
|
The rendering library exposes a central widget called AnimatedDrawing
which allows to render SVG paths (via AnimatedDrawing.svg
) or Flutter Path objects (via AnimatedDrawing.paths
) in a drawing like fashion.
🚧 This library is still at early-stage development and might be subject to breaking API changes!!! 🚧
Getting Started #
To get started with the drawing_animation
package you need a valid Svg file.
Currently only simple path elements without transforms are supported (see Supported SVG specifications)
- Add dependency in your
pubspec.yaml
dependencies:
drawing_animation: ^0.01
- Add the SVG asset
assets:
- assets/my_drawing.svg
-
Use the widget An AnimatedDrawing widget can be initiated in two ways:
-
Simplified - Without animation controller (See Example_01)
By default every animation repeats infinitely. For running an animation only once you can use a callback to set
run
to false after the first animation cycle completed (see fieldonFinish
).AnimatedDrawing.svg( "assets/test.svg", run: this.run, duration: new Duration(seconds: 3), onFinish: () => setState(() { this.run = false; }), )
-
Standard - with animation controller (See Example_02)
The simplified version will be sufficient in most of the use cases. If you wish to controll the animation furthermore or you want to syncronize it with other existing animations, you might consider using an custom animation controller:
AnimatedDrawing.svg( "assets/test.svg", controller: this.controller, )
-
-
Check out examples in the
examples
folder. It seems that antialising for the Paint/Canvas is switched off when using debug mode. For pretty results useflutter run --release
.
Getting Started - AnimatedDrawing.paths (still experimental) #
By providing Path objects directly to the widget, elements can be changed dynamically, even during the animation. The internal data structure is rebuild every time the state changes, therefore the animation performance might suffer if the amount of elements in paths
is very high. More examples will be provided soon (for now see Example_01 and Example_04).
AnimatedDrawing.paths(
[
///Path objects
],
paints:[
///Paint objects (optional), specifies a [Paint] object for each [Path] element in `paths`.
],
run: this.run,
duration: new Duration(seconds: 3),
onFinish: () => setState(() {
this.run = false;
}),
)
Option list #
Here is increasingly growing list with all available parameters and their visual effect.
Field | Type | Example |
---|---|---|
lineAnimation Specifies in which way the path elements are drawn to the canvas. When allAtOnce selected all path segments are drawn simultaneously. oneByOne paints every path segment one after another. |
LineAnimation.oneByOne |
|
LineAnimation.allAtOnce |
||
animationOrder Denotes the order in which the path elements are drawn to canvas when lineAnimation is set to LineAnimation.oneByOne . When no animationOrder is specified it defaults to the same order specified in the Svg asset or path array (PathOrder.original ). |
PathOrders.original |
|
PathOrders.bottomToTop |
||
PathOrders.decreasingLength |
||
PathOrders.increasingLength |
||
PathOrders.leftToRight |
||
PathOrders.rightToLeft |
||
PathOrders.topToBottom |
||
animationCurve Easing curves are used to adjust the rate of change of an animation over time, allowing them to speed up and slow down, rather than moving at a constant rate. See Flutter docs. |
Curves.linear |
|
Curves.elasticOut |
||
Curves.bounceInOut |
||
Curves.decelerate |
Supported SVG specifications #
- Only path (
<path d="M3m1....">
) elements are supported for now. I'm currently considering to add flutter_svg as dependency for more complete SVG parsing. - Attributes
- stroke, only Hex-Color without Alpha for now
- stroke-width
- style, but only the both fields above
- No transforms are supported, yet.
How can I use my own SVG files? #
A lot of tools can convert existing SVG files to the supported format. For example with Inkscape:
- Select all objects and ungroup till there is no group left (Ctrl+U)
- Convert selection to paths:
Path>>Object to Path
and hit save - Afterwards remove transforms with svgo or the webversion svgomg.
- Now it should work, if not feel free to write an issue!
Examples: #
Example_01
: Set up simplfied AnimatedDrawing with AnimatedDrawing.svg and AnimatedDrawing.pathsExample_02
: Set up AnimatedDrawing with an custom animation controllerExample_03
: Small artistic showcasing app with vectorizied drawings of old book scans provided by the British LibraryExample_04
: Show how to create Gifs with high resolution using thedebug
field.
Todo #
- Better test coverage
- Improve SVG parsing capabilities
- Circles, rect etc.
- Better color parsing incl. alpha for hex code and RGB(A)
- Subsitute SVG parsing logic with an mature parsering library as flutter_svg
- Provide a way to overwrite color/brush etc. for
AnimatedDrawing.svg
- maybe also overpaints
object? - Define a [PathOrder] which maintains each Path and only sorts them relative to each other
- Improve performance AnimatedDrawing.paths, for every rebuild all provided paths have to be parsed again. Is there a way to check Path-Objects for equality like Keys for widget? Idea: implementing a proxy for Path which creates a unique hash when command evoked
- Callback - when Segment/Path is painted, usecase: fill Path when stroke completely drawn
- Showcase: write "drawing_animation" in different ways + 3 cirlcles + color it and one gif and put it at the top
- Showcase: Create fractals with L-Systems
Credits #
Thank you to maxwellito for his vivus project which served me as initial inspiration for this library.
Thank you to dnfield for the path_parsing library.
Credits also to the British Library for their awesome collection of old book scans which I used for the showcasing app.