AlloyTeam/pasition

Name: pasition

Owner: ?? AlloyTeam

Description: Path Transition with little JS code, render to anywhere - ???Path???????????

Created: 2017-06-14 04:51:25.0

Updated: 2018-05-24 14:09:30.0

Pushed: 2017-09-02 10:17:26.0

Homepage: https://alloyteam.github.io/pasition/

Size: 115

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

?

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

---

??? README

DEMO

• https://alloyteam.github.io/pasition/

Install

install pasition

or get js by the cdn address:

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

Usage

tion.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:

= moveto
= lineto
= horizontal lineto
= vertical lineto
= curveto
= smooth curveto
= elliptical Arc
= closepath
= quadratic Belzier curve
= smooth quadratic Belzier curveto

Example:

tion.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:

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

License

This content is released under the MIT License.