segmentGrow example about animatepaper.js

[camille-hdl]

Hi,

segmentGrow is something I'm not really happy with.

I was looking for a way to animate the drawing of a straight line, so I invented this segmentGrow thing. What it does is that it takes a target Point as value, and adds many small segments to the Path until it reaches said target Point. It kinda works on small Paths, but it's a huge performance hit if you have many Paths animated that way.

Anyway you wanted an example, so there you go:
http://jsbin.com/gafaro/1/edit?js,output

  var line = new paper.Path();
  line.strokeColor = "black";
  line.add(new paper.Point(20,20));
  line.animate({
    properties: {
      segmentGrow: new paper.Point(20,100) // target
    },
    settings: {
      duration: 400,
      complete: function() {
        this.animate({
          properties: {
            segmentGrow: new paper.Point(30,20) // new target
          }
        });
      }
    }
  });

Hope this helps.

Cheers