ease-preview

1.0.3 • Public • Published

ease-preview

experimental

This module will create a canvas element which can be used to visualize easing equations. Example output:

Ease Preview

Usage

NPM

var canvas = require('ease-preview)(easefunc, [opts])

Pass in an an ease function you'd like to preview the ease function should accept a value between 0-1 and return a value between 0-1 (the same format as the eases module).

ease-preview also accepts a second options object with the following options:

  • canvas canvas you'd like to render the ease equation into. If no canvas is supplied a new canvas will be created.
  • width width of the canvas element if no canvas element is passed. Default value 200
  • height height of the canvas element if no canvas element is passed. Default value 200
  • styleBackground the fill style of the background. Default value '#FFF'
  • styleEase the stroke style of the ease line. Default value '#000'
  • styleBoundary the stroke style of the lines that indicate 0 and 1 on graphic. Default value '#CCC'
  • widthEase the stroke width of the ease line. Default value 1
  • widthBoundary the stroke width of the boundary lines. Default value 1
  • shouldRenderBoundary whether boundary lines should be rendered. Default value true
  • boundarySize how many pixels should be allocated to render beyond 0 and 1. Default value 100

License

MIT, see LICENSE.md for details.

Package Sidebar

Install

npm i ease-preview

Weekly Downloads

2

Version

1.0.3

License

MIT

Last publish

Collaborators

  • mikkoh