drawing_animation 0.1.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 91

drawing_animation Pub awesome

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
  drawing_animation: ^0.1.1

  1. Add the SVG asset
  - 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).

         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:

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

      ///Path objects
      ///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 :-)


0.1.3 #

  • Fix color problem

0.1.2 #

  • First part of some major refactorings

0.1.0 #

  • Migration to stable version

0.0.9 #

  • Fixes when using custom controller

0.0.8 #

  • Fix crash before callback returns from path segment parsing

0.0.7 #

  • Fix crash when no range provided

0.0.6 #

  • Define a range for one animation cycle (see range field), +Several Fixes

0.0.5 #

  • Allow to toggle scaleToViewport
  • Callback for painted path added

0.0.4 #

  • Fix SDK version

0.0.3 #

  • DebugOptions: Record canvas is now also possible when widget is rebuild. When changing parameters in DebugOptions hot restart required.
  • Several Fixes and performance optimizations.
  • Examples on how to use _.paths

0.0.2 #

  • Update links and paths
  • Remove typos
  • Create minimal README_pub.md for pub-repo

0.0.1 #

  • Initial release. Relies on pre-released master.


Examples #

  • Example_01: Set up simplfied AnimatedDrawing with AnimatedDrawing.svg and AnimatedDrawing.paths
  • Example_02: Set up AnimatedDrawing with an custom animation controller
  • Example_03: Small artistic showcasing app with vectorizied drawings of old book scans provided by the British Library
  • Example_04: Show how to create Gifs with high resolution using the debug field.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  drawing_animation: ^0.1.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:drawing_animation/drawing_animation.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jan 21, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Health suggestions

Fix lib/src/drawing_state_with_ticker.dart. (-0.50 points)

Analysis of lib/src/drawing_state_with_ticker.dart reported 1 hint:

line 59 col 3: The class 'Future' wasn't exported from 'dart:core' until version 2.1, but this code is required to be able to run on earlier versions.

Fix lib/src/range.dart. (-0.50 points)

Analysis of lib/src/range.dart reported 1 hint:

line 15 col 17: Override hashCode if overriding ==.

Format lib/src/abstract_drawing_state.dart.

Run flutter format to format lib/src/abstract_drawing_state.dart.

Format lib/src/drawing_widget.dart.

Run flutter format to format lib/src/drawing_widget.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >2.0.0 <3.0.0
flutter 0.0.0
path_parsing ^0.1.3 0.1.4
xml ^3.2.5 3.7.0
Transitive dependencies
charcode 1.1.2
collection 1.14.11 1.14.12
convert 2.1.1
meta 1.1.8
petitparser 3.0.0
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
mockito ^4.0.0
test ^1.5.1