dntzhang / Pasition
Path Transition with little JS code, render to anywhere - 轻量级 Path 过渡库,渲染到任何地方
Stars: ✭ 1,149
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Pasition
Picasso
Picasso is a high quality 2D vector graphic rendering library. It support path , matrix , gradient , pattern , image and truetype font.
Stars: ✭ 205 (-82.16%)
Mutual labels: path, svg, canvas
Wechart
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-86.77%)
Mutual labels: path, svg, canvas
Canvg
Javascript SVG parser and renderer on Canvas
Stars: ✭ 2,963 (+157.88%)
Mutual labels: svg, canvas
Pts
A library for visualization and creative-coding
Stars: ✭ 4,628 (+302.79%)
Mutual labels: svg, canvas
Richpath
💪 Rich Android Path. 🤡 Draw as you want. 🎉 Animate much as you can.
Stars: ✭ 2,259 (+96.61%)
Mutual labels: path, svg
Rough
Create graphics with a hand-drawn, sketchy, appearance
Stars: ✭ 16,472 (+1333.59%)
Mutual labels: svg, canvas
Html To Image
✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
Stars: ✭ 595 (-48.22%)
Mutual labels: svg, canvas
People You Should Follow On Codepen
People You Should Follow on CodePen
Stars: ✭ 542 (-52.83%)
Mutual labels: svg, canvas
Macsvg
macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ➤➤➤
Stars: ✭ 789 (-31.33%)
Mutual labels: path, svg
Diffre
Neon Progress indicator useful for event progress like views. Proof of concept.
Stars: ✭ 176 (-84.68%)
Mutual labels: path, canvas
Calendar Graph
Calendar graph like github using jsx support SVG, Canvas and SSR
Stars: ✭ 58 (-94.95%)
Mutual labels: svg, canvas
React Mt Svg Lines
A React.js wrapper component to animate the line stroke in SVGs
Stars: ✭ 344 (-70.06%)
Mutual labels: path, svg
Cax
HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎
Stars: ✭ 1,864 (+62.23%)
Mutual labels: svg, canvas
Picasso.js
A charting library streamlined for building interactive visualizations for the Qlik product suites.
Stars: ✭ 175 (-84.77%)
Mutual labels: svg, canvas
Zrender
A lightweight graphic library providing 2d draw for Apache ECharts
Stars: ✭ 5,122 (+345.78%)
Mutual labels: svg, canvas
Deep Viz
A React component library, providing concise and beautiful diversity charts with Canvas, SVG, E-map, WebGL, Dom, based on data visualization experience and commercial data display practice.
Stars: ✭ 55 (-95.21%)
Mutual labels: svg, canvas
Pasition - Path Transition with little JS code, render to anywhere.
中文 README
DEMO
Install
npm install pasition
or get js by the cdn address:
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].