README
dat.GUI.Ease
An extension of dat.GUI to edit animation easings in real time.
Installation
npm install --save-dev dat.gui dat.gui.ease
Include to the project
- File include:
<script type="'text/javascript" src="https://unpkg.com/dat.gui@^0.7.7/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/dat.gui.ease@latest/dist/dat.gui.ease.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/dat.gui.ease@latest/dist/dat.gui.ease.css">
<script>
const { datGuiEase } = window;
</script>
- ES6 module
import * as dat from 'dat.gui';
import datGuiEase from 'dat.gui.ease';
import styles from 'dat.gui.ease/dist/dat.gui.ease.css';
- CommonJS
const dat = require('dat.gui');
const datGuiEase = require('dat.gui.ease');
const styles = require('dat.gui.ease/dist/dat.gui.ease.css');
Set up middlewares
Middleware
object is used to process ease values inside dat.GUI
inspected object. You'll need to create and configure one to make your easing objects processable:
import dat from "dat.gui";
import datGuiEase, { middleware, presets } from "dat.gui.ease";
datGuiEase.extend(dat).use(
middleware("MyAnimationLib")
.preset("linear", presets.Linear)
.preset("sine.in", presets.SineIn)
.preset("sine.out", presets.SineOut)
.preset("sine.inOut", presets.SineInOut)
.preset("quad.in", presets.QuadIn)
.preset("quad.out", preset.QuadOut)
.preset("quad.inOut", preset.QuadInOut)
);
const gui = new dat.GUI();
const config = { ease: "linear" };
gui.add(config, "ease"); // Voila! "ease" property is editable in dat.GUI as ease object
For more customization options, see the API reference below.
Middleware API
Middleware
new Middleware([name]) ⇒ Param | Type | Description |
---|---|---|
[name] | String |
Identification name for middleware. Purely descriptive. |
import datGuiEase, { Middleware, middleware } from "dat.gui.ease";
const myMiddleware = new Middleware("MyAnimationLib");
// Or static method, whatever you prefer
const myMiddleware = middleware("MyAnimationLib");
Middleware
Middleware.prototype.preset(easeInstance, middlewarePresetInstance) => Registers ease object as one of selectable options in dat.GUI
ease control. If inspected value equals ease object, a dat.GUI
ease control will be created for it.
| Param | Type | Description |
|:---------------:|:-------------:|:-------------:|
| easeInstance | Object
| String
| Instance of an object representing your ease |
| middlewarePresetInstance | EasePreset
| Middleware ease preset instance. Used to map your instance to middleware-supported ease and to generate GUI selection option in provided categories. You can either declare your own, or use one of presets
for most common easings. |
import datGuiEase, { middleware, presets } from "dat.gui.ease";
const {
Linear,
SineIn, SineOut, SineInOut,
QuadIn, QuadOut, QuadInOut,
CubicIn, CubicOut, CubicInOut,
QuartIn, QuartOut, QuartInOut,
ExpoIn, ExpoOut, ExpoInOut,
CircIn, CircOut, CircInOut,
BackIn, BackOut, BackInOut
} = presets;
middleware("MyAnimationLib")
.preset("sine.out", SineOut),
.preset("aliasSine.out", SineOut.withAlias("AliasSine")),
.preset("customSine.out", EasePreset.of("M 0,0 C 0.61,1 0.88,1 1,1", "CustomSine", "out"));
Middleware
Middleware.prototype.pick(predicateFn).transform(outInTransformationFn, inOutTransformationFn) ⇒ Enables GUI editing mode if inspected value fits predicateFn
.
| Param | Type | Description |
|:---------------:|:-------------:|:-------------:|
| predicateFn | Function
<Object
| String
> : Boolean
| Predicate function checking whether inspected value is valid for transformation in edit mode |
| outInTransformationFn | Function
<Object
| String
> : Ease
| Function transforming inspected value to middleware-supported Ease
format |
| inOutTransformationFn | Function
<Ease
> : Object
| String
| Function transforming middleware-supported Ease
instance back to the original format of inspected value |
import datGuiEase, { middleware } from "dat.gui.ease";
class MyEase {
constructor(svgPath) {
this.svgPath = svgPath;
};
}
middleware("MyAnimationLib")
.pick(datObject => datObject instanceof MyEase).transform(
datEase => Ease.ofSVGPath(datEase.svgPath),
middlewareEase => new MyEase(middlewareEase.svgPath));