doc(scenejs): fix easing, presets

jsdoc.json

@@ -6,7 +6,7 @@
 		"destination": "./doc/"
     },
     "source": {
-		"include": ["./src", "./src/presets", "README.md"], 
+		"include": ["./src", "README.md"], 
         "includePattern": "(.+\\.js(doc|x)?|.+\\.ts(doc|x)?)$",
         "excludePattern": "(^|\\/|\\\\)_"
     },

src/easing.ts

@@ -28,7 +28,7 @@ function solveFromX(x1: number, x2: number, x: number) {
   return t;
 }
 /**
- * @namespace Scene.easing
+ * @namespace Scene
  */
 /**
 * Cubic Bezier curve.
@@ -40,8 +40,9 @@ function solveFromX(x1: number, x2: number, x: number) {
 * @param {number} [y2] - point2's y
 * @return {function} the curve function
 * @example
-Scene.easing.bezier(0, 0, 1, 1) // LINEAR
-Scene.easing.bezier(0.25, 0.1, 0.25, 1) // EASE
+import {bezier} from "scenejs";
+Scene.bezier(0, 0, 1, 1) // LINEAR
+Scene.bezier(0.25, 0.1, 0.25, 1) // EASE
 */
 export function bezier(x1: number, y1: number, x2: number, y2: number) {
   /*
@@ -61,20 +62,21 @@ export function bezier(x1: number, y1: number, x2: number, y2: number) {
 /**
 * Specifies a stepping function
 * @see {@link https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp|CSS3 Timing Function}
-* @memberof Scene.easing
+* @memberof Scene
 * @func steps
 * @param {number} count - point1's x
 * @param {"start" | "end"} postion - point1's y
 * @return {function} the curve function
 * @example
-Scene.easing.steps(1, "start") // Scene.easing.stepStart
-Scene.easing.steps(1, "end") // Scene.easing.stepEnd
+import {steps} from "scenejs";
+Scene.steps(1, "start") // Scene.stepStart
+Scene.steps(1, "end") // Scene.stepEnd
 */
 export function steps(count: number, position: "start" | "end") {
   const func: EasingFunctionInterface = (time: number) => {
     const level = 1 / count;
 
-    return (position === "end" ? level : 0) + time % level;
+    return (position === "end" ? level : 0) + Math.floor(time / level) * level;
   };
 
   func.easingName = `steps(${count}, ${position})`;
@@ -84,71 +86,78 @@ export function steps(count: number, position: "start" | "end") {
 
 /**
 * Equivalent to steps(1, start)
-* @memberof Scene.easing
+* @memberof Scene
 * @name stepStart
 * @static
 * @type {function}
 * @example
-Scene.easing.stepStart // steps(1, start)
+import {stepStart} from "scenejs";
+Scene.stepStart // steps(1, start)
 */
 export const stepStart = /*#__PURE__#*/steps(1, "start");
 /**
 * Equivalent to steps(1, end)
-* @memberof Scene.easing
+* @memberof Scene
 * @name stepEnd
 * @static
 * @type {function}
 * @example
-Scene.easing.stepEnd // steps(1, end)
+import {stepEnd} from "scenejs";
+Scene.stepEnd // steps(1, end)
 */
 export const stepEnd = /*#__PURE__#*/steps(1, "end");
 /**
 * Linear Speed (0, 0, 1, 1)
-* @memberof Scene.easing
+* @memberof Scene
 * @name LINEAR
 * @static
 * @type {function}
 * @example
-Scene.easing.LINEAR
+import {LINEAR} from "scenejs";
+Scene.LINEAR
 */
 export const LINEAR = /*#__PURE__#*/bezier(0, 0, 1, 1);
 /**
 * Ease Speed (0.25, 0.1, 0.25, 1)
-* @memberof Scene.easing
+* @memberof Scene
 * @name EASE
 * @static
 * @type {function}
 * @example
-Scene.easing.EASE
+import {EASE} from "scenejs";
+Scene.EASE
 */
 export const EASE = /*#__PURE__#*/bezier(0.25, 0.1, 0.25, 1);
 /**
 * Ease In Speed (0.42, 0, 1, 1)
-* @memberof Scene.easing
+* @memberof Scene
 * @name EASE_IN
 * @static
 * @type {function}
 * @example
-Scene.easing.EASE_IN
+import {EASE_IN} from "scenejs";
+Scene.EASE_IN
 */
 export const EASE_IN = /*#__PURE__#*/bezier(0.42, 0, 1, 1);
 /**
 * Ease Out Speed (0, 0, 0.58, 1)
-* @memberof Scene.easing
+* @memberof Scene
 * @name EASE_OUT
 * @static
 * @type {function}
 * @example
-Scene.easing.EASE_OUT
+import {EASE_OUT} from "scenejs";
+Scene.EASE_OUT
 */
 export const EASE_OUT = /*#__PURE__#*/bezier(0, 0, 0.58, 1);
 /**
 * Ease In Out Speed (0.42, 0, 0.58, 1)
-* @memberof Scene.easing
+* @memberof Scene
 * @name EASE_IN_OUT
 * @static
 * @type {function}
 * @example
-Scene.easing.EASE_IN_OUT
+import {EASE_IN_OUT} from "scenejs";
+Scene.EASE_IN_OUT
 */
 export const EASE_IN_OUT = /*#__PURE__#*/bezier(0.42, 0, 0.58, 1);

src/presets.ts

@@ -5,18 +5,18 @@ import { ObjectInterface } from "./consts";
 
 /**
  * Use the property to create an effect.
- * @memberof Scene.presets
+ * @memberof Scene
  * @func set
  * @param {string | string[]} property - property to set effect
  * @param {any[]} values - values of 100%
  * @param {AnimatorOptions} [options]
  * @example
-// import {presets} from "scenejs";
-// presets.set("opacity", [0, 1, 0], {duration: 2});
-Scene.presets.set("opacity", [0, 1, 0], {duration: 2});
+// import {set, blink} from "scenejs";
+// set("opacity", [0, 1, 0], {duration: 2});
+Scene.set("opacity", [0, 1, 0], {duration: 2});
 
 // Same
-Scene.presets.blink({duration: 2});
+Scene.blink({duration: 2});
 
 // Same
 new SceneItem({
@@ -45,16 +45,16 @@ export function set(property: string | string[], values: any[], options: StateIn
 
 /**
  * Make a zoom in effect.
- * @memberof Scene.presets
+ * @memberof Scene
  * @func zoomIn
  * @param {AnimatorOptions} options
  * @param {number} [options.from = 0] start zoom
  * @param {number}[options.to = 1] end zoom
  * @param {number} options.duration animation's duration
  * @example
-// import {presets} from "scenejs";
-// presets.zoomIn({duration: 2});
-Scene.presets.zoomIn({duration: 2});
+// import {set, zoomIn} from "scenejs";
+// zoomIn({duration: 2});
+Scene.zoomIn({duration: 2});
 // Same
 new SceneItem({
 	"0%": {
@@ -73,16 +73,16 @@ export function zoomIn({ from = 0, to = 1 }: StateInterface) {
 
 /**
  * Make a zoom out effect.
- * @memberof Scene.presets
+ * @memberof Scene
  * @func zoomOut
  * @param {AnimatorOptions} options
  * @param {number} [options.from = 1] start zoom
  * @param {number}[options.to = 0] end zoom
  * @param {number} options.duration animation's duration
  * @example
-// import {presets} from "scenejs";
-// presets.zoomOut({duration: 2});
-Scene.presets.zoomOut({duration: 2});
+// import {zoomOut} from "scenejs";
+// zoomOut({duration: 2});
+Scene.zoomOut({duration: 2});
 // Same
 new SceneItem({
 	"0%": {
@@ -109,9 +109,9 @@ export function zoomOut({ from = 1, to = 0 }: StateInterface) {
  * @param {number|string}[options.to = "0%"] end position
  * @param {number} options.duration animation's duration
  * @example
-// import {presets} from "scenejs";
-// presets.wipeIn({property: "left", duration: 2});
-Scene.presets.wipeIn({property: "left", duration: 2});
+// import {wipeIn} from "scenejs";
+// wipeIn({property: "left", duration: 2});
+Scene.wipeIn({property: "left", duration: 2});
 // Same
 new SceneItem({
 	"0%": {
@@ -130,17 +130,17 @@ export function wipeIn({ from = "-100%", to = "0%", property = "left" }: StateIn
 
 /**
  * Make a wipe out effect.
- * @memberof Scene.presets
+ * @memberof Scene
  * @func wipeOut
  * @param {AnimatorOptions} options
  * @param {string|string[]} [options.property = "left"] position property
  * @param {number|string} [options.from = "0%"] start position
  * @param {number|string}[options.to = "100%"] end position
  * @param {number} options.duration animation's duration
  * @example
-// import {presets} from "scenejs";
-// presets.wipeOut({property: "left", duration: 2});
-Scene.presets.wipeOut({property: "left", duration: 2});
+// import {wipeOut} from "scenejs";
+// wipeOut({property: "left", duration: 2});
+Scene.wipeOut({property: "left", duration: 2});
 // Same
 new SceneItem({
 	"0%": {
@@ -159,7 +159,7 @@ export function wipeOut({ from = "0%", to = "100%", property = "left" }: StateIn
 
 /**
  * Use the property to create an effect.
- * @memberof Scene.presets
+ * @memberof Scene
  * @func transition
  * @param {Scene.SceneItem} item1 - Item that end effect
  * @param {Scene.SceneItem} item2 - Item that start effect
@@ -169,8 +169,8 @@ export function wipeOut({ from = "0%", to = "100%", property = "left" }: StateIn
  * @param {number} options.duration animation's duration
  * @param {number} [options.time] start time of item1 <br/> <strong>default: item1.getDuration() - duration</strong>
  * @example
-// import {presets} from "scenejs";
-Scene.presets.transition(item1, item2, {
+// import {transition} from "scenejs";
+transition(item1, item2, {
 	from: {
 		opacity: 1,
 	},
@@ -216,16 +216,16 @@ export function transition(item1: SceneItem, item2: SceneItem, {
 
 /**
  * Make a fade in effect.
- * @memberof Scene.presets
+ * @memberof Scene
  * @func fadeIn
  * @param {AnimatorOptions} options
  * @param {number} [options.from = 0] start opacity
  * @param {number}[options.to = 1] end opacity
  * @param {number} options.duration animation's duration
  * @example
-// import {presets} from "scenejs";
-// presets.fadeIn({duration: 2});
-Scene.presets.fadeIn({duration: 2});
+// import {fadeIn} from "scenejs";
+// fadeIn({duration: 2});
+Scene.fadeIn({duration: 2});
 // Same
 new SceneItem({
 	"0%": {
@@ -244,16 +244,16 @@ export function fadeIn({ from = 0, to = 1 }: StateInterface) {
 
 /**
  * Make a fade out effect.
- * @memberof Scene.presets
+ * @memberof Scene
  * @func fadeOut
  * @param {AnimatorOptions} options
  * @param {number} [options.from = 1] start opacity
  * @param {number}[options.to = 0] end opacity
  * @param {number} options.duration animation's duration
  * @example
-// import {presets} from "scenejs";
-// presets.fadeOut({duration: 2});
-Scene.presets.fadeOut({duration: 2});
+// import {fadeOut} from "scenejs";
+// fadeOut({duration: 2});
+Scene.fadeOut({duration: 2});
 // Same
 new SceneItem({
 	"0%": {
@@ -271,16 +271,16 @@ export function fadeOut({ from = 1, to = 0 }: StateInterface) {
 }
 /**
  * Make a blinking effect.
- * @memberof Scene.presets
+ * @memberof Scene
  * @func blink
  * @param {AnimatorOptions} options
  * @param {number} [options.from = 0] start opacity
  * @param {number}[options.to = 1] end opacity
  * @param {number} options.duration animation's duration
  * @example
-// import {presets} from "scenejs";
-// presets.blink({duration: 2});
-Scene.presets.blink({duration: 2});
+// import {blink} from "scenejs";
+// blink({duration: 2});
+Scene.blink({duration: 2});
 // Same
 new SceneItem({
 	"0%": {