3 Star 0 Fork 0

Gitee 极速下载 / pasition

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库: https://github.com/AlloyTeam/pasition.git
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

pasitionpasition

Pasition - Path Transition with little JS code, render to anywhere.


中文 README

DEMO

Install

npm install pasition

or get js by the cdn address:

https://unpkg.com/pasition

Usage

pasition.animate({
    from : fromPath,
    to : toPath,
    time : time,
    easing : function(){ },
    begin : function(shapes){ },
    progress : function(shapes, percent){ },
    end : function(shapes){ }
})

you can get the path from attr d of svg path element.

Supported All the svg path commands:

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

Example:

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){
        //render you shape to svg or canvas or webgl
    },
    end : function(shapes){ }
});

you can get the progressing shapes by pasition.lerp:

var shapes  = pasition.lerp(pathA, pathB, 0.5)
//render shapes in canvas ,svg or anywhere you want
...

License

This content is released under the MIT License.

空文件

简介

取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/mirrors/pasition.git
git@gitee.com:mirrors/pasition.git
mirrors
pasition
pasition
master

搜索帮助