Home

Awesome

drawing_animation Pub awesome

From static SVG assetsSee more examples in the showcasing app.
<img src="https://github.com/biocarl/img/raw/master/drawing_animation/art_egypt1.gif" width="400px" ><img src="https://github.com/biocarl/img/raw/master/drawing_animation/art_dino2.gif" width="400px"> <br/> <img src="https://github.com/biocarl/img/raw/master/drawing_animation/art_order.gif" width="400px"><img src="https://github.com/biocarl/img/raw/master/drawing_animation/art_child7.gif" width="400px">
Dynamically created from Path objects which are animated over time
<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_dynamic_1.gif" width="400px" >more coming soon<br/>...<img src="https://github.com/biocarl/img/raw/master/drawing_animation/loader_1.gif" width="400px">

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.

Getting Started - AnimatedDrawing.svg

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)

  1. Add dependency in your pubspec.yaml
dependencies:
  drawing_animation: ^1.0.1

  1. Add the SVG asset
assets:
  - assets/my_drawing.svg
  1. Use the widget

    An AnimatedDrawing widget can be initiated in two ways:

    1. 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 field onFinish).

      AnimatedDrawing.svg(
        "assets/my_drawing.svg",
        run: this.run,
        duration: new Duration(seconds: 3),
        onFinish: () => setState(() {
          this.run  = false;
        }),
      )
      
    2. 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,
      )
      
  2. 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 use flutter 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 (see Limitations). 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;
    }),
  )

Current limitations:

As stated, for every state change of the widget, the internal data structure for the path objects is rebuilt. When the amount of provided path objects is high and a custom animationOrder is defined (which triggers a sorting operation over the data structure) it can result in lags. This becomes especially apparent when the state is rebuild at 60fps by another animation (e.g. rotating the path objects at every frame). Any suggestions on how to elegantly solve this are very welcome :-)

Option list

Here is increasingly growing list with all available parameters and their visual effect.

FieldType<pre> ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ </pre>Example<pre> ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ </pre>
lineAnimation <br/><br/> 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<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_oneByOne.gif" width="200px">
LineAnimation.allAtOnce<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_allAtOnce.gif" width="200px">
animationOrder <br/><br/> 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<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_original.gif" width="200px">
PathOrders.bottomToTop<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_bottomToTop.gif" width="200px">
PathOrders.decreasingLength<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_decreasingLength.gif" width="200px">
PathOrders.increasingLength<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_increasingLength.gif" width="200px">
PathOrders.leftToRight<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_leftToRight.gif" width="200px">
PathOrders.rightToLeft<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_rightToLeft.gif" width="200px">
PathOrders.topToBottom<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_topToBottom.gif" width="200px">
animationCurve <br/><br/> 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<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_linear.gif" width="200px">
Curves.elasticOut<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_elasticOut.gif" width="200px">
Curves.bounceInOut<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_bounceInOut.gif" width="200px">
Curves.decelerate<img src="https://github.com/biocarl/img/raw/master/drawing_animation/met_decelerate.gif" width="200px">
Other
onFinish <br/><br/> Callback when one animation cycle is finished. By default every animation repeats infinitely.
onPaint <br/><br/> Callback when a complete path is painted to the canvas. Returns with the relative index and the Path element itself.
range <br/><br/> Start and stop a animation from a certain moment in time by defining a AnimationRange object.
scaleToViewport <br/><br/> Path objects are scaled to the available viewport while maintaining the aspect ratio. Defaults to true.

Supported SVG specifications

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:

  1. Select all objects and ungroup till there is no group left (Ctrl+U)
  2. Convert selection to paths: Path>>Object to Path and hit save
  3. Afterwards remove transforms with svgo or the webversion svgomg.
  4. Now it should work, if not feel free to write an issue!

Examples:

Todo

Credits

Thank you to maxwellito for his vivus project which served me as initial inspiration for this library. Thank you also to dnfield for the path_parsing library.

Credits to the British Library for their awesome collection of old book scans which I used for the showcasing app.