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