search

veltman / flubber

Tools for smoother shape animations.
MIT License
6.61k stars 167 forks source link

Expose an API that outputs the compatible to/from path strings #85

Closed alexjlockwood closed 7 years ago

alexjlockwood commented 7 years ago

LMK if this already exists and I just missed it.

A lot of the time a developer will want to morph two path strings but will find it difficult because the path strings may not be compatible with each other. Flubber solves this problem by returning an interpolator that outputs the path string to use at a given time t, with the original from/to path string being returned at t=0 and t=1.

This library could potentially be even more useful if there was a way to obtain the compatible/morphable path strings to use at t=0 and t=1. The raw path strings could then be used using CSS, for example: https://css-tricks.com/many-tools-shape-morphing/#article-header-id-4

veltman commented 7 years ago

You could extract compatible start and end coordinates by getting the results as an array:

var start = "M3,3 L8,3 L2,5 L8,5 L3,7 L7,7",
    end = "M2,5 A 5 25 -15 0 1 8 8";

var interpolate = flubber.interpolate(start, end, { string: false });

// interpolate(0) and interpolate(1) will be compatible point arrays
// "M" + interpolate(0).join("L") and "M" + interpolate(1).join("L") will be compatible path strings