svgcinema-player 0.0.0-stage → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +34 -0
- package/README.md +37 -2
- package/cin-player.min.js +2 -0
- package/package.json +20 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
SVGcinema
|
|
2
|
+
Copyright (c) 2026 asafco83 (https://github.com/asafco83/svgcinema). All rights reserved.
|
|
3
|
+
|
|
4
|
+
This software, including its source code, design and documentation (the "Software"), is
|
|
5
|
+
proprietary. It is not open source, and no license to it is granted except as written below.
|
|
6
|
+
Without the copyright holder's prior written permission you may not copy, modify, merge, publish,
|
|
7
|
+
distribute, sublicense, sell or rent the Software or any part of it, or create works based on it.
|
|
8
|
+
|
|
9
|
+
What you may do:
|
|
10
|
+
|
|
11
|
+
1. Use the app. You may use SVGcinema as published by the copyright holder (for example at
|
|
12
|
+
https://asafco83.github.io/svgcinema/) to create, save and export animations.
|
|
13
|
+
|
|
14
|
+
2. Use your exported files. The files you export from SVGcinema (such as animated SVG files) are
|
|
15
|
+
yours to use, copy, distribute and sell for any purpose, including commercial purposes. This
|
|
16
|
+
includes the parts of the Software that SVGcinema puts into those files (the animation
|
|
17
|
+
player), as part of those files only.
|
|
18
|
+
|
|
19
|
+
3. View the repository. While the repository is public on GitHub, you may view it and fork it on
|
|
20
|
+
GitHub as GitHub's Terms of Service allow. That gives you no other rights to the Software.
|
|
21
|
+
|
|
22
|
+
Third-party components included with the Software (such as paper.js and opentype.js) remain under
|
|
23
|
+
their own licenses.
|
|
24
|
+
|
|
25
|
+
Versions of the Software that were published earlier under the PolyForm Noncommercial License
|
|
26
|
+
1.0.0 stay under that license for those copies. This notice applies from the version that
|
|
27
|
+
contains it onward.
|
|
28
|
+
|
|
29
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
|
|
30
|
+
NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
31
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
32
|
+
LIABILITY ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR ITS USE.
|
|
33
|
+
|
|
34
|
+
For any other use, contact the copyright holder through https://github.com/asafco83.
|
package/README.md
CHANGED
|
@@ -1,3 +1,38 @@
|
|
|
1
|
-
#
|
|
1
|
+
# svgcinema-player
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The player for animated SVGs made with [SVGcinema](https://asafco83.github.io/svgcinema/) and exported
|
|
4
|
+
with **Player › External**. Such an SVG carries only its artwork and animation, and links this
|
|
5
|
+
script, so a page with many animations loads the player once.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<script href="https://cdn.jsdelivr.net/npm/svgcinema-player@1.0.0/cin-player.min.js"></script>
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
The exporter writes that line for you. To host the player yourself, download `cin-player.min.js`
|
|
12
|
+
(from this package or the SVGcinema site's `downloads/` folder) and choose **Your own address** in
|
|
13
|
+
the export settings.
|
|
14
|
+
|
|
15
|
+
## API
|
|
16
|
+
|
|
17
|
+
Each animated `<svg>` gets its player as `svg.player` (also `svg.cinPlayer`), and fires `cinready`
|
|
18
|
+
when it is ready:
|
|
19
|
+
|
|
20
|
+
```js
|
|
21
|
+
const svg = document.getElementById('cin-svg');
|
|
22
|
+
svg.addEventListener('cinready', e => e.detail.play());
|
|
23
|
+
svg.player.pause();
|
|
24
|
+
svg.player.seekTo(1200);
|
|
25
|
+
svg.player.on('end', ms => console.log('ended at', ms));
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Methods: `play`, `pause`, `toggle` / `togglePlay`, `restart`, `reverse`, `rollback`, `stop`,
|
|
29
|
+
`seek(percent)`, `seekTo(ms)`, `seekBy(ms)`, `set(name, value)` (speed, fps, iterations, direction,
|
|
30
|
+
alternate, fill), `ready(fn)`, `on(events, fn, prepend)`, `off(event, fn)`, `destruct`.
|
|
31
|
+
Events: `play`, `pause`, `restart`, `reverse`, `stop`, `end`, `keyframe`.
|
|
32
|
+
State: `currentTime`, `duration`, `totalTime`, `state`, `isPlaying`, `isReversed`, `isRollingBack`,
|
|
33
|
+
`hasEnded`, `isInfinite`, `isAlternate`, `isBackwards`, `speed`, `fps`, `direction`, `fill`,
|
|
34
|
+
`iterations`.
|
|
35
|
+
|
|
36
|
+
`window.CinPlayer` has `version`, `boot(svg)` and `scan(root)` for SVGs added to the page later.
|
|
37
|
+
|
|
38
|
+
See LICENSE for the terms.
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! SVGcinema player 1.0.0. Proprietary, see the LICENSE file of the svgcinema-player package. */
|
|
2
|
+
"use strict";(()=>{function he(y,v){var C={pos:"v",org:"v",p0:"v",p1:"v",rad:"n",ts:"n",te:"n",to:"n",rot:"n",scl:"v",op:"n",fill:"c",stk:"c",sw:"n",d:"m",skw:"v",fo:"n",so:"n",dof:"n",sz:"v",da:"a"},X={ease:[.25,.1,.25,1],in:[.42,0,1,1],out:[0,0,.58,1],inOut:[.42,0,.58,1],inSine:[.12,0,.39,0],outSine:[.61,1,.88,1],inOutSine:[.37,0,.63,1],inQuad:[.11,0,.5,0],outQuad:[.5,1,.89,1],inOutQuad:[.45,0,.55,1],inCubic:[.32,0,.67,0],outCubic:[.33,1,.68,1],inOutCubic:[.65,0,.35,1],inQuart:[.5,0,.75,0],outQuart:[.25,1,.5,1],inOutQuart:[.76,0,.24,1],inQuint:[.64,0,.78,0],outQuint:[.22,1,.36,1],inOutQuint:[.83,0,.17,1],inExpo:[.7,0,.84,0],outExpo:[.16,1,.3,1],inOutExpo:[.87,0,.13,1],inCirc:[.55,0,1,.45],outCirc:[0,.55,.45,1],inOutCirc:[.85,0,.15,1],inBack:[.36,0,.66,-.56],outBack:[.34,1.56,.64,1],inOutBack:[.68,-.6,.32,1.6]},R={},B={},J=2*Math.PI/3,U=2*Math.PI/4.5,D={hold:function(n){return n<1?0:1},outBounce:F,inBounce:function(n){return 1-F(1-n)},inOutBounce:function(n){return n<.5?(1-F(1-2*n))/2:(1+F(2*n-1))/2},outElastic:function(n){return n===0||n===1?n:Math.pow(2,-10*n)*Math.sin((n*10-.75)*J)+1},inElastic:function(n){return n===0||n===1?n:-Math.pow(2,10*n-10)*Math.sin((n*10-10.75)*J)},inOutElastic:function(n){return n===0||n===1?n:n<.5?-(Math.pow(2,20*n-10)*Math.sin((20*n-11.125)*U))/2:Math.pow(2,-20*n+10)*Math.sin((20*n-11.125)*U)/2+1}};function H(n){var e=3*n[0],r=3*(n[2]-n[0])-e,t=1-e-r,u=3*n[1],i=3*(n[3]-n[1])-u,o=1-u-i;function a(f){return((t*f+r)*f+e)*f}function l(f){return((o*f+i)*f+u)*f}function s(f){return(3*t*f+2*r)*f+e}return function(f){var c=f,b,g,p,h=0,M=1;for(b=0;b<8;b++){if(g=a(c)-f,Math.abs(g)<1e-6)return l(c);if(p=s(c),Math.abs(p)<1e-6)break;c-=g/p}for(c=f;M-h>1e-6&&(g=a(c),!(Math.abs(g-f)<1e-6));)f>g?h=c:M=c,c=(h+M)/2;return l(c)}}function F(n){var e=7.5625,r=2.75;return n<1/r?e*n*n:n<2/r?e*(n-=1.5/r)*n+.75:n<2.5/r?e*(n-=2.25/r)*n+.9375:e*(n-=2.625/r)*n+.984375}function Y(n,e){if(!n||n==="linear")return e;if(typeof n!="string"){var r=n.join(",");return(R[r]||(R[r]=H(n)))(e)}if(D[n])return D[n](e);var t=R[n]||(R[n]=H(X[n]||X.ease));return t(e)}function K(n){if(typeof n!="string")return null;var e=n.trim();if(e[0]==="#"){var r=e.slice(1);return(r.length===3||r.length===4)&&(r=r.replace(/./g,"$&$&")),r.length===6&&(r+="ff"),r.length!==8?null:[parseInt(r.substr(0,2),16),parseInt(r.substr(2,2),16),parseInt(r.substr(4,2),16),parseInt(r.substr(6,2),16)/255]}var t=e.match(/^rgba?\(([^)]+)\)$/);if(t){var u=t[1].split(/[\s,\/]+/).filter(Boolean).map(parseFloat);return u.length===3&&u.push(1),u.length===4?u:null}return null}function q(n){return!!n&&typeof n=="object"&&(n.g==="lin"||n.g==="rad")&&n.s&&n.s.length>0}function _n(n,e){var r=n.s;if(e<=r[0][0])return r[0][1];for(var t=0;t<r.length-1;t++)if(e<=r[t+1][0]){var u=r[t+1][0]-r[t][0];return ln(r[t][1],r[t+1][1],u>0?(e-r[t][0])/u:0)}return r[r.length-1][1]}function Ee(n,e,r){if(q(n)||(n={g:e.g,a:e.a,cx:e.cx,cy:e.cy,r:e.r,p:e.p,ra:e.ra,rr:e.rr,s:[[0,n],[1,n]]}),q(e)||(e={g:n.g,a:n.a,cx:n.cx,cy:n.cy,r:n.r,p:n.p,ra:n.ra,rr:n.rr,s:[[0,e],[1,e]]}),n.g!==e.g)return r<1?n:e;var t=[];n.s.concat(e.s).forEach(function(s){t.indexOf(s[0])<0&&t.push(s[0])}),t.sort(function(s,f){return s-f});var u=n.s.length===e.s.length?n.s.map(function(s,f){return[s[0]+(e.s[f][0]-s[0])*r,ln(s[1],e.s[f][1],r)]}):t.map(function(s){return[s,ln(_n(n,s),_n(e,s),r)]}),i=function(s,f,c){return(s==null?c:s)+((f==null?c:f)-(s==null?c:s))*r},o={g:n.g,a:i(n.a,e.a,90),cx:i(n.cx,e.cx,.5),cy:i(n.cy,e.cy,.5),r:i(n.r,e.r,.5),s:u};if(n.p||e.p){var a=gn(n),l=gn(e);o.p=a.map(function(s,f){return s+(l[f]-s)*r})}return(n.ra!=null||e.ra!=null)&&(o.ra=i(n.ra,e.ra,0)),(n.rr!=null||e.rr!=null)&&(o.rr=i(n.rr,e.rr,1)),o}function ln(n,e,r){if(q(n)||q(e))return Ee(n,e,r);var t=K(n),u=K(e);if(!t||!u)return r<1?n:e;var i=[0,1,2].map(function(a){return Math.round(t[a]+(u[a]-t[a])*r)}),o=t[3]+(u[3]-t[3])*r;return o>=.999?"rgb("+i.join(",")+")":"rgba("+i.join(",")+","+Math.round(o*1e3)/1e3+")"}function Me(n,e){if(!n||!e||n.length!==e.length)return!1;for(var r=0;r<n.length;r++)if(n[r].n.length!==e[r].n.length)return!1;return!0}function xe(n,e,r){return Me(n,e)?n.map(function(t,u){return{c:t.c,n:t.n.map(function(i,o){var a=e[u].n[o];return i.map(function(l,s){return l+(a[s]-l)*r})})}}):r<1?n:e}function Pe(n,e,r){n=n||[],e=e||[];var t=n.length,u=e.length,i=[],o;if(t!==u)if(!t)n=sn(e.map(Vn),1);else if(!u)e=sn(n.map(Vn),1);else{var a=t*u/Fn(t,u);n=sn(n,a/t),e=sn(e,a/u)}for(o=0;o<n.length;o++)i.push(n[o]+(e[o]-n[o])*r);return i}function Vn(){return 0}function Fn(n,e){return e?Fn(e,n%e):n||1}function sn(n,e){for(var r=[],t=0;t<e;t++)r=r.concat(n);return r}function Se(n,e,r,t){return n==="c"?ln(e,r,t):n==="a"?Pe(e,r,t):n==="m"?xe(e,r,t):n==="v"?[e[0]+(r[0]-e[0])*t,e[1]+(r[1]-e[1])*t]:e+(r-e)*t}function we(n,e,r,t,u){var i=u*u,o=i*u;return[0,1].map(function(a){return .5*(2*e[a]+(-n[a]+r[a])*u+(2*n[a]-5*e[a]+4*r[a]-t[a])*i+(-n[a]+3*e[a]-3*r[a]+t[a])*o)})}function Tn(n,e,r,t){var u=1-t,i=u*u*u,o=3*u*u*t,a=3*u*t*t,l=t*t*t;return[i*n[0]+o*(n[0]+e[0])+a*(r[0]+e[2])+l*r[0],i*n[1]+o*(n[1]+e[1])+a*(r[1]+e[3])+l*r[1]]}var En={},jn=0;function Ce(n,e,r,t){if(t<=0||t>=1)return t;var u=n.join()+";"+e.join()+";"+r.join(),i=En[u],o=64,a;if(!i){++jn>400&&(En={},jn=1),i=[0];var l=n;for(a=1;a<=o;a++){var s=Tn(n,e,r,a/o);i.push(i[a-1]+Math.hypot(s[0]-l[0],s[1]-l[1])),l=s}En[u]=i}var f=t*i[o];if(!(i[o]>0))return t;for(a=1;a<=o;a++)if(i[a]>=f)return(a-1+(f-i[a-1])/(i[a]-i[a-1]||1))/o;return 1}function ke(n,e,r){var t=n.t[e],u=t.length,i,o,a,l;if(u===1||r<=t[0][0])return t[0][1];if(r>=t[u-1][0])return t[u-1][1];for(i=0;i<u-1;i++)if(o=t[i],a=t[i+1],r<a[0])return l=Y(o[2],(r-o[0])/(a[0]-o[0])),e==="pos"&&o[3]?Tn(o[1],o[3],a[1],n.ev?Ce(o[1],o[3],a[1],l):l):e==="pos"&&n.sm&&u>2?we((t[i-1]||o)[1],o[1],a[1],(t[i+2]||a)[1],l):Se(C[e]||(typeof o[1]=="string"?"c":typeof o[1]=="object"?"v":"n"),o[1],a[1],l);return t[u-1][1]}var un=!1;function E(n,e,r){var t=!un&&n.t&&n.t[e];return t&&t.length?ke(n,e,r):e==="org"?n.o||[0,0]:n.b[e]}function fn(n,e,r){var t=E(n,"org",e)||[0,0],u=E(n,"pos",e)||[0,0],i=E(n,"rot",e)||0,o=E(n,"scl",e)||[1,1],a=E(n,"skw",e)||[0,0],l=n.t&&n.t.pos,s=E(n,"op",e);if(n.or&&l&&l.length>1&&!un){var f=l[0][0],c=l[l.length-1][0],b=Math.min(.02,(c-f)/4),g=Math.max(f,Math.min(e-b,c-2*b)),p=E(n,"pos",g),h=E(n,"pos",g+2*b);(h[0]!==p[0]||h[1]!==p[1])&&(i+=Math.atan2(h[1]-p[1],h[0]-p[0])*180/Math.PI)}return r?{x:u[0]+t[0],y:u[1]+t[1],r:i,sx:o[0],sy:o[1],ox:t[0],oy:t[1],kx:a[0],ky:a[1],ba:xn(n),cp:Gn(n,e)}:{x:u[0]+t[0],y:u[1]+t[1],r:i,sx:o[0],sy:o[1],ox:t[0],oy:t[1],op:s==null?1:s,fill:E(n,"fill",e),stk:E(n,"stk",e),sw:E(n,"sw",e),d:Ie(n,e),kx:a[0],ky:a[1],fo:E(n,"fo",e),so:E(n,"so",e),dof:E(n,"dof",e),rad:n.t&&n.t.rad&&n.t.rad.length?E(n,"rad",e):null,gb:Ae(n,e),da:n.t&&n.t.da&&n.t.da.length?E(n,"da",e):null,trim:Re(n,e),ba:xn(n),cp:Gn(n,e)}}for(var zn={},Mn=null,mn=0;mn<y.L.length;mn++)zn[y.L[mn].id]=y.L[mn];function T(n){return n&&(zn[n]||Mn&&Mn(n))||null}function Gn(n,e){var r=n.cs||n.type==="bone"&&!n.inh?T(n.parent):null;if(!r||!n.cs&&r.type!=="bone")return null;var t=E(r,"scl",e)||[1,1];if(t[0]===1&&t[1]===1)return null;var u=n.j||(n.geo?[n.geo.x,n.geo.y]:[0,0]);return[xn(r),t[0]||1e-6,t[1]||1e-6,u[0],u[1]]}function xn(n){return n.ba!=null?n.ba:n.type==="bone"&&n.geo&&n.geo.ang?n.geo.ang:0}function Re(n,e){var r=n.t||{},t=["ts","te","to"].some(function(a){return r[a]&&r[a].length||n.b&&n.b[a]!=null&&n.b[a]!==(a==="te"?100:0)});if(!t)return null;var u=E(n,"ts",e),i=E(n,"te",e),o=E(n,"to",e);return[u==null?0:u,i==null?100:i,o==null?0:o]}function Bn(n){var e=Math.max(0,Math.min(100,Math.min(n[0],n[1]))),r=Math.max(0,Math.min(100,Math.max(n[0],n[1]))),t=r-e,u=e+(n[2]||0),i=(u%100+100)%100;return t<1e-6?["0 300",String(m(150-i))]:i+t<=100+1e-6?[m(t)+" "+m(200-t),String(m(-i))]:[m(t)+" "+m(100-t),String(m(-u))]}function Ie(n,e){var r=Te(n,e);return r&&n.t&&n.t.sz&&n.t.sz.length&&(r=Ne(n,r,e)),r&&n.pins&&n.pins.length&&!cn?Fe(n,r,e):r}function Oe(n,e,r){var t=n[2]?e[0]/n[2]:1,u=n[3]?e[1]/n[3]:1;return[r[0]-(r[0]-n[0])*t,r[1]-(r[1]-n[1])*u,Math.max(0,e[0]),Math.max(0,e[1])]}function Qn(n,e,r){return n.sa?[e[0]+n.sa[0]*e[2],e[1]+n.sa[1]*e[3]]:E(n,"org",r)||[0,0]}function Ae(n,e){var r=n.geo;if(!r||!n.t||!n.t.sz||!n.t.sz.length||n.type!=="rect"&&n.type!=="image"&&n.type!=="ellipse")return null;var t=n.type==="ellipse"?[(r.cx||0)-(r.rx||0),(r.cy||0)-(r.ry||0),2*(r.rx||0),2*(r.ry||0)]:[r.x||0,r.y||0,r.w||0,r.h||0];return Oe(t,E(n,"sz",e),Qn(n,t,e))}function Ne(n,e,r){var t=Xn(n.b&&n.b.d||e),u=E(n,"sz",r),i=Qn(n,t,r),o=t[2]>1e-9?u[0]/t[2]:1,a=t[3]>1e-9?u[1]/t[3]:1;return e.map(function(l){return{c:l.c,n:l.n.map(function(s){return s.map(function(f,c){return c%2?i[1]+(f-i[1])*a:i[0]+(f-i[0])*o})})}})}function Xn(n){var e=1/0,r=1/0,t=-1/0,u=-1/0;function i(l,s){l<e&&(e=l),l>t&&(t=l),s<r&&(r=s),s>u&&(u=s)}function o(l,s,f,c){var b=-l+3*s-3*f+c,g=2*(l-2*s+f),p=s-l,h=[];if(Math.abs(b)<1e-12)Math.abs(g)>1e-12&&h.push(-p/g);else{var M=g*g-4*b*p;if(M>=0){var P=Math.sqrt(M);h.push((-g+P)/(2*b),(-g-P)/(2*b))}}return h.filter(function(tn){return tn>0&&tn<1})}function a(l,s){var f=[l[0],l[4],s[2],s[0]],c=[l[1],l[5],s[3],s[1]];i(s[0],s[1]),o(f[0],f[1],f[2],f[3]).concat(o(c[0],c[1],c[2],c[3])).forEach(function(b){var g=1-b,p=g*g*g,h=3*g*g*b,M=3*g*b*b,P=b*b*b;i(p*f[0]+h*f[1]+M*f[2]+P*f[3],p*c[0]+h*c[1]+M*c[2]+P*c[3])})}return(n||[]).forEach(function(l){var s=l.n;if(s.length){i(s[0][0],s[0][1]);for(var f=1;f<s.length;f++)a(s[f-1],s[f]);l.c&&s.length>1&&a(s[s.length-1],s[0])}}),isFinite(e)?[e,r,t-e,u-r]:[0,0,0,0]}var cn=!1;function x(n,e){return[n[0]*e[0]+n[2]*e[1],n[1]*e[0]+n[3]*e[1],n[0]*e[2]+n[2]*e[3],n[1]*e[2]+n[3]*e[3],n[0]*e[4]+n[2]*e[5]+n[4],n[1]*e[4]+n[3]*e[5]+n[5]]}function _e(n){var e=n[0]*n[3]-n[1]*n[2]||1e-12;return[n[3]/e,-n[1]/e,-n[2]/e,n[0]/e,(n[2]*n[5]-n[3]*n[4])/e,(n[1]*n[4]-n[0]*n[5])/e]}function W(n,e){return[1,0,0,1,n,e]}function Z(n){var e=n*Math.PI/180;return[Math.cos(e),Math.sin(e),-Math.sin(e),Math.cos(e),0,0]}function Pn(n,e){return[n,0,0,e,0,0]}function Hn(n){var e=[1,0,0,1,0,0],r=n.cp;r&&(e=x(e,W(r[3],r[4])),e=x(e,Z(r[0])),e=x(e,Pn(1/r[1],1/r[2])),e=x(e,Z(-r[0])),e=x(e,W(-r[3],-r[4]))),e=x(e,W(n.x,n.y)),e=x(e,Z(n.r)),n.kx&&(e=x(e,[1,0,Math.tan(n.kx*Math.PI/180),1,0,0])),n.ky&&(e=x(e,[1,Math.tan(n.ky*Math.PI/180),0,1,0,0]));var t=n.ba&&n.sx!==n.sy;return t&&(e=x(e,Z(n.ba))),e=x(e,Pn(n.sx,n.sy)),t&&(e=x(e,Z(-n.ba))),x(e,W(-n.ox,-n.oy))}var Sn={};function wn(n){if(Sn[n])return Sn[n];for(var e=[1,0,0,1,0,0],r=/(matrix|translate|scale|rotate|skewX|skewY)\s*\(([^)]*)\)/g,t;t=r.exec(n);){var u=t[2].split(/[\s,]+/).filter(Boolean).map(Number),i=t[1];i==="matrix"&&u.length===6?e=x(e,u):i==="translate"?e=x(e,W(u[0]||0,u[1]||0)):i==="scale"?e=x(e,Pn(u[0],u.length>1?u[1]:u[0])):i==="rotate"?e=u.length>2?x(x(x(e,W(u[1],u[2])),Z(u[0])),W(-u[1],-u[2])):x(e,Z(u[0]||0)):i==="skewX"?e=x(e,[1,0,Math.tan((u[0]||0)*Math.PI/180),1,0,0]):i==="skewY"&&(e=x(e,[1,Math.tan((u[0]||0)*Math.PI/180),0,1,0,0]))}return Sn[n]=e}function bn(n,e,r){for(var t=Hn(fn(n,e,!0)),u=T(n.parent),i=0;u&&u!==r&&i++<100;)u.xf&&(t=x(wn(u.xf),t)),t=x(Hn(fn(u,e,!0)),t),u=T(u.parent);return t}function Ve(n,e,r){var t=bn(n,e,r),u=n.type?n.type==="path":!n.mesh;return u&&n.xf?x(t,wn(n.xf)):t}function Yn(n,e,r,t,u){for(var i=[],o=T(e.parent),a=null,l=0;o&&l++<100;)i.push(o),o=T(o.parent);for(o=T(n.parent),l=0;o&&l++<100;o=T(o.parent))if(i.indexOf(o)>=0){a=o;break}var s=un;un=t;var f=Ve(n,r,a),c=Math.abs(f[0]*f[3]-f[1]*f[2])<1e-12?[1,0,0,1,0,0]:x(_e(f),bn(e,r,a));un=s;var b=e.geo||{},g=(b.ang||0)*Math.PI/180,p=(b.x||0)+(u&&u[0]||0),h=(b.y||0)+(u&&u[1]||0),M=c[0]*Math.cos(g)+c[2]*Math.sin(g),P=c[1]*Math.cos(g)+c[3]*Math.sin(g);return[c[0]*p+c[2]*h+c[4],c[1]*p+c[3]*h+c[5],Math.atan2(P,M)*180/Math.PI]}function Kn(n,e,r){var t=e.bone?T(e.bone):null;if(t){var u=Yn(n,t,r,!0,e.bo),i=Yn(n,t,r,!1,e.bo);return[u[0],u[1],i[0],i[1],i[2]-u[2]]}var o=E(n,"pin"+e.n,r)||[e.x,e.y];return[e.x,e.y,o[0],o[1],E(n,"pinr"+e.n,r)||0]}function Wn(n,e){var r=n.pins||[],t=Math.max(10,Math.min(1e3,n.reach||100)),u=Math.max(.5,Math.min(8,200/t));return[r.map(function(i){var o=Kn(n,i,e),a=o[4]*Math.PI/180;return[o[0],o[1],o[2],o[3],Math.cos(a),Math.sin(a)]}),u]}function Zn(n,e,r,t,u,i,o,a){var l=0,s=0,f=0,c;for(c=0;c<n.length;c++){var b=n[c],g=r-b[0],p=t-b[1],h=1/(Math.pow(g*g+p*p,e/2)+1e-6),M=u-b[0],P=i-b[1];l+=h,s+=h*(b[2]+M*b[4]-P*b[5]),f+=h*(b[3]+M*b[5]+P*b[4])}o[a]=l?s/l:u,o[a+1]=l?f/l:i}function Fe(n,e,r){var t=Wn(n,r),u=t[0],i=t[1];return e.map(function(o){return{c:o.c,n:o.n.map(function(a){for(var l=[0,0,0,0,0,0],s=0;s<6;s+=2)Zn(u,i,a[0],a[1],a[s],a[s+1],l,s);return l})}})}function $n(n,e){var r=n.mesh,t=[];if(!r)return t;var u=!cn&&n.pins&&n.pins.length,i=u?Wn(n,e):null,o=[],a;for(a=0;a<r.v.length;a++)i?Zn(i[0],i[1],r.v[a][0],r.v[a][1],r.v[a][0],r.v[a][1],o,a*2):(o[a*2]=r.v[a][0],o[a*2+1]=r.v[a][1]);for(a=0;a<r.t.length;a++){var l=r.t[a],s=r.v[l[0]],f=r.v[l[1]],c=r.v[l[2]],b=f[0]-s[0],g=f[1]-s[1],p=c[0]-s[0],h=c[1]-s[1],M=b*h-g*p;if(!i||!M){t.push([1,0,0,1,0,0]);continue}var P=o[l[0]*2],tn=o[l[0]*2+1],ie=o[l[1]*2]-P,ae=o[l[1]*2+1]-tn,oe=o[l[2]*2]-P,le=o[l[2]*2+1]-tn,se=h/M,fe=-p/M,me=-g/M,ce=b/M,be=ie*se+oe*me,ge=ie*fe+oe*ce,ye=ae*se+le*me,de=ae*fe+le*ce;t.push([be,ye,ge,de,P-be*s[0]-ge*s[1],tn-ye*s[0]-de*s[1]])}return t}function Te(n,e){var r=E(n,"d",e),t=n.t||{};if(n.shape&&t.rad&&t.rad.length)return Dn(n.shape,E(n,"rad",e),!0);if(r&&r[0]&&r[0].n.length===2&&(t.p0&&t.p0.length||t.p1&&t.p1.length)){var u=r[0].n.map(function(i,o){var a=t["p"+o]&&t["p"+o].length?E(n,"p"+o,e):null;if(!a)return i;var l=a[0]-i[0],s=a[1]-i[1];return[i[0]+l,i[1]+s,i[2]+l,i[3]+s,i[4]+l,i[5]+s]});return[{c:r[0].c,n:u}]}return r}function Jn(n){for(var e=[],r=n.kind==="star",t=r?n.n*2:n.n,u=0;u<t;u++){var i=(-90+n.rot+u*360/t)*Math.PI/180,o=r&&u%2?n.r*(n.ratio==null?.45:n.ratio):n.r;e.push([n.cx+o*Math.cos(i),n.cy+o*Math.sin(i)])}return e}function L(n,e){return Math.hypot(n[0]-e[0],n[1]-e[1])}function Un(n){for(var e=n.length,r=1/0,t=0;t<e;t++){var u=n[(t+e-1)%e],i=n[t],o=n[(t+1)%e],a=Math.atan2(u[1]-i[1],u[0]-i[0]),l=Math.atan2(o[1]-i[1],o[0]-i[0]),s=Math.abs(a-l);s>Math.PI&&(s=2*Math.PI-s),r=Math.min(r,Math.min(L(u,i),L(o,i))/2*Math.tan(s/2))}return isFinite(r)?Math.max(0,r):0}function w(n){return Math.round(n*100)/100}function Dn(n,e,r){for(var t=Jn(n),u=t.length,i=Math.max(0,Math.min(e||0,Un(t))),o=[],a=0;a<u;a++){var l=t[a];if(i<=0&&!r){o.push([w(l[0]),w(l[1]),w(l[0]),w(l[1]),w(l[0]),w(l[1])]);continue}var s=t[(a+u-1)%u],f=t[(a+1)%u],c=[(s[0]-l[0])/L(s,l),(s[1]-l[1])/L(s,l)],b=[(f[0]-l[0])/L(f,l),(f[1]-l[1])/L(f,l)],g=Math.acos(Math.max(-1,Math.min(1,c[0]*b[0]+c[1]*b[1]))),p=i/Math.tan(g/2),h=4/3*Math.tan((Math.PI-g)/4)*i,M=[l[0]+c[0]*p,l[1]+c[1]*p],P=[l[0]+b[0]*p,l[1]+b[1]*p];o.push([w(M[0]),w(M[1]),w(M[0]),w(M[1]),w(M[0]-c[0]*h),w(M[1]-c[1]*h)]),o.push([w(P[0]),w(P[1]),w(P[0]-b[0]*h),w(P[1]-b[1]*h),w(P[0]),w(P[1])])}return[{c:!0,n:o}]}function qn(n){if(n.g==="rad"){var e=n.cx==null?.5:n.cx,r=n.cy==null?.5:n.cy,t=n.r==null?.5:n.r,u=n.ra||0,i=n.rr==null?1:n.rr,o={cx:String(m(e)),cy:String(m(r)),r:String(m(t)),fx:String(m(e)),fy:String(m(r))};return(m(u)||m(i)!==1)&&(o.gradientTransform="translate("+m(e)+","+m(r)+") rotate("+m(u)+") scale(1,"+m(i)+") translate("+m(-e)+","+m(-r)+")"),o}var a=gn(n);return{x1:String(m(a[0])),y1:String(m(a[1])),x2:String(m(a[2])),y2:String(m(a[3]))}}function gn(n){if(n.p&&n.p.length===4)return n.p.slice();var e=((n.a==null?90:n.a)-90)*Math.PI/180,r=Math.cos(e)/2,t=Math.sin(e)/2;return[.5-r,.5-t,.5+r,.5+t]}function m(n){return Math.round(n*1e3)/1e3}function Ln(n){return Math.round(n*1e6)/1e6}function je(n){var e=n.cp;return(e?"translate("+m(e[3])+","+m(e[4])+") rotate("+m(e[0])+") scale("+m(1/e[1])+","+m(1/e[2])+") rotate("+m(-e[0])+") translate("+m(-e[3])+","+m(-e[4])+") ":"")+"translate("+m(n.x)+","+m(n.y)+") rotate("+m(n.r)+(n.kx?") skewX("+m(n.kx):"")+(n.ky?") skewY("+m(n.ky):"")+(n.ba&&n.sx!==n.sy?") rotate("+m(n.ba):"")+") scale("+m(n.sx)+","+m(n.sy)+(n.ba&&n.sx!==n.sy?") rotate("+m(-n.ba):"")+") translate("+m(-n.ox)+","+m(-n.oy)+")"}function ne(n){return n&&n.length?n.map(function(e){return String(m(Math.max(0,e)))}).join(" "):"none"}function ee(n){var e="";function r(t,u){t[4]===t[0]&&t[5]===t[1]&&u[2]===u[0]&&u[3]===u[1]?e+="L"+m(u[0])+" "+m(u[1]):e+="C"+m(t[4])+" "+m(t[5])+" "+m(u[2])+" "+m(u[3])+" "+m(u[0])+" "+m(u[1])}return(n||[]).forEach(function(t){var u=t.n,i;if(u.length){for(e+="M"+m(u[0][0])+" "+m(u[0][1]),i=1;i<u.length;i++)r(u[i-1],u[i]);t.c&&(r(u[u.length-1],u[0]),e+="Z")}}),e||"M0 0"}function nn(n){return n in B||(B[n]=v?v.querySelector("#"+n):null),B[n]}function re(n,e,r){if(!q(r))return r;var t=r.g==="rad"?"radialGradient":"linearGradient",u=nn(e);if(!u||u.tagName!==t){var i=(n.ownerDocument||document).createElementNS("http://www.w3.org/2000/svg",t);i.setAttribute("id",e),u&&u.parentNode?u.parentNode.replaceChild(i,u):n.parentNode.insertBefore(i,n),u=i,B[e]=i}var o=qn(r);for(var a in o)u.setAttribute(a,o[a]);for(var l=u.getElementsByTagName("stop");l.length>r.s.length;)u.removeChild(l[l.length-1]);for(;l.length<r.s.length;)u.appendChild((n.ownerDocument||document).createElementNS("http://www.w3.org/2000/svg","stop"));for(var s=0;s<r.s.length;s++){var f=K(r.s[s][1])||[0,0,0,1];l[s].setAttribute("offset",String(m(r.s[s][0]))),l[s].setAttribute("stop-color","rgb("+Math.round(f[0])+","+Math.round(f[1])+","+Math.round(f[2])+")"),l[s].setAttribute("stop-opacity",String(m(f[3])))}return"url(#"+e+")"}function Cn(n){for(var e=0;e<y.L.length;e++){var r=y.L[e],t=nn(y.p+r.id),u=nn(y.p+r.id+"-s");if(!(!t||!u)){var i=fn(r,n);if(t.setAttribute("transform",je(i)),t.setAttribute("opacity",String(m(i.op))),i.fill!=null&&u.setAttribute("fill",re(u,y.p+r.id+"-gf",i.fill)),i.stk!=null&&u.setAttribute("stroke",re(u,y.p+r.id+"-gs",i.stk)),i.sw!=null&&u.setAttribute("stroke-width",String(m(i.sw))),i.trim){var o=Bn(i.trim);u.setAttribute("pathLength","100"),u.setAttribute("stroke-dasharray",o[0]),u.setAttribute("stroke-dashoffset",o[1])}else i.dof!=null&&u.setAttribute("stroke-dashoffset",String(m(i.dof))),i.da&&u.setAttribute("stroke-dasharray",ne(i.da));if(i.fo!=null&&u.setAttribute("fill-opacity",String(m(i.fo))),i.so!=null&&u.setAttribute("stroke-opacity",String(m(i.so))),i.d&&u.setAttribute("d",ee(i.d)),i.gb){var a=i.gb,l=r.type==="ellipse"?{cx:a[0]+a[2]/2,cy:a[1]+a[3]/2,rx:a[2]/2,ry:a[3]/2}:{x:a[0],y:a[1],width:a[2],height:a[3]};for(var s in l)u.setAttribute(s,String(m(l[s])))}if(i.rad!=null&&!r.shape&&(u.setAttribute("rx",String(m(i.rad))),u.setAttribute("ry",String(m(i.rad)))),r.dw){var f=T(r.dw),c=nn(y.p+r.id+"-w");f&&c&&c.setAttribute("transform","matrix("+bn(f,n,T(r.du)).map(Ln).join(",")+")")}if(r.mesh)for(var b=$n(r,n),g=0;g<b.length;g++){var p=nn(y.p+r.id+"-m"+g);p&&p.setAttribute("transform","matrix("+b[g].map(Ln).join(",")+")")}if(r.fa)for(var h in r.fa){var M=nn(y.p+r.id+r.fa[h][0]),P=E(r,h,n);M&&P!=null&&M.setAttribute(r.fa[h][1],typeof P=="number"?String(m(P)):P)}}}}var j=y.dur||1,A=y.it>0?Math.floor(y.it):0,yn=/alternate/.test(y.dir||""),z=/reverse/.test(y.dir||"")?-1:1,O=z,kn=y.speed>0?y.speed:1,Rn=y.fps>0?Math.min(100,y.fps):100,dn=y.fill===-1||y.fill==="backwards"?-1:1,_=!1,In=0,On=-1e9,V=!1,N=!1,I=!1,G={},an=0;function en(){return A?A*j:j}function $(){return z>0?0:en()}var S=$();function An(n){var e=Math.floor(n/j),r=n-e*j;return A&&(n<=0?(e=0,r=0):e>=A&&(e=A-1,r=j)),yn&&(e%2+2)%2===1?j-r:r}function Q(n){var e=G[n];e&&e.slice().forEach(function(r){try{r.call(d,Math.round(S*1e3))}catch{}})}function rn(){Cn(An(S)),Q("keyframe")}function on(){_=!1,an&&cancelAnimationFrame(an),an=0}function te(){on(),N&&(N=!1,O=z),V=!0,dn<0&&(S=$()),rn(),Q("end")}function ue(n){if(!(!_||I)){if(S+=(n-In)/1e3*kn*O,In=n,O>0&&(A||N&&z<0)&&S>=en())return S=en(),te();if(O<0&&(A||N&&z>0)&&S<=0)return S=0,te();n-On>=1e3/Rn-1&&(On=n,rn()),an=requestAnimationFrame(ue)}}function hn(){_||I||(_=!0,V=!1,In=performance.now(),On=-1e9,an=requestAnimationFrame(ue))}var d={play:function(){return I||_||(V&&(O=z,N=!1,S=$()),hn(),Q("play")),d},pause:function(){return I||!_||(on(),Q("pause")),d},toggle:function(){return _?d.pause():d.play()},togglePlay:function(){return d.toggle()},restart:function(){return I||(on(),N=!1,O=z,S=$(),V=!1,rn(),hn(),Q("restart")),d},reverse:function(){return I||(O=-O,N=!1,V=!1,hn(),Q("reverse")),d},rollback:function(){if(I)return d;if(!A){var n=yn?2*j:j;S=(S%n+n)%n}return Math.abs(S-$())<1e-6&&!_||(O=-z,N=!0,V=!1,hn(),Q("reverse")),d},stop:function(){return I||(on(),N=!1,O=z,S=$(),V=!1,rn(),Q("stop")),d},seek:function(n){return I||(S=Math.max(0,Math.min(100,+n||0))/100*en(),V=!1,rn()),d},seekTo:function(n){return I||(S=(+n||0)/1e3,A&&(S=Math.max(0,Math.min(en(),S))),V=!1,rn()),d},seekBy:function(n){return d.seekTo(S*1e3+(+n||0))},set:function(n,e){return I||(n==="speed"?kn=Math.max(.01,Math.min(100,+e||1)):n==="fps"?Rn=Math.max(1,Math.min(100,+e||100)):n==="iterations"?A=e===1/0||!(+e>0)?0:Math.floor(+e):n==="direction"?(O=+e<0?-1:1,N=!1):n==="alternate"?yn=!!e:n==="fill"&&(dn=+e<0?-1:1)),d},ready:function(n){return typeof n=="function"&&setTimeout(function(){n.call(d,d)},0),d},on:function(n,e,r){return typeof e!="function"||String(n).split(/[\s,]+/).forEach(function(t){t&&(G[t]=G[t]||[],r?G[t].unshift(e):G[t].push(e))}),d},off:function(n,e){return G[n]&&(G[n]=e?G[n].filter(function(r){return r!==e}):[]),d},destruct:function(){I||(on(),G={},(d._cleanup||[]).forEach(function(n){try{n()}catch{}}),d._cleanup=[],Cn(An($())),I=!0)},onEnd:function(n){return d.on("end",n)},setRate:function(n){return d.set("speed",n)},apply:Cn,comp:fn,lookup:function(n){Mn=n},meshMats:$n,pinAt:Kn,worldOf:bn,restPins:function(n){var e=cn;return cn=!!n,e},get:E,gAttrs:qn,linP:gn,trimDash:Bn,isG:q,pc:K,dstr:ee,dashStr:ne,pathBox:Xn,xfM:wn,poly:Dn,corners:Jn,maxRad:Un,ease:Y,loc:An,EZ:X,_cleanup:[]},k=function(n){return{get:n,enumerable:!0}};return Object.defineProperties(d,{currentTime:k(function(){return Math.round(S*1e3)}),duration:k(function(){return Math.round(j*1e3)}),totalTime:k(function(){return Math.round(en()*1e3)}),fps:k(function(){return Rn}),speed:k(function(){return kn}),direction:k(function(){return O}),fill:k(function(){return dn}),iterations:k(function(){return A}),hasEnded:k(function(){return V}),isAlternate:k(function(){return yn}),isBackwards:k(function(){return dn<0}),isInfinite:k(function(){return!A}),isPlaying:k(function(){return _}),isReversed:k(function(){return O<0}),isRollingBack:k(function(){return _&&N}),state:k(function(){return I?"destroyed":_?N?"rollback":"playing":V?"ended":"paused"})}),d}var Nn=1;function ze(y,v,C){let X=C.b===-1?-1:1,R=C.o||"pause",B=v._cleanup=[],J=(F,Y,K)=>{F.addEventListener(Y,K),B.push(()=>F.removeEventListener(Y,K))},U=()=>{(v.direction!==X||v.isRollingBack)&&v.set("direction",X),v.play()},D=()=>{R==="pause"?v.pause():R==="reverse"?v.rollback():R==="start"?v.stop():R==="restart"&&v.restart()},H=C.t||"load";if(H==="hover")J(y,"mouseenter",U),J(y,"mouseleave",D);else if(H==="click")y.style.cursor="pointer",J(y,"click",()=>{v.isPlaying&&!v.isRollingBack?R!=="none"&&D():U()});else if(H==="scroll")if("IntersectionObserver"in window){let F=new IntersectionObserver(Y=>{Y[0].isIntersecting?U():R!=="none"&&(v.isPlaying||v.currentTime>0)&&D()},{threshold:.35});F.observe(y),B.push(()=>F.disconnect())}else v.play();else H!=="api"&&v.play()}function pn(y,v){if(!y)return null;if(y.player)return y.player;if(!v){let R=y.querySelector('script[type="application/json"][data-cin]');if(!R)return null;try{v=JSON.parse(R.textContent||"")}catch{return null}}if((v.f||1)>Nn)return null;let C=he(v.d,y);y.player=y.cinPlayer=C,C.stop(),(v.rm==="first"||v.rm==="last")&&!!window.matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches?C.seekTo(v.rm==="first"?0:Math.max(0,Math.round((v.d.dur||1)*1e3)-1)):ze(y,C,v);try{y.dispatchEvent(new CustomEvent("cinready",{detail:C}))}catch{}return C}function vn(y=document){y.querySelectorAll('script[type="application/json"][data-cin]').forEach(v=>{let C=v.closest("svg");C&&!C.player&&pn(C)})}var Ge="1.0.0",pe=typeof document!="undefined"?document.currentScript:null,ve=window;ve.CinPlayer=ve.CinPlayer||{version:Ge,f:Nn,boot:pn,scan:vn};pe&&pn(pe.closest("svg"));typeof document!="undefined"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>vn()):vn());})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svgcinema-player",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "The player for animated SVGs exported from SVGcinema with Player › External.",
|
|
5
|
+
"main": "cin-player.min.js",
|
|
6
|
+
"browser": "cin-player.min.js",
|
|
7
|
+
"jsdelivr": "cin-player.min.js",
|
|
8
|
+
"unpkg": "cin-player.min.js",
|
|
9
|
+
"files": [
|
|
10
|
+
"cin-player.min.js",
|
|
11
|
+
"LICENSE",
|
|
12
|
+
"README.md"
|
|
13
|
+
],
|
|
14
|
+
"keywords": [
|
|
15
|
+
"svg",
|
|
16
|
+
"animation",
|
|
17
|
+
"player",
|
|
18
|
+
"svgcinema"
|
|
19
|
+
],
|
|
20
|
+
"homepage": "https://asafco83.github.io/svgcinema/",
|
|
21
|
+
"license": "SEE LICENSE IN LICENSE"
|
|
22
|
+
}
|