https://github.com/dntzhang/pasition

Path Transition with little JS code, render to anywhere - 轻量级 Path 过渡库，渲染到任何地方
https://github.com/dntzhang/pasition

canvas pasition path svg

Last synced: 5 days ago
JSON representation

Path Transition with little JS code, render to anywhere - 轻量级 Path 过渡库，渲染到任何地方

• Host: GitHub
• URL: https://github.com/dntzhang/pasition
• Owner: dntzhang
• Created: 2017-06-14T04:51:25.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-05-27T23:56:27.000Z (over 1 year ago)
• Last Synced: 2024-10-01T12:43:33.810Z (about 1 month ago)
• Topics: canvas, pasition, path, svg
• Language: JavaScript
• Homepage: https://dntzhang.github.io/pasition/
• Size: 126 KB
• Stars: 1,210
• Watchers: 44
• Forks: 94
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-frontend - pasition - Path Transition with little JS code, render to anywhere.  (Repository / Animation)
• awesome-canvas - pasition - Path Transition with little JS code, render to anywhere.   (Libraries / Path animation)
• awesome-github-star - pasition - 轻量级 Path 过渡库，渲染到任何地方 | dntzhang | 1206 | (JavaScript)

README

        




  





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



---

## [中文 README](https://github.com/dntzhang/pasition/blob/master/docs/release.md)

## DEMO

* [https://dntzhang.github.io/pasition/](https://dntzhang.github.io/pasition/)

## Install

```

npm install pasition

```

or get js by the cdn address:

[https://unpkg.com/pasition](https://unpkg.com/pasition)

## Usage

```js

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:

```js

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`:

```js

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](http://opensource.org/licenses/MIT) License.