超级小尺寸的Path过渡类库 - pasition

2017-06-14      775      JavaScript
项目简介

pasition

超级小尺寸的Path过渡动画类库

安装

npm install pasition

CDN地址下载下来使用:

https://unpkg.com/pasition@0.3.0/dist/pasition.js

使用指南

pasition.animate(pathA, pathB, time, {
    easing : function(){ },
    begin :function(){ },
    progress : function(shapes){ },
    end : function(){ }
})

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(
        'M 40 40 Q 60 80 80 40T 120 40 T 160 40 z',
        'M32,0C14.4,0,0,14.4,0,32s14.3,32,32,32 s32-14.3,32-32S49.7,0,32,0z',
        1000,{
            easing : function(){ },
            begin:function(shapes){ },
            progress : function(shapes){
                //你可以在任何你想绘制的地方绘制,如canvas、svg、webgl
            },
            end : function(shapes){ }
        });

你可以通过pasition.lerp方法拿到插值中的shapes:

var shapes  = pasition.lerp(pathA, pathB, 0.5)
//拿到shapes之后你可以在任何你想要渲染的地方绘制,如canvas、svg、webgl等
...

在线演示