xiaohe-transition - npm Package Compare versions

Comparing version 0.0.16 to 0.0.18

lib/cjs/index.js

@@ -1,1 +0,1 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports,require("bezier-easing")):"function"==typeof define&&define.amd?define(["exports","bezier-easing"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self).xh_transition={},t.BezierEasing)}(this,(function(t,i){"use strict";var s,e,n,r;t.XhTransitionPresetBezier=void 0,(s=t.XhTransitionPresetBezier||(t.XhTransitionPresetBezier={})).linear="linear",s.ease="ease",s.easeIn="ease-in",s.easeOut="ease-out",s.easeInOut="ease-in-out",t.XhTransitionWorkStatus=void 0,(e=t.XhTransitionWorkStatus||(t.XhTransitionWorkStatus={})).free="free",e.working="working",e.paused="paused",t.XhTransitionRepeatMode=void 0,(n=t.XhTransitionRepeatMode||(t.XhTransitionRepeatMode={})).normal="normal",n.alternate="alternate",t.XhTransitionRepeatDirection=void 0,(r=t.XhTransitionRepeatDirection||(t.XhTransitionRepeatDirection={})).forward="forward",r.backward="backward";const a=300,o=t.XhTransitionPresetBezier.linear,h=0,u=-1,p={[t.XhTransitionPresetBezier.linear]:[0,0,1,1],[t.XhTransitionPresetBezier.ease]:[.25,.1,.25,1],[t.XhTransitionPresetBezier.easeIn]:[.42,0,1,1],[t.XhTransitionPresetBezier.easeOut]:[0,0,.58,1],[t.XhTransitionPresetBezier.easeInOut]:[.42,0,.58,1]},_=-1,l=t.XhTransitionRepeatMode.normal;function c(t){return 0===t?0:1e3/t}class d{_id=null;_timing=!1;_fps;_callback;constructor(t,i){this._fps=t>0?t:this.supportAnimationFrame()?-1:30,this._callback=i}id(){return this._id}start(){return this.stop(),this.useAnimationFrame()?this._id=requestAnimationFrame((()=>{this.animate()})):this._id=setInterval((()=>{this._callback()}),c(this._fps)),this._timing=!0,this}stop(){return null==this._id||(this.useAnimationFrame()?cancelAnimationFrame(this._id):clearInterval(this._id),this._timing=!1,this._id=null),this}animate(){this._timing&&(this._callback(),this._id=requestAnimationFrame((()=>{this.animate()})))}supportAnimationFrame(){return"function"==typeof requestAnimationFrame}useAnimationFrame(){return this.supportAnimationFrame()&&this._fps<=0}}class T{_options;_callback;_status=t.XhTransitionWorkStatus.free;_progress=0;_bezier=null;_timer=null;_last=0;_pauses=0;constructor(t,i){"function"==typeof t?(this._options={},this._callback=t):(this._options=t,this._callback=i)}options(t){return null!=t&&(this._options=Object.assign({},this._options,t)),this._options}status(){return this._status}progress(){return this._progress}value(){const{start:t=0,target:i=0}=this._options;if(null==this._bezier)throw new Error("需要先调用XhTransition#start方法以创建BezierEasing实例！");return this._bezier(this.progress())*(i-t)+t}start(s){this.status()!==t.XhTransitionWorkStatus.free&&this.stop();const{duration:e=a,preset:n=o,bezier:r,delay:_=h,fps:l=u}=this.options(s);this._bezier=i(...r??p[n]);const c=Date.now()+_;return this._timer=new d(l,(()=>{const t=(Date.now()-c-this._pauses)/e;this._progress=Math.max(0,Math.min(1,t)),this._callback(this.value(),this),this.progress()>=1&&(this.stop(),this._options.completed?.(this))})).start(),this._status=t.XhTransitionWorkStatus.working,this._options.started?.(this),this}pause(){return this.status()!==t.XhTransitionWorkStatus.working||null==this._timer||(this._timer.stop(),this._last=Date.now(),this._status=t.XhTransitionWorkStatus.paused,this._options.paused?.(this)),this}resume(){return this.status()!==t.XhTransitionWorkStatus.paused||null==this._timer||(this._last>0&&(this._pauses+=Date.now()-this._last),this._timer.start(),this._status=t.XhTransitionWorkStatus.working,this._options.resumed?.(this)),this}stop(){return null!=this._timer&&(this._timer.stop(),this._timer=null),this.reset(),this._options.stopped?.(this),this}reset(){this._status=t.XhTransitionWorkStatus.free,this._progress=0,this._bezier=null,this._last=0,this._pauses=0}}t.XhDefaultTransitionCompatibleFps=30,t.XhDefaultTransitionDelay=h,t.XhDefaultTransitionDuration=a,t.XhDefaultTransitionFps=u,t.XhDefaultTransitionPreset=o,t.XhDefaultTransitionRepeatCount=_,t.XhDefaultTransitionRepeatMode=l,t.XhTransition=T,t.XhTransitionPresetBezierConfig=p,t.XhTransitionRepeater=class{_transition;_options;_status=t.XhTransitionWorkStatus.free;_counts=0;_direction=t.XhTransitionRepeatDirection.forward;constructor(t,i){this._transition=t,this._options=i??{}}options(t){return null!=t&&(this._options=Object.assign({},this._options,t)),this._options}status(){return this._status}counts(){return this._counts}direction(){return this._direction}start(i){this.status()!==t.XhTransitionWorkStatus.free&&this.stop();const{count:s=_,mode:e=l}=this.options(i),n=i=>{if(this._counts+=1,this._options.repeated?.(this.counts(),this,i),s>0&&this.counts()>=s)return;const{start:r,target:a}=i.options();switch(e){case t.XhTransitionRepeatMode.normal:i.start({start:r,target:a,completed:n}),this._direction=t.XhTransitionRepeatDirection.forward;break;case t.XhTransitionRepeatMode.alternate:{const s=this.direction();switch(i.start({start:a,target:r,completed:n}),s){case t.XhTransitionRepeatDirection.forward:this._direction=t.XhTransitionRepeatDirection.backward;break;case t.XhTransitionRepeatDirection.backward:this._direction=t.XhTransitionRepeatDirection.forward}break}}};return this._transition.start({completed:n}),this._status=t.XhTransitionWorkStatus.working,this._options.started?.(this,this._transition),this}pause(){return this.status()!==t.XhTransitionWorkStatus.working||(this._transition.pause(),this._status=t.XhTransitionWorkStatus.paused,this._options.paused?.(this,this._transition)),this}resume(){return this.status()!==t.XhTransitionWorkStatus.paused||(this._transition.resume(),this._status=t.XhTransitionWorkStatus.working,this._options.resumed?.(this,this._transition)),this}stop(){return this._transition.stop(),this.reset(),this._options.stopped?.(this,this._transition),this}reset(){this._status=t.XhTransitionWorkStatus.free,this._counts=0,this._direction=t.XhTransitionRepeatDirection.forward}},t.XhTransitionTimer=d,t.default=T,t.fps2ms=c,Object.defineProperty(t,"__esModule",{value:!0})}));
+!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports,require("nanoevents"),require("bezier-easing")):"function"==typeof define&&define.amd?define(["exports","nanoevents","bezier-easing"],s):s((t="undefined"!=typeof globalThis?globalThis:t||self).xh_transition={},t.nanoevents,t.BezierEasing)}(this,(function(t,s,i){"use strict";var e,n,r,a;t.XhTransitionPresetBezier=void 0,(e=t.XhTransitionPresetBezier||(t.XhTransitionPresetBezier={})).linear="linear",e.ease="ease",e.easeIn="ease-in",e.easeOut="ease-out",e.easeInOut="ease-in-out",t.XhTransitionWorkStatus=void 0,(n=t.XhTransitionWorkStatus||(t.XhTransitionWorkStatus={})).free="free",n.working="working",n.paused="paused",t.XhTransitionRepeatMode=void 0,(r=t.XhTransitionRepeatMode||(t.XhTransitionRepeatMode={})).normal="normal",r.alternate="alternate",t.XhTransitionRepeatDirection=void 0,(a=t.XhTransitionRepeatDirection||(t.XhTransitionRepeatDirection={})).forward="forward",a.backward="backward";const o=300,h=t.XhTransitionPresetBezier.linear,u=0,p=-1,_={[t.XhTransitionPresetBezier.linear]:[0,0,1,1],[t.XhTransitionPresetBezier.ease]:[.25,.1,.25,1],[t.XhTransitionPresetBezier.easeIn]:[.42,0,1,1],[t.XhTransitionPresetBezier.easeOut]:[0,0,.58,1],[t.XhTransitionPresetBezier.easeInOut]:[.42,0,.58,1]},c=-1,l=t.XhTransitionRepeatMode.normal;class d{_emitter;constructor(){this._emitter=s.createNanoEvents()}events(){return this._emitter.events}emit(t){for(var s=arguments.length,i=new Array(s>1?s-1:0),e=1;e<s;e++)i[e-1]=arguments[e];return this._emitter.emit(t,...i),this}on(t,s){return this._emitter.on(t,s)}once(t,s){const i=this.on(t,(function(){i(),s(...arguments)}));return i}clearEvents(){return this._emitter.events={},this}}function m(t){return 0===t?0:1e3/t}class T{_id=null;_timing=!1;_fps;_callback;constructor(t,s){this._fps=t>0?t:this.supportAnimationFrame()?-1:30,this._callback=s}id(){return this._id}start(){return this.stop(),this.useAnimationFrame()?this._id=requestAnimationFrame((()=>{this.animate()})):this._id=setInterval((()=>{this._callback()}),m(this._fps)),this._timing=!0,this}stop(){return null==this._id||(this.useAnimationFrame()?cancelAnimationFrame(this._id):clearInterval(this._id),this._timing=!1,this._id=null),this}animate(){this._timing&&(this._callback(),this._id=requestAnimationFrame((()=>{this.animate()})))}supportAnimationFrame(){return"function"==typeof requestAnimationFrame}useAnimationFrame(){return this.supportAnimationFrame()&&this._fps<=0}}class X extends d{_options;_callback;_status=t.XhTransitionWorkStatus.free;_progress=0;_bezier=null;_timer=null;_last=0;_pauses=0;constructor(t,s){super(),"function"==typeof t?(this._options={},this._callback=t):(this._options=t,this._callback=s)}options(t){return null!=t&&(this._options=Object.assign({},this._options,t)),this._options}status(){return this._status}progress(){return this._progress}value(){const{start:t=0,target:s=0}=this._options;if(null==this._bezier)throw new Error("需要先调用XhTransition#start方法以创建BezierEasing实例！");return this._bezier(this.progress())*(s-t)+t}start(s){this.status()!==t.XhTransitionWorkStatus.free&&this.stop();const{duration:e=o,preset:n=h,bezier:r,delay:a=u,fps:c=p}=this.options(s);this._bezier=i(...r??_[n]);const l=Date.now()+a;return this._timer=new T(c,(()=>{const t=(Date.now()-l-this._pauses)/e;this._progress=Math.max(0,Math.min(1,t)),this._callback(this.value(),this),this.progress()>=1&&(this.stop(),this._options.completed?.(this),this.emit("completed",this))})).start(),this._status=t.XhTransitionWorkStatus.working,this._options.started?.(this),this.emit("started",this),this}pause(){return this.status()!==t.XhTransitionWorkStatus.working||null==this._timer||(this._timer.stop(),this._last=Date.now(),this._status=t.XhTransitionWorkStatus.paused,this._options.paused?.(this),this.emit("paused",this)),this}resume(){return this.status()!==t.XhTransitionWorkStatus.paused||null==this._timer||(this._last>0&&(this._pauses+=Date.now()-this._last),this._timer.start(),this._status=t.XhTransitionWorkStatus.working,this._options.resumed?.(this),this.emit("resumed",this)),this}stop(){return null!=this._timer&&(this._timer.stop(),this._timer=null),this.reset(),this._options.stopped?.(this),this.emit("stopped",this),this}destroy(){this.status()!==t.XhTransitionWorkStatus.free&&this.stop(),this.clearEvents()}reset(){this._status=t.XhTransitionWorkStatus.free,this._progress=0,this._bezier=null,this._last=0,this._pauses=0}}t.XhDefaultTransitionCompatibleFps=30,t.XhDefaultTransitionDelay=u,t.XhDefaultTransitionDuration=o,t.XhDefaultTransitionFps=p,t.XhDefaultTransitionPreset=h,t.XhDefaultTransitionRepeatCount=c,t.XhDefaultTransitionRepeatMode=l,t.XhTransition=X,t.XhTransitionEmitter=d,t.XhTransitionPresetBezierConfig=_,t.XhTransitionRepeater=class extends d{_transition;_options;_status=t.XhTransitionWorkStatus.free;_counts=0;_direction=t.XhTransitionRepeatDirection.forward;constructor(t,s){super(),this._transition=t,this._options=s??{}}options(t){return null!=t&&(this._options=Object.assign({},this._options,t)),this._options}status(){return this._status}counts(){return this._counts}direction(){return this._direction}start(s){this.status()!==t.XhTransitionWorkStatus.free&&this.stop();const{count:i=c,mode:e=l}=this.options(s),n=s=>{if(this._counts+=1,this._options.repeated?.(this.counts(),this,s),this.emit("repeated",this.counts(),this,s),i>0&&this.counts()>=i)return this._options.completed?.(this,this._transition),void this.emit("completed",this,this._transition);const{start:r,target:a}=s.options();switch(e){case t.XhTransitionRepeatMode.normal:s.start({start:r,target:a,completed:n}),this._direction=t.XhTransitionRepeatDirection.forward;break;case t.XhTransitionRepeatMode.alternate:{const i=this.direction();switch(s.start({start:a,target:r,completed:n}),i){case t.XhTransitionRepeatDirection.forward:this._direction=t.XhTransitionRepeatDirection.backward;break;case t.XhTransitionRepeatDirection.backward:this._direction=t.XhTransitionRepeatDirection.forward}break}}};return this._transition.start({completed:n}),this._status=t.XhTransitionWorkStatus.working,this._options.started?.(this,this._transition),this.emit("started",this,this._transition),this}pause(){return this.status()!==t.XhTransitionWorkStatus.working||(this._transition.pause(),this._status=t.XhTransitionWorkStatus.paused,this._options.paused?.(this,this._transition),this.emit("paused",this,this._transition)),this}resume(){return this.status()!==t.XhTransitionWorkStatus.paused||(this._transition.resume(),this._status=t.XhTransitionWorkStatus.working,this._options.resumed?.(this,this._transition),this.emit("resumed",this,this._transition)),this}stop(){return this._transition.stop(),this.reset(),this._options.stopped?.(this,this._transition),this.emit("stopped",this,this._transition),this}destroy(){this.status()!==t.XhTransitionWorkStatus.free&&this.stop(),this.clearEvents()}reset(){this._status=t.XhTransitionWorkStatus.free,this._counts=0,this._direction=t.XhTransitionRepeatDirection.forward}},t.XhTransitionTimer=T,t.default=X,t.fps2ms=m,Object.defineProperty(t,"__esModule",{value:!0})}));

lib/esm/index.d.ts

 import XhTransition from "./transition.js";
 import XhTransitionTimer from "./timer.js";
 import XhTransitionRepeater from "./repeater.js";
+import XhTransitionEmitter from "./emitter.js";
 export * from "./types.js";
 export * from "./config.js";
 export * from "./utils.js";
-export { XhTransition as default, XhTransition, XhTransitionTimer, XhTransitionRepeater };
+export { XhTransition as default, XhTransition, XhTransitionTimer, XhTransitionRepeater, XhTransitionEmitter };

lib/esm/index.js

@@ -1,1 +0,1 @@
-export{default as XhTransition,default}from"./transition.js";export{default as XhTransitionTimer}from"./timer.js";export{default as XhTransitionRepeater}from"./repeater.js";export{XhTransitionPresetBezier,XhTransitionRepeatDirection,XhTransitionRepeatMode,XhTransitionWorkStatus}from"./types.js";export{XhDefaultTransitionCompatibleFps,XhDefaultTransitionDelay,XhDefaultTransitionDuration,XhDefaultTransitionFps,XhDefaultTransitionPreset,XhDefaultTransitionRepeatCount,XhDefaultTransitionRepeatMode,XhTransitionPresetBezierConfig}from"./config.js";export{fps2ms}from"./utils.js";import"bezier-easing";
+export{default as XhTransition,default}from"./transition.js";export{default as XhTransitionTimer}from"./timer.js";export{default as XhTransitionRepeater}from"./repeater.js";export{default as XhTransitionEmitter}from"./emitter.js";export{XhTransitionPresetBezier,XhTransitionRepeatDirection,XhTransitionRepeatMode,XhTransitionWorkStatus}from"./types.js";export{XhDefaultTransitionCompatibleFps,XhDefaultTransitionDelay,XhDefaultTransitionDuration,XhDefaultTransitionFps,XhDefaultTransitionPreset,XhDefaultTransitionRepeatCount,XhDefaultTransitionRepeatMode,XhTransitionPresetBezierConfig}from"./config.js";export{fps2ms}from"./utils.js";import"bezier-easing";import"nanoevents";

lib/esm/repeater.d.ts

@@ -1,2 +0,3 @@
-import { IXhTransitionRepeaterOptions, XhTransitionRepeatDirection, XhTransitionWorkStatus } from "./types.js";
+import { IXhTransitionRepeaterEvents, IXhTransitionRepeaterOptions, XhTransitionRepeatDirection, XhTransitionWorkStatus } from "./types.js";
+import XhTransitionEmitter from "./emitter.js";
 import XhTransition from "./transition.js";
@@ -9,3 +10,3 @@ /**
  */
-declare class XhTransitionRepeater {
+declare class XhTransitionRepeater extends XhTransitionEmitter<IXhTransitionRepeaterEvents> {
     /**
@@ -58,3 +59,3 @@ * 过渡动画实例
      * @param [options]   配置项
-     * @returns {IXhTransitionRepeaterOptions}    配置项
+     * @returns           配置项
      */
@@ -65,3 +66,3 @@ /**
      * @param [options]   配置项
-     * @returns {IXhTransitionRepeaterOptions}    配置项
+     * @returns           配置项
      */
@@ -72,3 +73,3 @@ options(options?: IXhTransitionRepeaterOptions): IXhTransitionRepeaterOptions;
      *
-     * @returns {XhTransitionWorkStatus}    运行状态
+     * @returns   运行状态
      */
@@ -78,3 +79,3 @@ /**
      *
-     * @returns {XhTransitionWorkStatus}    运行状态
+     * @returns   运行状态
      */
@@ -85,3 +86,3 @@ status(): XhTransitionWorkStatus;
      *
-     * @returns {number}    已播放次数
+     * @returns   已播放次数
      */
@@ -91,3 +92,3 @@ /**
      *
-     * @returns {number}    已播放次数
+     * @returns   已播放次数
      */
@@ -98,3 +99,3 @@ counts(): number;
      *
-     * @returns {XhTransitionRepeatDirection}   当前播放方向
+     * @returns   当前播放方向
      */
@@ -104,3 +105,3 @@ /**
      *
-     * @returns {XhTransitionRepeatDirection}   当前播放方向
+     * @returns   当前播放方向
      */
@@ -111,4 +112,4 @@ direction(): XhTransitionRepeatDirection;
      *
-     * @param [options]                   配置项
-     * @returns {XhTransitionRepeater}    重复器实例
+     * @param [options]   配置项
+     * @returns           重复器实例
      */
@@ -118,4 +119,4 @@ /**
      *
-     * @param [options]                   配置项
-     * @returns {XhTransitionRepeater}    重复器实例
+     * @param [options]   配置项
+     * @returns           重复器实例
      */
@@ -126,3 +127,3 @@ start(options?: IXhTransitionRepeaterOptions): XhTransitionRepeater;
      *
-     * @returns {XhTransitionRepeater}    重复器实例
+     * @returns   重复器实例
      */
@@ -132,3 +133,3 @@ /**
      *
-     * @returns {XhTransitionRepeater}    重复器实例
+     * @returns   重复器实例
      */
@@ -139,3 +140,3 @@ pause(): XhTransitionRepeater;
      *
-     * @returns {XhTransitionRepeater}    重复器实例
+     * @returns   重复器实例
      */
@@ -145,3 +146,3 @@ /**
      *
-     * @returns {XhTransitionRepeater}    重复器实例
+     * @returns   重复器实例
      */
@@ -152,3 +153,3 @@ resume(): XhTransitionRepeater;
      *
-     * @returns {XhTransitionRepeater}    重复器实例
+     * @returns   重复器实例
      */
@@ -158,6 +159,17 @@ /**
      *
-     * @returns {XhTransitionRepeater}    重复器实例
+     * @returns   重复器实例
      */
     stop(): XhTransitionRepeater;
     /**
+     * 销毁重复器实例
+     *
+     * @since 0.0.17
+     */
+    /**
+     * 销毁重复器实例
+     *
+     * @since 0.0.17
+     */
+    destroy(): void;
+    /**
      * 重置重复器数据
@@ -164,0 +176,0 @@ *

lib/esm/repeater.js

@@ -1,1 +0,1 @@
-import{XhTransitionWorkStatus as t,XhTransitionRepeatDirection as s,XhTransitionRepeatMode as i}from"./types.js";import{XhDefaultTransitionRepeatCount as r,XhDefaultTransitionRepeatMode as o}from"./config.js";class n{_transition;_options;_status=t.free;_counts=0;_direction=s.forward;constructor(t,s){this._transition=t,this._options=s??{}}options(t){return null!=t&&(this._options=Object.assign({},this._options,t)),this._options}status(){return this._status}counts(){return this._counts}direction(){return this._direction}start(n){this.status()!==t.free&&this.stop();const{count:e=r,mode:a=o}=this.options(n),h=t=>{if(this._counts+=1,this._options.repeated?.(this.counts(),this,t),e>0&&this.counts()>=e)return;const{start:r,target:o}=t.options();switch(a){case i.normal:t.start({start:r,target:o,completed:h}),this._direction=s.forward;break;case i.alternate:{const i=this.direction();switch(t.start({start:o,target:r,completed:h}),i){case s.forward:this._direction=s.backward;break;case s.backward:this._direction=s.forward}break}}};return this._transition.start({completed:h}),this._status=t.working,this._options.started?.(this,this._transition),this}pause(){return this.status()!==t.working||(this._transition.pause(),this._status=t.paused,this._options.paused?.(this,this._transition)),this}resume(){return this.status()!==t.paused||(this._transition.resume(),this._status=t.working,this._options.resumed?.(this,this._transition)),this}stop(){return this._transition.stop(),this.reset(),this._options.stopped?.(this,this._transition),this}reset(){this._status=t.free,this._counts=0,this._direction=s.forward}}export{n as default};
+import{XhTransitionWorkStatus as t,XhTransitionRepeatDirection as s,XhTransitionRepeatMode as i}from"./types.js";import{XhDefaultTransitionRepeatCount as r,XhDefaultTransitionRepeatMode as o}from"./config.js";import e from"./emitter.js";import"nanoevents";class n extends e{_transition;_options;_status=t.free;_counts=0;_direction=s.forward;constructor(t,s){super(),this._transition=t,this._options=s??{}}options(t){return null!=t&&(this._options=Object.assign({},this._options,t)),this._options}status(){return this._status}counts(){return this._counts}direction(){return this._direction}start(e){this.status()!==t.free&&this.stop();const{count:n=r,mode:h=o}=this.options(e),a=t=>{if(this._counts+=1,this._options.repeated?.(this.counts(),this,t),this.emit("repeated",this.counts(),this,t),n>0&&this.counts()>=n)return this._options.completed?.(this,this._transition),void this.emit("completed",this,this._transition);const{start:r,target:o}=t.options();switch(h){case i.normal:t.start({start:r,target:o,completed:a}),this._direction=s.forward;break;case i.alternate:{const i=this.direction();switch(t.start({start:o,target:r,completed:a}),i){case s.forward:this._direction=s.backward;break;case s.backward:this._direction=s.forward}break}}};return this._transition.start({completed:a}),this._status=t.working,this._options.started?.(this,this._transition),this.emit("started",this,this._transition),this}pause(){return this.status()!==t.working||(this._transition.pause(),this._status=t.paused,this._options.paused?.(this,this._transition),this.emit("paused",this,this._transition)),this}resume(){return this.status()!==t.paused||(this._transition.resume(),this._status=t.working,this._options.resumed?.(this,this._transition),this.emit("resumed",this,this._transition)),this}stop(){return this._transition.stop(),this.reset(),this._options.stopped?.(this,this._transition),this.emit("stopped",this,this._transition),this}destroy(){this.status()!==t.free&&this.stop(),this.clearEvents()}reset(){this._status=t.free,this._counts=0,this._direction=s.forward}}export{n as default};

lib/esm/timer.d.ts

@@ -48,3 +48,3 @@ import { NullableNumber, XhTransitionTimerCallback } from "./types.js";
      *
-     * @returns {NullableNumber}    定时器id
+     * @returns   定时器id
      */
@@ -54,3 +54,3 @@ /**
      *
-     * @returns {NullableNumber}    定时器id
+     * @returns   定时器id
      */
@@ -61,3 +61,3 @@ id(): NullableNumber;
      *
-     * @returns {XhTransitionTimer}   定时器实例
+     * @returns   定时器实例
      */
@@ -67,3 +67,3 @@ /**
      *
-     * @returns {XhTransitionTimer}   定时器实例
+     * @returns   定时器实例
      */
@@ -74,3 +74,3 @@ start(): XhTransitionTimer;
      *
-     * @returns {XhTransitionTimer}   定时器实例
+     * @returns   定时器实例
      */
@@ -80,3 +80,3 @@ /**
      *
-     * @returns {XhTransitionTimer}   定时器实例
+     * @returns   定时器实例
      */
@@ -99,3 +99,3 @@ stop(): XhTransitionTimer;
      * @private
-     * @returns {boolean}   是否支持
+     * @returns   是否支持AF
      */
@@ -106,3 +106,3 @@ /**
      * @private
-     * @returns {boolean}   是否支持
+     * @returns   是否支持AF
      */
@@ -114,3 +114,3 @@ private supportAnimationFrame;
      * @private
-     * @returns {boolean}   是否使用
+     * @returns   是否使用AF
      */
@@ -121,3 +121,3 @@ /**
      * @private
-     * @returns {boolean}   是否使用
+     * @returns   是否使用AF
      */
@@ -124,0 +124,0 @@ private useAnimationFrame;

lib/esm/transition.d.ts

@@ -1,2 +0,3 @@
-import { IXhTransitionOptions, XhTransitionValueCallback, XhTransitionWorkStatus } from "./types.js";
+import { IXhTransitionEvents, IXhTransitionOptions, XhTransitionValueCallback, XhTransitionWorkStatus } from "./types.js";
+import XhTransitionEmitter from "./emitter.js";
 /**
@@ -7,3 +8,3 @@ * 贝塞尔曲线过渡动画
  */
-declare class XhTransition {
+declare class XhTransition extends XhTransitionEmitter<IXhTransitionEvents> {
     /**
@@ -87,3 +88,3 @@ * 配置项
      * @param [options]   配置项
-     * @returns {IXhTransitionOptions}    配置项
+     * @returns           配置项
      */
@@ -95,3 +96,3 @@ /**
      * @param [options]   配置项
-     * @returns {IXhTransitionOptions}    配置项
+     * @returns           配置项
      */
@@ -102,3 +103,3 @@ options(options?: IXhTransitionOptions): IXhTransitionOptions;
      *
-     * @returns {XhTransitionWorkStatus}    运行状态
+     * @returns   运行状态
      */
@@ -108,3 +109,3 @@ /**
      *
-     * @returns {XhTransitionWorkStatus}    运行状态
+     * @returns   运行状态
      */
@@ -116,3 +117,3 @@ status(): XhTransitionWorkStatus;
      * @since 0.0.10
-     * @returns {number}    当前时间进度
+     * @returns   当前时间进度
      */
@@ -123,3 +124,3 @@ /**
      * @since 0.0.10
-     * @returns {number}    当前时间进度
+     * @returns   当前时间进度
      */
@@ -131,3 +132,3 @@ progress(): number;
      * @since 0.0.10
-     * @returns {number}    当前值
+     * @returns   当前值
      */
@@ -138,3 +139,3 @@ /**
      * @since 0.0.10
-     * @returns {number}    当前值
+     * @returns   当前值
      */
@@ -145,4 +146,4 @@ value(): number;
      *
-     * @param [options]           配置项
-     * @returns {XhTransition}    过渡动画实例
+     * @param [options]   配置项
+     * @returns           过渡动画实例
      */
@@ -152,4 +153,4 @@ /**
      *
-     * @param [options]           配置项
-     * @returns {XhTransition}    过渡动画实例
+     * @param [options]   配置项
+     * @returns           过渡动画实例
      */
@@ -160,3 +161,3 @@ start(options?: IXhTransitionOptions): XhTransition;
      *
-     * @returns {XhTransition}    过渡动画实例
+     * @returns   过渡动画实例
      */
@@ -166,3 +167,3 @@ /**
      *
-     * @returns {XhTransition}    过渡动画实例
+     * @returns   过渡动画实例
      */
@@ -173,3 +174,3 @@ pause(): XhTransition;
      *
-     * @returns {XhTransition}    过渡动画实例
+     * @returns   过渡动画实例
      */
@@ -179,3 +180,3 @@ /**
      *
-     * @returns {XhTransition}    过渡动画实例
+     * @returns   过渡动画实例
      */
@@ -186,3 +187,3 @@ resume(): XhTransition;
      *
-     * @returns {XhTransition}    过渡动画实例
+     * @returns   过渡动画实例
      */
@@ -192,6 +193,17 @@ /**
      *
-     * @returns {XhTransition}    过渡动画实例
+     * @returns   过渡动画实例
      */
     stop(): XhTransition;
     /**
+     * 销毁动画实例
+     *
+     * @since 0.0.17
+     */
+    /**
+     * 销毁动画实例
+     *
+     * @since 0.0.17
+     */
+    destroy(): void;
+    /**
      * 重置动画数据
@@ -198,0 +210,0 @@ *

lib/esm/transition.js

@@ -1,1 +0,1 @@
-import{XhTransitionWorkStatus as t}from"./types.js";import{XhTransitionPresetBezierConfig as s,XhDefaultTransitionDuration as i,XhDefaultTransitionPreset as e,XhDefaultTransitionDelay as r,XhDefaultTransitionFps as o}from"./config.js";import h from"./timer.js";import a from"bezier-easing";import"./utils.js";class n{_options;_callback;_status=t.free;_progress=0;_bezier=null;_timer=null;_last=0;_pauses=0;constructor(t,s){"function"==typeof t?(this._options={},this._callback=t):(this._options=t,this._callback=s)}options(t){return null!=t&&(this._options=Object.assign({},this._options,t)),this._options}status(){return this._status}progress(){return this._progress}value(){const{start:t=0,target:s=0}=this._options;if(null==this._bezier)throw new Error("需要先调用XhTransition#start方法以创建BezierEasing实例！");return this._bezier(this.progress())*(s-t)+t}start(n){this.status()!==t.free&&this.stop();const{duration:_=i,preset:p=e,bezier:u,delay:l=r,fps:m=o}=this.options(n);this._bezier=a(...u??s[p]);const c=Date.now()+l;return this._timer=new h(m,(()=>{const t=(Date.now()-c-this._pauses)/_;this._progress=Math.max(0,Math.min(1,t)),this._callback(this.value(),this),this.progress()>=1&&(this.stop(),this._options.completed?.(this))})).start(),this._status=t.working,this._options.started?.(this),this}pause(){return this.status()!==t.working||null==this._timer||(this._timer.stop(),this._last=Date.now(),this._status=t.paused,this._options.paused?.(this)),this}resume(){return this.status()!==t.paused||null==this._timer||(this._last>0&&(this._pauses+=Date.now()-this._last),this._timer.start(),this._status=t.working,this._options.resumed?.(this)),this}stop(){return null!=this._timer&&(this._timer.stop(),this._timer=null),this.reset(),this._options.stopped?.(this),this}reset(){this._status=t.free,this._progress=0,this._bezier=null,this._last=0,this._pauses=0}}export{n as default};
+import{XhTransitionWorkStatus as t}from"./types.js";import{XhTransitionPresetBezierConfig as s,XhDefaultTransitionDuration as i,XhDefaultTransitionPreset as e,XhDefaultTransitionDelay as r,XhDefaultTransitionFps as o}from"./config.js";import h from"./emitter.js";import a from"./timer.js";import n from"bezier-easing";import"nanoevents";import"./utils.js";class p extends h{_options;_callback;_status=t.free;_progress=0;_bezier=null;_timer=null;_last=0;_pauses=0;constructor(t,s){super(),"function"==typeof t?(this._options={},this._callback=t):(this._options=t,this._callback=s)}options(t){return null!=t&&(this._options=Object.assign({},this._options,t)),this._options}status(){return this._status}progress(){return this._progress}value(){const{start:t=0,target:s=0}=this._options;if(null==this._bezier)throw new Error("需要先调用XhTransition#start方法以创建BezierEasing实例！");return this._bezier(this.progress())*(s-t)+t}start(h){this.status()!==t.free&&this.stop();const{duration:p=i,preset:_=e,bezier:u,delay:l=r,fps:m=o}=this.options(h);this._bezier=n(...u??s[_]);const c=Date.now()+l;return this._timer=new a(m,(()=>{const t=(Date.now()-c-this._pauses)/p;this._progress=Math.max(0,Math.min(1,t)),this._callback(this.value(),this),this.progress()>=1&&(this.stop(),this._options.completed?.(this),this.emit("completed",this))})).start(),this._status=t.working,this._options.started?.(this),this.emit("started",this),this}pause(){return this.status()!==t.working||null==this._timer||(this._timer.stop(),this._last=Date.now(),this._status=t.paused,this._options.paused?.(this),this.emit("paused",this)),this}resume(){return this.status()!==t.paused||null==this._timer||(this._last>0&&(this._pauses+=Date.now()-this._last),this._timer.start(),this._status=t.working,this._options.resumed?.(this),this.emit("resumed",this)),this}stop(){return null!=this._timer&&(this._timer.stop(),this._timer=null),this.reset(),this._options.stopped?.(this),this.emit("stopped",this),this}destroy(){this.status()!==t.free&&this.stop(),this.clearEvents()}reset(){this._status=t.free,this._progress=0,this._bezier=null,this._last=0,this._pauses=0}}export{p as default};

lib/esm/types.d.ts

@@ -44,3 +44,3 @@ import XhTransition from "./transition.js";
  */
-interface IXhTransitionOptions {
+interface IXhTransitionOptions extends IXhTransitionEvents {
     /**
@@ -74,20 +74,27 @@ * 起始值
     readonly fps?: number;
+}
+/**
+ * 过渡动画事件
+ *
+ * @since 0.0.17
+ */
+interface IXhTransitionEvents {
     /**
-     * 动画开始回调
+     * 动画开始
      */
     readonly started?: XhTransitionCommonCallback;
     /**
-     * 动画暂停回调
+     * 动画暂停
      */
     readonly paused?: XhTransitionCommonCallback;
     /**
-     * 动画继续回调
+     * 动画继续
      */
     readonly resumed?: XhTransitionCommonCallback;
     /**
-     * 动画停止回调
+     * 动画停止
      */
     readonly stopped?: XhTransitionCommonCallback;
     /**
-     * 动画完成回调
+     * 动画完成
      *
@@ -132,3 +139,3 @@ * @since 0.0.10
  */
-interface IXhTransitionRepeaterOptions {
+interface IXhTransitionRepeaterOptions extends IXhTransitionRepeaterEvents {
     /**
@@ -142,24 +149,31 @@ * 重复次数 (<= 0 表示无限重复)
     readonly mode?: XhTransitionRepeatMode;
+}
+/**
+ * 过渡动画重复器事件
+ *
+ * @since 0.0.17
+ */
+interface IXhTransitionRepeaterEvents {
     /**
-     * 动画开始回调
+     * 动画开始
      */
     readonly started?: XhTransitionRepeaterCommonCallback;
     /**
-     * 动画暂停回调
+     * 动画暂停
      */
     readonly paused?: XhTransitionRepeaterCommonCallback;
     /**
-     * 动画继续回调
+     * 动画继续
      */
     readonly resumed?: XhTransitionRepeaterCommonCallback;
     /**
-     * 动画停止回调
+     * 动画停止
      */
     readonly stopped?: XhTransitionRepeaterCommonCallback;
     /**
-     * 动画重复回调
+     * 动画重复
      */
     readonly repeated?: XhTransitionRepeaterCountCallback;
     /**
-     * 动画完成回调
+     * 动画完成
      */
@@ -210,2 +224,2 @@ readonly completed?: XhTransitionRepeaterCommonCallback;
 }
-export { NullableBoolean, NullableNumber, NullableString, XhTransitionBezier, XhTransitionPresetBezier, XhTransitionPresetBezierConfigType, IXhTransitionOptions, XhTransitionCommonCallback, XhTransitionValueCallback, XhTransitionWorkStatus, XhTransitionTimerCallback, IXhTransitionRepeaterOptions, XhTransitionRepeaterCommonCallback, XhTransitionRepeaterCountCallback, XhTransitionRepeatMode, XhTransitionRepeatDirection };
+export { NullableBoolean, NullableNumber, NullableString, XhTransitionBezier, XhTransitionPresetBezier, XhTransitionPresetBezierConfigType, IXhTransitionOptions, IXhTransitionEvents, XhTransitionCommonCallback, XhTransitionValueCallback, XhTransitionWorkStatus, XhTransitionTimerCallback, IXhTransitionRepeaterOptions, IXhTransitionRepeaterEvents, XhTransitionRepeaterCommonCallback, XhTransitionRepeaterCountCallback, XhTransitionRepeatMode, XhTransitionRepeatDirection };

lib/esm/utils.d.ts

 /**
  * 帧率转毫秒
  *
- * @param fps           帧率
- * @returns {number}    毫秒
+ * @param fps   帧率
+ * @returns     毫秒
  */
 declare function fps2ms(fps: number): number;
 export { fps2ms };

package.json

 {
   "name": "xiaohe-transition",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "🏀 一个简单易用的贝塞尔曲线过渡动画工具",
@@ -10,3 +10,4 @@ "scripts": {
   "dependencies": {
-    "bezier-easing": "^2.1.0"
+    "bezier-easing": "^2.1.0",
+    "nanoevents": "^8.0.0"
   },
@@ -13,0 +14,0 @@ "devDependencies": {

README.md

@@ -65,2 +65,9 @@ <div align="center">
 });
+
+// 如果是单页应用，请在合适的时机（如：页面销毁生命周期等）销毁动画，以避免内存泄露
+// @since 0.0.17
+transition.destroy();
+
+// 0.0.17 之前的版本调用 transition.stop() 即可
+// transition.stop();
 ```
@@ -142,2 +149,28 @@
 
+#### 事件
+
+> 从 `0.0.17` 开始，配置项中的 `回调函数` 均支持 `on`、`once` 事件监听，下面以 `started` 事件举例
+
+``` javascript
+// 监听started事件
+transition.on("started", (instance) => {
+  console.log("动画开始~");
+});
+
+// 单次监听started事件，started事件触发一次后将自动取消监听
+transition.once("started", (instance) => {
+  console.log("动画开始~");
+});
+
+// 手动取消监听started事件
+const unbind = transition.on("started", (instance) => {
+  console.log("动画开始~");
+});
+// 调用on、once返回的unbind方法即可取消监听
+unbind();
+
+// 取消监听所有事件
+transition.clearEvents();
+```
+
 #### 应用场景
@@ -240,3 +273,3 @@
 ``` typescript
-interface IXhTransitionOptions {
+interface IXhTransitionOptions extends IXhTransitionEvents {
   /**
@@ -270,20 +303,28 @@ * 起始值
   readonly fps?: number; // 默认值: -1 (当不支持requestAnimationFrame时为默认值为30)
+}
+
+/**
+ * 过渡动画事件
+ *
+ * @since 0.0.17
+ */
+interface IXhTransitionEvents {
   /**
-   * 动画开始回调
+   * 动画开始
    */
   readonly started?: XhTransitionCommonCallback;
   /**
-   * 动画暂停回调
+   * 动画暂停
    */
   readonly paused?: XhTransitionCommonCallback;
   /**
-   * 动画继续回调
+   * 动画继续
    */
   readonly resumed?: XhTransitionCommonCallback;
   /**
-   * 动画停止回调
+   * 动画停止
    */
   readonly stopped?: XhTransitionCommonCallback;
   /**
-   * 动画完成回调
+   * 动画完成
    *
@@ -374,4 +415,6 @@ * @since 0.0.10
 
-- 本插件基于 [bezier-easing](https://github.com/gre/bezier-easing) 实现
+- [bezier-easing](https://github.com/gre/bezier-easing) cubic-bezier implementation for your JavaScript animation easings.
 
+- [nanoevents](https://github.com/ai/nanoevents) Simple and tiny event emitter library for JavaScript.
+
 ### 🐶 讨论交流
@@ -378,0 +421,0 @@

No alert changes

Improved metrics

Total package byte prevSize

43409

increased by11.01%

Number of package files

20

increased by11.11%

Lines of code

844

increased by8.48%

Number of lines in readme file

425

increased by11.26%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addednanoevents@^8.0.0

• + Addednanoevents@8.0.0(transitive)