酷炫Path过渡动画js类库pasition.js

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命令：

• 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){ }
});                  
                

对上面传入的配置项一一解释如下:

• from 起始的路径
• to 终点的路径
• time 从from到to所需要的时间
• easing 缓动函数(不填默认是匀速运动)
• begin 开始运动的回调函数
• progress 运动过程中的回调函数
• end 运动结束的回调函数

该Path过渡动画js类库的gihub地址为：https://github.com/AlloyTeam/pasition