pasition.js是一款腾讯AlloyTeam正式发布的酷炫Path过渡动画js类库。通过pasition.js你可以轻松的制作各种路径变形过渡动画效果。
可以通过npm来安装pasition.js。
npm install pasition
在页面中引入/pasition.js文件。
<script src="./dist/pasition.js"></script>
pasition.lerp
你可以通过 pasition.lerp
方法拿到插值中的shapes:
var shapes = pasition.lerp(pathA, pathB, 0.5) //拿到shapes之后你可以在任何你想要渲染的地方绘制,如canvas、svg、webgl等 ...
pasition.animate
pasition.animate({ from : fromPath, to : toPath, time : time, easing : function(){ }, begin :function(shapes){ }, progress : function(shapes, percent){ }, end : function(shapes){ } })
你可以从svg的path的d属性获取path。支持所有的SVG Path命令:
例如:
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){ } });
对上面传入的配置项一一解释如下:
该Path过渡动画js类库的gihub地址为:https://github.com/AlloyTeam/pasition