UNPKG

@ssgoi/core

Version:

Core animation engine for SSGOI - Native app-like page transitions with spring physics

2 lines (1 loc) 5.13 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("../provider-Cs5iBqRD.cjs");function m(e,t){return e!=null&&e.spring||e!=null&&e.inertia||e!=null&&e.integrator?e:{spring:t.spring}}const k=(e={})=>{const{from:t=0,to:n=1,key:c}=e,r=m(e.physics,{spring:{stiffness:300,damping:30}});return{in:()=>({physics:r,css:s=>({opacity:t+(n-t)*s})}),out:()=>({physics:r,css:s=>({opacity:t+(n-t)*s})}),...c&&{key:c}}},I=(e={})=>{const{start:t=0,opacity:n=0,axis:c="both",key:r}=e,s=m(e.physics,{spring:{stiffness:300,damping:30}}),g=a=>{switch(c){case"x":return`scaleX(${a})`;case"y":return`scaleY(${a})`;case"both":default:return`scale(${a})`}},u=a=>{const o=t+(1-t)*a;return{transform:g(o),opacity:n+(1-n)*a}};return{in:()=>({physics:s,css:u}),out:()=>({physics:s,css:u}),...r&&{key:r}}},w=(e={})=>{const{direction:t,distance:n=100,opacity:c=0,fade:r=!0,axis:s,key:g}=e,u=m(e.physics,{spring:{stiffness:400,damping:35}}),o=t||(s==="x"?"left":s==="y"?"up":"left"),l=$=>{const i=1-$;if(typeof n=="number"){const d=i*n;switch(o){case"left":return`translate3d(${-d}px, 0, 0)`;case"right":return`translate3d(${d}px, 0, 0)`;case"up":return`translate3d(0, ${-d}px, 0)`;case"down":return`translate3d(0, ${d}px, 0)`}}else switch(o){case"left":return`translate3d(calc(-1 * ${n} * ${i}), 0, 0)`;case"right":return`translate3d(calc(${n} * ${i}), 0, 0)`;case"up":return`translate3d(0, calc(-1 * ${n} * ${i}), 0)`;case"down":return`translate3d(0, calc(${n} * ${i}), 0)`}},f=$=>{const i={transform:l($)};return r&&(i.opacity=c+(1-c)*$),i};return{in:()=>({physics:u,css:f}),out:()=>({physics:u,css:f}),...g&&{key:g}}},C=(e={})=>{const{degrees:t=360,clockwise:n=!0,scale:c=!1,fade:r=!0,origin:s="center",axis:g="2d",perspective:u=800,key:a}=e,o=m(e.physics,{spring:{stiffness:500,damping:25}}),l=n?t:-t,f=i=>{const d=(1-i)*l;switch(g){case"x":return`perspective(${u}px) rotateX(${d}deg)`;case"y":return`perspective(${u}px) rotateY(${d}deg)`;case"z":return`rotateZ(${d}deg)`;case"2d":default:return`rotate(${d}deg)`}},$=i=>{const d={},y=[f(i)];return c&&y.push(`scale(${i})`),d.transform=y.join(" "),d.transformOrigin=s,r&&(d.opacity=i),d};return{in:()=>({physics:o,css:$}),out:()=>({physics:o,css:$}),...a&&{key:a}}},P=(e={})=>{const{height:t=20,intensity:n=1,scale:c=!0,fade:r=!0,direction:s="up",key:g}=e,u=m(e.physics,{spring:{stiffness:800,damping:15}}),a=o=>{const l={},f=[],$=Math.sin(o*Math.PI*(1+n)),i=1-o,d=$*t*i;if(s==="up"?f.push(`translateY(${-Math.abs(d)}px)`):f.push(`translateY(${Math.abs(d)}px)`),c){const y=.8+o*.2+$*.05*i;f.push(`scale(${y})`)}return l.transform=f.join(" "),r&&(l.opacity=o),l};return{in:()=>({physics:u,css:a}),out:()=>({physics:u,css:a}),...g&&{key:g}}},v=(e={})=>{const{amount:t=10,opacity:n=0,scale:c=!1,fade:r=!0,key:s}=e,g=m(e.physics,{spring:{stiffness:300,damping:30}}),u=a=>{const o=1-a,l={};return typeof t=="number"?l.filter=`blur(${o*t}px)`:l.filter=`blur(calc(${t} * ${o}))`,c&&(l.transform=`scale(${.8+a*.2})`),r&&(l.opacity=n+(1-n)*a),l};return{in:()=>({physics:g,css:u}),out:()=>({physics:g,css:u}),...s&&{key:s}}},M=(e={})=>{const{x:t=0,y:n=-100,opacity:c=0,spring:r,key:s}=e,g={stiffness:(r==null?void 0:r.stiffness)??400,damping:(r==null?void 0:r.damping)??35,doubleSpring:(r==null?void 0:r.doubleSpring)??!1},u=a=>{const o=1-a;let l,f;return typeof t=="number"?l=`${o*t}px`:l=`calc(${t} * ${o})`,typeof n=="number"?f=`${o*n}px`:f=`calc(${n} * ${o})`,{transform:`translate3d(${l}, ${f}, 0)`,opacity:c+(1-c)*a}};return{in:()=>({spring:g,css:u}),out:()=>({spring:g,css:u}),...s&&{key:s}}},D=(e={})=>{const{shape:t="circle",origin:n="center",scale:c=1.5,fade:r=!1,spring:s,key:g}=e,u={stiffness:(s==null?void 0:s.stiffness)??300,damping:(s==null?void 0:s.damping)??30,doubleSpring:(s==null?void 0:s.doubleSpring)??!1},a=()=>{switch(n){case"top":return"50% 0%";case"bottom":return"50% 100%";case"left":return"0% 50%";case"right":return"100% 50%";case"top-left":return"0% 0%";case"top-right":return"100% 0%";case"bottom-left":return"0% 100%";case"bottom-right":return"100% 100%";case"center":default:return"50% 50%"}},o=f=>{const $=f*c*100,i=a();switch(t){case"ellipse":return`ellipse(${$}% ${$*.75}% at ${i})`;case"square":{const d=f*c*100,[y,S]=i.split(" "),b=parseFloat(y),h=parseFloat(S),p=d/2;return`polygon(${b-p}% ${h-p}%, ${b+p}% ${h-p}%, ${b+p}% ${h+p}%, ${b-p}% ${h+p}%)`}case"circle":default:return`circle(${$}% at ${i})`}},l=f=>{const $={clipPath:o(f)};return r&&($.opacity=f),$};return{in:()=>({spring:u,css:l}),out:()=>({spring:u,css:l}),...g&&{key:g}}},z=(e={})=>{const{spring:t,key:n}=e,c={stiffness:(t==null?void 0:t.stiffness)??1e3,damping:(t==null?void 0:t.damping)??100,doubleSpring:(t==null?void 0:t.doubleSpring)??!1};return{in:()=>({spring:c,css:()=>({})}),out:()=>({spring:c,css:()=>({})}),...n&&{key:n}}};exports.DoubleSpringIntegrator=x.DoubleSpringIntegrator;exports.InertiaIntegrator=x.InertiaIntegrator;exports.IntegratorProvider=x.IntegratorProvider;exports.SpringIntegrator=x.SpringIntegrator;exports.blur=v;exports.bounce=P;exports.fade=k;exports.fly=M;exports.mask=D;exports.none=z;exports.rotate=C;exports.scale=I;exports.slide=w;