dntzhang / pasition

Path Transition with little JS code, render to anywhere - 轻量级 Path 过渡库，渲染到任何地方

Pasition - Path Transition with little JS code, render to anywhere.

---

中文 README

DEMO

• https://dntzhang.github.io/pasition/

Install

npm install pasition

or get js by the cdn address:

https://unpkg.com/pasition

Usage

pasition.animate({
    from : fromPath,
    to : toPath,
    time : time,
    easing : function(){ },
    begin : function(shapes){ },
    progress : function(shapes, percent){ },
    end : function(shapes){ }
})

you can get the path from attr d of svg path element.

Supported All the svg path commands:

M/m = moveto
L/l = lineto
H/h = horizontal lineto
V/v = vertical lineto
C/c = curveto
S/s = smooth curveto
A/a = elliptical Arc
Z/z = closepath
Q/q = quadratic Belzier curve
T/t = smooth quadratic Belzier curveto

Example:

pasition.animate({
    from: 'M 40 40 Q 60 80 80 40T 120 40 T 160 40 z',
    to: 'M32,0C14.4,0,0,14.4,0,32s14.3,32,32,32 s32-14.3,32-32S49.7,0,32,0z',
    time: 1000,
    easing : function(){ },
    begin:function(shapes){ },
    progress : function(shapes, percent){
        //render you shape to svg or canvas or webgl
    },
    end : function(shapes){ }
});

you can get the progressing shapes by pasition.lerp:

var shapes  = pasition.lerp(pathA, pathB, 0.5)
//render shapes in canvas ,svg or anywhere you want
...

License

This content is released under the MIT License.

pasition's Issues

请问一下报ReferenceError: pathA is not defined是什么意思？

请问一下报ReferenceError: pathA is not defined是什么意思？

publish new npm package

Hi,

can you please publish a new version on npm (f.e. version 1.0.2) so the latest fixes can be easily integrated to other projects?

Best

Is there any limitations or restrictions when use pasition to implement morph effects?

我见过有很多类似的库可以实现svg 变形动画(morph)比如flubber，但是绝大部分都有一些限制，比如变形的两个path必须保证具有相同的绘制命令。想知道pasition是否对path有额外的限制还是说任意两个path都可以很好的变形?

算法上有点疑惑

Hi，最近看了下pasition的算法，有个疑惑的地方：

_preprocessing 函数中有个splitCurves的操作，我理解目的应该是让两个path的curves的数目保持一致，但是这里为啥MIN_CURVES_COUNT=100的限制，假设curves的长度很小，那么会填充到100的长度，这个过程应该很耗时吧？

和 flubber 不同地方

pasition使用的旋转找最小路径，
如果是填充的不是 stroke的话，可以使用排列组合找最小路径

和flubber的区别

pasition和flubber太像了，演示都差不多。两个是同一个东西吗，还是谁抄谁？

某些path之间过渡的不是很好

像下面这两个形状之间的过渡效果很"奇怪"。这块能否优化下？我调研了下flubber似乎是专门做过优化的