pasition
Pasition - Path Transition with little JS code, render to anywhere - 超小尺寸的 Path 过渡动画类库
最近和贝塞尔曲线杠上了，如 curvejs 和 pasition 都是贝塞尔曲线的应用案例，未来还有一款和贝塞尔曲线相关的开源的东西，暂时保密。
安装
|
1 2 |
npm install pasition |
CDN 地址下载下来使用:
https://unpkg.com/pasition@1.0.1/dist/pasition.js
使用指南
pasition.lerp
你可以通过 pasition.lerp 方法拿到插值中的 shapes:
|
1 2 3 4 |
var shapes = pasition.lerp(pathA, pathB, 0.5) //拿到shapes之后你可以在任何你想要渲染的地方绘制，如canvas、svg、webgl等 ... |
pasition.animate
|
1 2 3 4 5 6 7 8 9 10 |
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 命令:
|
1 2 3 4 5 6 7 8 9 10 11 |
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 |
举个例子:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 |