English | 中文
npm install pasition
or get js by the cdn address:
https://unpkg.com/[email protected]/dist/pasition.js
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
...中文 | English
超级小尺寸的Path过渡动画类库
npm install pasition
CDN地址下载下来使用:
https://unpkg.com/[email protected]/dist/pasition.js
pasition.animate({
from : fromPath,
to : toPath,
time : time,
easing : function(){ },
begin ：function(shapes){ },
progress : function(shapes, percent){ },
end : function(shapes){ }
})path从哪里来？你可以从svg的path的d属性获取。
支持所有的SVG Path命令:
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
举个例子:
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){
//你可以在任何你想绘制的地方绘制,如canvas、svg、webgl
},
end : function(shapes){ }
});你可以通过 pasition.lerp 方法拿到插值中的shapes:
var shapes = pasition.lerp(pathA, pathB, 0.5)
//拿到shapes之后你可以在任何你想要渲染的地方绘制，如canvas、svg、webgl等
...This content is released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent