drawing_animation library

drawing_animation

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

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: ^0.1.3

2. Add the SVG asset

assets:
  - assets/my_drawing.svg

3. 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,
      )
      

4. 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. 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;
    }),
  )

Classes

AnimatedDrawing

A widget that iteratively draws path segment data to a defined canvas (drawing line animation).

AnimationRange

Denotes a range of path segments over which a animation is built.

DebugOptions

If recordFrame is true, the canvas of the AnimatedWidget remains white while writing each frame to the file outPutDir/fileName_frame.png.

PathIndexRange

Denotes a range by its relative position in the Path array provided.

PathOrder

Denotes the order of PathSegment elements (not public).

PathOrders

A collection of common PathOrder constants.

Enums

LineAnimation

The enum LineAnimation selects a internal painter for animating each PathSegment element

Typedefs

PaintedPathCallback = void Function(int, Path)

Callback when path is painted.