anets/dist/Anets.min.js

JavaScript library about PPT complex animation

/*! Anets 0.2.5 - MIT | git@github.com:henryfordstick/anets.git */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("html2canvas")):"function"==typeof define&&define.amd?define(["html2canvas"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Anets=t(e.html2canvas)}(this,function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s,u,m,d,_,a=t(e);function i(e,r,o,c){return new(o=o||Promise)(function(a,t){function i(e){try{s(c.next(e))}catch(e){t(e)}}function n(e){try{s(c.throw(e))}catch(e){t(e)}}function s(e){var t;e.done?a(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(i,n)}s((c=c.apply(e,r||[])).next())})}function r(a,i){var n,s,r,o={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},e={next:t(0),throw:t(1),return:t(2)};return"function"==typeof Symbol&&(e[Symbol.iterator]=function(){return this}),e;function t(t){return function(e){return function(t){if(n)throw new TypeError("Generator is already executing.");for(;o;)try{if(n=1,s&&(r=2&t[0]?s.return:t[0]?s.throw||((r=s.return)&&r.call(s),0):s.next)&&!(r=r.call(s,t[1])).done)return r;switch(s=0,(t=r?[2&t[0],r.value]:t)[0]){case 0:case 1:r=t;break;case 4:return o.label++,{value:t[1],done:!1};case 5:o.label++,s=t[1],t=[0];continue;case 7:t=o.ops.pop(),o.trys.pop();continue;default:if(!(r=0<(r=o.trys).length&&r[r.length-1])&&(6===t[0]||2===t[0])){o=0;continue}if(3===t[0]&&(!r||t[1]>r[0]&&t[1]<r[3])){o.label=t[1];break}if(6===t[0]&&o.label<r[1]){o.label=r[1],r=t;break}if(r&&o.label<r[2]){o.label=r[2],o.ops.push(t);break}r[2]&&o.ops.pop(),o.trys.pop();continue}t=i.call(a,o)}catch(e){t=[6,e],s=0}finally{n=r=0}if(5&t[0])throw t[1];return{value:t[0]?t[1]:void 0,done:!0}}([t,e])}}}(e=s=s||{}).WIPE="wipe",e.BARN="barn",e.CHECKERBOARD="checkerboard",e.BLINDS="blinds",e.DISSOLVE="dissolve",e.RANDOMBAR="randombar",e.STRIPS="strips",e.WEDGE="wedge",e.WHEEL="wheel",e.BOX="box",e.CIRCLE="circle",e.DIAMOND="diamond",e.PLUS="plus",(e=u=u||{}).IN="in",e.OUT="out",e.LEFT="left",e.RIGHT="right",e.TOP="top",e.BOTTOM="bottom",e.UP="up",e.DOWN="down",e.HORIZONTAL="horizontal",e.VERTICAL="vertical",e.CENTER="center",e.ONE="one",e.TWO="two",e.THREE="three",e.FOUR="four",e.EIGHT="eight",e.SPOKES="spokes",(e=m=m||{}).IN="in",e.ACTION="action",e.OUT="out",(e=d=d||{}).PI0="0",e.PI90="90",e.PI180="180",e.PI270="270",(e=_=_||{}).maskIn="destination-in",e.maskOut="destination-out";var f="rgba(255,255,255,1)",o="anets-item",c=Math.pow,l=Math.max,p=Math.random,h=Math.floor;function n(e){var t=e.parentNode;null!=t&&t.removeChild(e)}function v(e){var t=e.name,a=e.options,e=e.anets;null!==(t=a["on"+t.charAt(0).toUpperCase()+t.substr(1)])&&void 0!==t&&t.call(null!=e?e:I,a)}function y(e){return null!==(e=null===(e=String(e).split(".")[1])||void 0===e?void 0:e.length)&&void 0!==e?e:0}function C(e){return~~String(e).replace(".","")}function T(e){for(var t=new Array(e).fill(0).map(function(e,t){return t}),a=t.length-1;0<a;--a){var i=h(p()*(a+1)),n=[t[i],t[a]];t[a]=n[0],t[i]=n[1]}return t}var I=(g.start=function(e,t){return new g(e,t)},g.prototype._init=function(){return i(this,void 0,void 0,function(){var a,i,n,s;return r(this,function(e){switch(e.label){case 0:return(i=this._options,n=i.item,a=i.sound,i=i.CanvasDOM,v({name:"start",options:this._options}),(t=document.createElement("style")).innerHTML=".".concat(o," {display: none}"),t.setAttribute("id","anetStyle"),document.head.appendChild(t),this._playAudio(a),this._currentEl=this._getCurrentElement(n),n=this,null==i)?[3,1]:(s=i,[3,3]);case 1:return[4,this._htmlToCanvas()];case 2:s=e.sent(),e.label=3;case 3:return n._canvas=s,this._performSyncAnimation(),[2]}var t})})},g.prototype._getCurrentElement=function(e){if(!e||"string"!==("object"!=(a=typeof(t=e))?a:Object.prototype.toString.call(t).replace(/^\[object (\S+)\]$/,"$1").toLocaleLowerCase())||""===e)throw new Error("Incorrect input of target element!");var t,a,e=document.querySelector(e);if(!e)throw new Error("The animation element was passed in incorrectly");return e},g.prototype._playAudio=function(e){var t;""!==(e=void 0===e?"":e)&&(t=null!==(t=this._options.audioElement)&&void 0!==t?t:"ani-audio",(t=document.querySelector("#".concat(t))).setAttribute("src",e.replace(".wav",".mp3")),t.setAttribute("loop","true"),t.play())},g.prototype._createCanvas=function(e,t){var a=document.createElement("canvas");return a.width=e,a.height=t,a},g.prototype._createBaseCanvas=function(e,t){e=this._createCanvas(e,t),t=e.getContext("2d");return t.fillStyle=f,{cvs:e,cvsCtx:t}},g.prototype._rotateBaseCanvas=function(e,t){var a=e.cvs,i=e.cvsCtx,n=a.width,s=a.height;switch(t){case d.PI90:i.rotate(.5*Math.PI),i.translate(0,-s);break;case d.PI180:i.rotate(Math.PI),i.translate(-n,-s);break;case d.PI270:i.rotate(1.5*Math.PI),i.translate(-n,0)}},g.prototype._currentToggleClassName=function(e){var t,a;this._currentEl&&(t=this._currentEl.children,a=e?"add":"remove",function(e,t,a){if(a||2===arguments.length)for(var i,n=0,s=t.length;n<s;n++)!i&&n in t||((i=i||Array.prototype.slice.call(t,0,n))[n]=t[n]);return e.concat(i||Array.prototype.slice.call(t))}([],t,!0).forEach(function(e){e.classList[a](o)}))},g.prototype._getFrameRate=function(e){var t,a,i=null!==(t=+(null===(a=e.duration)||void 0===a?void 0:a.replace("s","")))?t:.1;return e=1,a=i,i=y(t=60)+y(a),a=C(t)*C(a)/c(10,i),i=y(a)-y(e),C(e)/C(a)*Math.pow(10,i)},g.prototype._htmlToCanvas=function(){return i(this,void 0,void 0,function(){var t;return r(this,function(e){switch(e.label){case 0:if(!this._currentEl)throw new Error("");return t={logging:!0,allowTaint:!0,backgroundColor:null,useCORS:!0},[4,a.default(this._currentEl,t)];case 1:return[2,e.sent()]}})})},g.prototype._performSyncAnimation=function(){var e,t;this._canvas&&(t=(e=this._canvas).width,e=e.height,t=(this._baseCanvas=this._createBaseCanvas(t,e)).cvs,this._currentToggleClassName(!0),null!==(e=this._currentEl)&&void 0!==e&&e.appendChild(t),this._relevanceAnimation())},g.prototype._dealAniName=function(e){var t=e.name;if(!t)throw new Error("Please enter the animation type");var a=t.split(/([A-Z][a-z]+)/).filter(function(e){return e}),e=(a=a.map(function(e){return e.toUpperCase()}))[0],t=a[1],a=a.slice(2);if(!s[e])throw new Error("The animation name cannot be empty");return{name:s[e],aniType:m[t],direction:null==a?void 0:a.join("")}},g.prototype._clearRectCanvas=function(e){var t=e.cvs,a=e.cvsCtx,e=t.width,t=t.height;a.clearRect(-e,-t,2*e,2*t)},g.prototype._performBarAnimation=function(e){var t,a,i,n,s,r;this._canvas&&(t=(s=this._baseCanvas).cvs,a=s.cvsCtx,e.speed=(i=e.speed,n=e.size,s=c(10,l(y(i),y(n))),(i*s+n*s)/s),this._rafId=requestAnimationFrame(this._performBarAnimation.bind(this,e)),1<(r=e.aniType?e.speed:(i=1,n=e.speed,r=l(y(i),y(n)),s=c(10,r),r=((i*s-n*s)/s).toFixed(r),Number.parseFloat(r)))||r<0?this._exitAnets():(r=e.applySlice.call(this,e,r).cvs,a.save(),a.drawImage(this._canvas,0,0),a.scale(t.width/r.width,t.height/r.height),a.globalCompositeOperation=e.composite,a.drawImage(r,0,0),a.restore()))},g.prototype._relevanceAnimation=function(){var e=((n={})[s.WIPE]=this._wipeAnimation,n[s.BARN]=this._barnAnimation,n[s.CHECKERBOARD]=this._checkerboardAnimation,n[s.BLINDS]=this._blindsAnimation,n[s.DISSOLVE]=this._dissolveAnimation,n[s.RANDOMBAR]=this._randomBarAnimation,n[s.STRIPS]=this._stripsAnimation,n[s.WEDGE]=this._wedgeAnimation,n[s.WHEEL]=this._wheelAnimation,n[s.BOX]=this._boxAnimation,n[s.CIRCLE]=this._circleAnimation,n[s.DIAMOND]=this._diamondAnimation,n[s.PLUS]=this._plusAnimation,n),t=this._options.ani,a=this._dealAniName(t),i=a.name,n=a.aniType,a=a.direction,t=this._getFrameRate(t);null!==(i=e[i])&&void 0!==i&&i.call(this,{aniType:n,size:t,direction:a})},g.prototype._wipeAnimation=function(e){var t=e.aniType,a=e.size,i=e.direction,e=((e={})[u.LEFT]=d.PI0,e[u.TOP]=d.PI90,e[u.RIGHT]=d.PI180,e[u.BOTTOM]=d.PI270,e),t=t===m.IN,t={size:a,speed:0,aniType:t,angle:e[u[i]],composite:t?_.maskIn:_.maskOut,applySlice:this._applyWipeSlice,maskCanvas:this._createBaseCanvas(100,100),radios:0};this._rotateBaseCanvas(t.maskCanvas,t.angle),this._performBarAnimation(t)},g.prototype._applyWipeSlice=function(e){var t=e.maskCanvas,a=t.cvs,i=t.cvsCtx,n=a.width,a=a.height;return this._clearRectCanvas(t),i.fillRect(0,0,n*e.speed,a),t},g.prototype._barnAnimation=function(e){var t=e.aniType,a=e.size,i=e.direction,n=_.maskOut,s=_.maskIn,r=u.TOP,o=u.BOTTOM,c=u.CENTER,l=u.LEFT,p=u.RIGHT,h=d.PI0,v=d.PI90,e=((e={})[r+o+c]=[n,!1,v],e[c+r+o]=[s,!0,v],e[l+p+c]=[n,!1,h],e[c+l+p]=[s,!0,h],e),a={size:a,speed:0,angle:d.PI0,composite:s,applySlice:this._applyBarnSlice,maskCanvas:this._createBaseCanvas(100,100)},i=e[i.toLocaleLowerCase()];a.composite=i[0],a.aniType=i[1],a.angle=i[2],t===m.OUT&&(a.composite=a.composite===s?n:s),this._rotateBaseCanvas(a.maskCanvas,a.angle),this._performBarAnimation(a)},g.prototype._applyBarnSlice=function(e,t){var a=e.maskCanvas,i=a.cvs,n=a.cvsCtx,e=i.width,i=i.height;return this._clearRectCanvas(a),n.fillRect(e/2-(t*=e)/2,0,t,i),a},g.prototype._checkerboardAnimation=function(e){var t=e.aniType,a=e.size,i=e.direction,e=((e={})[u.RIGHT]=d.PI90,e[u.BOTTOM]=d.PI180,e),i={size:a,speed:0,aniType:t===m.IN,angle:e[u[i]],ratioX:6,ratioY:6,composite:_.maskIn,applySlice:this._applyBlindSlice};i.maskCanvas=this._processBlindsPieces(i),this._performBarAnimation(i)},g.prototype._blindsAnimation=function(e){var t=e.aniType,a=e.size,i=e.direction,e=((e={})[u.BOTTOM]=d.PI90,e[u.RIGHT]=d.PI0,e),i={size:a,speed:0,aniType:t===m.IN,angle:e[u[i]],ratioX:6,ratioY:1,composite:_.maskIn,applySlice:this._applyBlindSlice};i.maskCanvas=this._processBlindsPieces(i),this._performBarAnimation(i)},g.prototype._applyBlindSlice=function(e,t){var a=e.maskCanvas,i=e.ratioX,n=e.ratioY,s=a.baseCanvas,r=a.sliceCanvas,e=a.foilCanvas;this._clearRectCanvas(s);var o=r.cvs,a=r.cvsCtx,c=o.width,r=o.height;a.clearRect(0,0,c,r),a.fillStyle=f,a.fillRect(0,0,t*c,r);var l=e.cvsCtx,p=e.cvs;l.clearRect(0,0,p.width,p.height);for(var h=0;h<i+1;++h)l.drawImage(o,c*h,0);for(var v=s.cvsCtx,u=0;u<n;++u)v.drawImage(p,u%2?-c/2:0,u*p.height);return s},g.prototype._processBlindsPieces=function(e){var t=e.angle,a=e.ratioX,i=e.ratioY,n=this._createBaseCanvas(102,102),e=n.cvs;this._rotateBaseCanvas(n,t);a=Math.ceil(e.width/a),i=Math.ceil(e.height/i);return{baseCanvas:n,sliceCanvas:this._createBaseCanvas(a,i),foilCanvas:this._createBaseCanvas(e.width+a,i)}},g.prototype._dissolveAnimation=function(e){var t=e.aniType,a=e.size,i=_.maskIn,n=_.maskOut,t=((e={})[m.IN]=!0,e[m.OUT]=!1,e)[m[t]],t={size:a,speed:0,composite:t?i:n,aniType:t,applySlice:this._applyDissolveSlice};t.maskCanvas=this._processDissolvePieces(),this._performBarAnimation(t)},g.prototype._applyDissolveSlice=function(e){var t=e.maskCanvas,a=t.baseCanvas,i=t.randomList,n=t.canvasList,s=t.randomArr,r=a.cvsCtx,o=Math.floor;this._clearRectCanvas(a);for(var c=o(100*(c=e.speed)),l=0;l<i.length;++l){var p=i[l],h=n[l].cvsCtx;h.clearRect(0,0,20,20),h.fillStyle=f;for(var v=0;v<c;++v){var u=p[v];h.fillRect(2*o(u/10),u%10*2,2,2)}}for(l=0;l<5;++l)for(var m=20*l,v=0;v<5;++v)r.drawImage(n[s[5*l+v]].cvs,m,20*v);return a},g.prototype._processDissolvePieces=function(){for(var e=this._createBaseCanvas(100,100),t=[],a=[],i=0;i<5;++i)t.push(T(100)),a.push(this._createBaseCanvas(20,20));for(var n=T(25),s=0;s<n.length;++s)n[s]%=5;return{baseCanvas:e,randomList:t,canvasList:a,randomArr:n}},g.prototype._randomBarAnimation=function(e){var t=e.aniType,a=e.size,i=e.direction,n=_.maskIn,s=_.maskOut,e=((e={})[u.HORIZONTAL]=d.PI0,e[u.VERTICAL]=d.PI90,e),s=t===m.IN?n:s,s={size:a,speed:0,angle:e[u[i]],composite:s,applySlice:this._applyRandomBarSlice};s.maskCanvas=this._processRandomBarPieces(s),this._performBarAnimation(s)},g.prototype._applyRandomBarSlice=function(e){var t=e.maskCanvas,a=t.baseCanvas,i=t.randomArr,n=a.cvs,s=a.cvsCtx,t=Math.floor;this._clearRectCanvas(a);for(var r=t(100*(r=e.speed)),o=0;o<r;++o)s.fillRect(0,i[o],n.width,1);return a},g.prototype._processRandomBarPieces=function(e){var t=this._createBaseCanvas(100,100),a=T(100);return this._rotateBaseCanvas(t,e.angle),{baseCanvas:t,randomArr:a}},g.prototype._stripsAnimation=function(e){var t=e.aniType,a=e.size,i=e.direction,e=((e={})[u.LEFT+u.BOTTOM]=d.PI0,e[u.LEFT+u.TOP]=d.PI90,e[u.RIGHT+u.TOP]=d.PI180,e[u.RIGHT+u.BOTTOM]=d.PI270,e),i={size:a,speed:0,aniType:t===m.OUT,angle:e[i.toLocaleLowerCase()],composite:_.maskOut,applySlice:this._applyStripSlice};i.maskCanvas=this._processStripPieces(i),this._performBarAnimation(i)},g.prototype._applyStripSlice=function(e,t){var a=e.maskCanvas,e=a.baseCanvas,a=a.sliceCanvas;return this._clearRectCanvas(e),e.cvsCtx.drawImage(a.cvs,-192*(1-t),0),e},g.prototype._processStripPieces=function(e){var t=this._createBaseCanvas(96,96),a=this._createBaseCanvas(192,96),i=a.cvsCtx;i.fillRect(0,0,96,96),i.translate(96,0);for(var n=0;n<16;++n)i.fillRect(0,6*n,6*n,6);return this._rotateBaseCanvas(t,e.angle),{baseCanvas:t,sliceCanvas:a}},g.prototype._wedgeAnimation=function(e){var t=e.aniType,a=e.size,i=_.maskIn,n=_.maskOut,t=((e={})[m.IN]=!1,e[m.OUT]=!0,e)[m[t.toUpperCase()]],i={size:a,speed:0,aniType:t,composite:t?n:i,applySlice:this._applyWedgeSlice};i.maskCanvas=this._processWedgePieces(),this._performBarAnimation(i)},g.prototype._applyWedgeSlice=function(e){var t=e.maskCanvas,a=t.cvs,i=t.cvsCtx;this._clearRectCanvas(t);a=a.width,e=e.speed;return e*=Math.PI,i.save(),i.translate(a/2,a/2),i.beginPath(),i.moveTo(0,0),i.arc(0,0,a,-e,e,!1),i.lineTo(0,0),i.fill(),i.restore(),t},g.prototype._processWedgePieces=function(){var e=this._createBaseCanvas(100,100);return this._rotateBaseCanvas(e,d.PI270),e},g.prototype._wheelAnimation=function(e){var t=e.aniType,a=e.size,i=e.direction,n=u.ONE,s=u.TWO,r=u.THREE,o=u.FOUR,c=u.EIGHT,l=u.SPOKES,p=_.maskIn,e=_.maskOut,e={size:a,speed:0,angle:((a={})[n+l]=1,a[s+l]=2,a[r+l]=3,a[o+l]=4,a[c+l]=8,a)[i.toLocaleLowerCase()],aniType:!0,composite:t===m.IN?p:e,applySlice:this._applyWheelSlice};e.maskCanvas=this._processWheelPieces(),this._performBarAnimation(e)},g.prototype._applyWheelSlice=function(e,t){var a=e.maskCanvas,i=a.cvs,n=a.cvsCtx;this._clearRectCanvas(a);var s=i.width,r=e.angle,o=2*Math.PI/r;t*=o,n.save(),n.translate(s/2,s/2),n.beginPath();for(var c=0;c<r;++c){var l=c*o;n.moveTo(0,0),n.arc(0,0,s,l,l+t,!1),n.lineTo(0,0)}return n.fill(),n.restore(),a},g.prototype._processWheelPieces=function(){var e=this._createBaseCanvas(100,100);return this._rotateBaseCanvas(e,d.PI270),e},g.prototype._boxAnimation=function(e){var t=e.aniType,e={size:e.size,speed:0,aniType:t,composite:e.direction,applySlice:this._applyBoxSlice};e.maskCanvas=this._processShapePieces(e),this._performBarAnimation(e)},g.prototype._applyBoxSlice=function(e,t){var a=e.maskCanvas,i=a.cvs,n=a.cvsCtx;this._clearRectCanvas(a);e=i.width;return t*=i.width,n.fillRect(e=(e-t)/2,e,t,t),a},g.prototype._processShapePieces=function(e){var t=this._createBaseCanvas(100,100),a=_.maskIn,i=_.maskOut,n=((n={})[m.IN+u.IN]=[!1,i],n[m.IN+u.OUT]=[!0,a],n[m.OUT+u.IN]=[!0,i],n[m.OUT+u.OUT]=[!1,a],n)[m[e.aniType.toUpperCase()]+u[e.composite]];return e.aniType=n[0],e.composite=n[1],t},g.prototype._circleAnimation=function(e){var t=e.aniType,a=e.size,i=e.direction,n=Math.ceil,e=Math.sqrt,t={size:a,speed:0,aniType:t,composite:i,applySlice:this._applyCircleSlice};t.maskCanvas=this._processShapePieces(t);i=t.maskCanvas.cvs.width/2;t.radios=n(e(2*i*i)),this._performBarAnimation(t)},g.prototype._applyCircleSlice=function(e,t){var a=e.maskCanvas,i=a.cvs,n=a.cvsCtx;this._clearRectCanvas(a);i=i.width/2;return t*=e.radios,n.beginPath(),n.arc(i,i,t,0,2*Math.PI,!1),n.fill(),a},g.prototype._diamondAnimation=function(e){var t=e.aniType,a={size:e.size,speed:0,aniType:t,composite:e.direction,applySlice:this._applyDiamondSlice},t=a.maskCanvas=this._processShapePieces(a),e=t.cvs,t=t.cvsCtx,e=e.width/2;t.translate(e,e),this._performBarAnimation(a)},g.prototype._applyDiamondSlice=function(e,t){var a=e.maskCanvas,i=a.cvs,e=a.cvsCtx;return this._clearRectCanvas(a),t*=i.width,e.beginPath(),e.moveTo(-t,0),e.lineTo(0,t),e.lineTo(t,0),e.lineTo(0,-t),e.fill(),a},g.prototype._plusAnimation=function(e){var t=e.aniType,e={size:e.size,speed:0,aniType:t,composite:e.direction,applySlice:this._applyPlusSlice};e.maskCanvas=this._processShapePieces(e),this._performBarAnimation(e)},g.prototype._applyPlusSlice=function(e,t){var a=e.maskCanvas,i=a.cvs,n=a.cvsCtx;this._clearRectCanvas(a);e=i.width,i=e/2;return n.fillRect(0,i-(t*=e)/2,e,t),n.fillRect(i-t/2,0,t,e),a},g.prototype._exitAnets=function(){var e;cancelAnimationFrame(this._rafId),n(document.head.querySelector("#anetStyle")),v({name:"end",options:this._options}),n(null===(e=this._baseCanvas)||void 0===e?void 0:e.cvs),this._currentToggleClassName(!1),null!==(e=this._callback)&&void 0!==e&&e.bind(null,this._options)(),g._target=null,this._currentEl=null,this._canvas=null,this._baseCanvas=null},g._target=null,g._instance=null,g.version="0.2.5",g);function g(t,a){this._currentEl=null,this._canvas=null,this._baseCanvas=null;var e=(this._options=t).item;if(this._callback=a,g._target!==e){g._target=e;try{this._init()}catch(e){a.bind(null,t)(),console.log(e.message)}}else console.log("Don't repeat the call!")}return I});