path_morph 1.0.1

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 63

Path Morph #

This is a pure Dart package that lets you smoothly morph one Flutter Path object into another. You can think of this as a path tween animation. The idea is to take two paths, a source path and a destination path, and smoothly move the points of the source path until it looks exactly like the destination path.

Usage #

First you need to sample two paths using the PathMorph.samplePaths() method, which returns a SampledPathData object.

SampledPathData data = PathMorph.samplePaths(path1, path2);

Then you call the PathMorph.generateAnimations() method to create an animation for every point in the path. This method needs an AnimationController object and a SampledPathData object as arguments. Additionally, it expects you to pass a function to it, one that takes two arguments itself. In the body of the function, you must call setState() and update the value of the shiftedPoints list, which is present in the SampledPathData object.

AnimationController controller = AnimationController(vsync: this,
                                    duration: Duration(seconds: 1));

PathMorph.generateAnimations(controller, data, (i,z) {
    setState((){
      data.shiftedPoints[i] = z;
    });
});

Lastly, while rendering the morph animation, you can call the PathMorph.generatePath() method and pass the shiftedPoints list to it. This returns a Path object you can draw on your canvas. If you are using a CustomPainter object, you'll want to pass the path as an argument to it.

@override
Widget build(BuildContext context) {
    return CustomPaint(painter: MyPainter(PathMorph.generatePath(data)));
}

Do take a look at the example project to get a better idea.

Important #

This package currently allows you to morph two paths only if they both have an equal number of contours. You can think of a contour as a line you can draw without lifting the pen. For example, the path to draw a triangle, a circle, or a square has one contour only. But a path to draw two concentric circles will have two contours.

[1.0.0] - February 15th 2019.

  • Initial release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:path_morph/path_morph.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyApp();
  }
}

class _MyApp extends State<MyApp> with SingleTickerProviderStateMixin {

  SampledPathData data;
  AnimationController controller;

  @override
  void initState() {
    super.initState();

    Path path1 = createPath1();
    Path path2 = createPath2();

    data = PathMorph.samplePaths(path1, path2);

    controller = AnimationController(vsync: this,
        duration: Duration(seconds: 1));

    PathMorph.generateAnimations(controller, data, func);

    controller.addStatusListener((status) {
      if(status == AnimationStatus.completed)
        controller.reverse();
      else if(status == AnimationStatus.dismissed)
        controller.forward();
    });

    controller.forward();
  }

  void func(int i, Offset z) {
    setState((){
      data.shiftedPoints[i] = z;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: MyPainter(PathMorph.generatePath(data)));
  }
}

class MyPainter extends CustomPainter {

  Path path;
  var myPaint;

  MyPainter(this.path) {
    myPaint = Paint();
    myPaint.color = Color.fromRGBO(255, 0, 0, 1.0);
    myPaint.style = PaintingStyle.stroke;
    myPaint.strokeWidth = 3.0;
  }

  @override
  void paint(Canvas canvas, Size size) => canvas.drawPath(path, myPaint);

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

/*
* Use any method you want to create your paths.
* These are some very simple paths for the sake of an example only.
*/
Path createPath1() {
    return Path()
        ..moveTo(60,200)
        ..lineTo(60,150)
        ..lineTo(200,150)
        ..lineTo(200,200);
}
Path createPath2() {
    return Path()
        ..moveTo(60,200)
        ..lineTo(90,150)
        ..lineTo(150,100)
        ..lineTo(180,150)
        ..lineTo(250,190)
        ..lineTo(250,250);
}

Use this package as a library

1. Depend on it

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


dependencies:
  path_morph: ^1.0.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:path_morph/path_morph.dart';
  
Version Uploaded Documentation Archive
1.0.1 Feb 15, 2019 Go to the documentation of path_morph 1.0.1 Download path_morph 1.0.1 archive
1.0.0 Feb 15, 2019 Go to the documentation of path_morph 1.0.0 Download path_morph 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
27
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
63
Learn more about scoring.

We analyzed this package on Mar 6, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.3.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8