Creating a path for CreateJS MotionGuidePlugin

Question

I'm trying to animate a paper plane icon moving along a path. I have the path drawn in Illustrator and I can even draw it on a canvas with CreateJS, but I can't use it in the MotionGuidePlugin because it uses cubic beziers instead of quadratic beziers and it seems the MotionGuidePlugin only allows for quadratics.

So I thought no problem - I'll redraw the path in Illustrator using quadratics, but I can't figure out how. I thought a quadratic was the same as a cubic but with both handles in the same place, but that can't be right because when I try and recreate the path in this fiddle: https://jsfiddle.net/qEYD4/999/ I see a different shape:

I did this previously using GSAP with an SVG path, and I can reintroduce that method and update my CreateJS canvas on the onUpdate event of the GSAP tween but I'd much rather use the CreateJS functionality if I can. Can anyone help at all please? Thanks so much.

Answer 1

ZIM has animation along paths and is built on CreateJS.

ZIM is found at https://zimjs.com

A path in ZIM is either a Squiggle() for a line or a Blob() for a loop. These can be made with data points or a ZIM tool or receive an SVG path. Probably the tool here is the easiest https://zimjs.com/paths - you then copy the resulting data into the ZIM Squiggle points parameter.

The example below can be found here https://zimjs.com/zapp/Z_54QQ2

In the code below we show how to make a Squiggle - the Blob is very similar. We have chosen not to make this path interactive - usually, the user can edit ZIM Squiggle and Blobs. If we do let the user edit, then you would want to turn the onTop:false on so the squiggle does not come above the plane when editing.

We then make a shape - you can use any DisplayObject like a Pic(), Sprite(), Rectangle(), etc. and we animate() this along the path. Dragging along the path is very easy too - use drag:true after the time parameter, or somewhere in there ;-).

Note: the snippet below will not run as it needs the rest of ZIM - you can see the code running in the Editor link above or add it to the ZIM template at https://zimjs.com/code - just paste the code where it says, put code here and run the html page in a Browser.

const path = new Squiggle({
    points:[
        [43,-77,0,0,70,-81,-70,81],
        [85,81,0,0,-72,22,72,-22],
        [171,-47.7,0,0,-56,13,57,-13],
        [311,104,0,0,-120,4.9,120,-5]
    ], 
    // onTop:false,
    interactive:false
}).sca(2).center();

const plane = new Triangle(60,80,80,purple)
    .rot(90) // rotates to point along 0 or x axis
    .addTo()
    .animate({
        props:{path:path}, // animate along blob path
        ease:"linear",
        loop:true,
        loopWait:1,
        // rewind:true,
        time:4
    });