@mojs/curve-editor –

Installation

#npmnpm install @mojs/curve-editor#cdn<script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script>

constMojsCurveEditor=require('mojs-curve-editor').default;// orimportMojsCurveEditorfrom'@mojs/curve-editor';

Usage

constmojsCurve=newMojsCurveEditor({// name of the Curve you are working on. The name is used to// identify record in `localStorage` to restore the state from// when page gets reloaded, so please specify unique names if// you use more than one editor on the same page.name:'bounce curve'});

constmojsCurve=newMojsCurveEditor();consttween=newmojs.Tween({easing:mojsCurve.getEasing()});// orconstshape=newmojs.Shape({easing:mojsCurve.getEasing()});// or as `property curve`consthtml=newmojs.Html({el:'#js-el',x:{0:100,curve:mojsCurve.getEasing()}});

  easing:mojsCurve.getEasing({// `transform` function that pipes through the current value// of the curve so you can transform ittransform:(k)=>{returnk;}});

consthtml=newmojs.Html({el:'#js-el',x:{0:100,easing:'M0, 100 L100, 0'}});

Options

constcurveEditor=newMojsCurveEditor({// name of the curve editorname:'bounce curve'// if should preserve state on page reloadsisSaveState:true,// start path - will be loaded on initialization of the curve,// e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.startPath:'M0, 100 L100, 0',// callback on path change, accepts path stringonChange:function(path){},// if should hide when minimized - useful when you try to embedisHiddenOnMin:false});

Public Methods

curveEditor// get `easing function` of the curve.getEasing()// maximize the curve editor.maximize()// minimize the curve editor.minimize()// toggle `maximize/minimize` methods regarding editor's state.toggleSize();

Shortcuts

Development

[sudo] npm install webpack -g

[sudo] npm install

webpack