459 lines
15 KiB
TypeScript
459 lines
15 KiB
TypeScript
import type { Scene } from '@/types/scene'
|
|
|
|
const RUNTIME_VERSION = '1'
|
|
|
|
const ENGINE_SOURCE = `(function(){
|
|
if (window.AnimatrPlayer && window.AnimatrPlayer.__v === '${RUNTIME_VERSION}') return;
|
|
|
|
function easing(name, t){
|
|
if(name==='easeIn')return t*t;
|
|
if(name==='easeOut')return 1-(1-t)*(1-t);
|
|
if(name==='easeInOut')return t<0.5?2*t*t:1-Math.pow(-2*t+2,2)/2;
|
|
return t;
|
|
}
|
|
function merge(base,partial){
|
|
var o={};for(var k in base)o[k]=base[k];
|
|
if(partial)for(var k2 in partial)o[k2]=partial[k2];
|
|
return o;
|
|
}
|
|
function lerp(a,b,t){return a+(b-a)*t;}
|
|
function parseHex(hex){
|
|
if(!hex)return null;
|
|
var h=String(hex).trim().replace('#','');
|
|
if(h.length===3)h=h[0]+h[0]+h[1]+h[1]+h[2]+h[2];
|
|
if(h.length<6)return null;
|
|
var n=parseInt(h.slice(0,6),16);
|
|
if(isNaN(n))return null;
|
|
return [(n>>16)&255,(n>>8)&255,n&255];
|
|
}
|
|
function formatHex(r,g,b){
|
|
function c(v){v=Math.round(v);if(v<0)v=0;if(v>255)v=255;var s=v.toString(16);return s.length<2?'0'+s:s;}
|
|
return '#'+c(r)+c(g)+c(b);
|
|
}
|
|
function lerpColor(a,b,t){
|
|
var pa=parseHex(a),pb=parseHex(b);
|
|
if(!pa||!pb)return t<0.5?a:b;
|
|
return formatHex(lerp(pa[0],pb[0],t),lerp(pa[1],pb[1],t),lerp(pa[2],pb[2],t));
|
|
}
|
|
function lerpProps(a,b,t){
|
|
var out={
|
|
x:lerp(a.x,b.x,t),
|
|
y:lerp(a.y,b.y,t),
|
|
scaleX:lerp(a.scaleX,b.scaleX,t),
|
|
scaleY:lerp(a.scaleY,b.scaleY,t),
|
|
rotation:lerp(a.rotation,b.rotation,t),
|
|
opacity:lerp(a.opacity,b.opacity,t)
|
|
};
|
|
if(a.fill&&b.fill)out.fill=lerpColor(a.fill,b.fill,t);
|
|
else if(b.fill)out.fill=b.fill;
|
|
else if(a.fill)out.fill=a.fill;
|
|
return out;
|
|
}
|
|
function sample(layer,time){
|
|
var kfs=layer.keyframes.slice().sort(function(a,b){return a.time-b.time;});
|
|
if(!kfs.length)return merge(layer.base);
|
|
if(time<=kfs[0].time)return merge(layer.base,kfs[0].props);
|
|
var last=kfs[kfs.length-1];
|
|
if(time>=last.time)return merge(layer.base,last.props);
|
|
for(var i=0;i<kfs.length-1;i++){
|
|
var a=kfs[i],b=kfs[i+1];
|
|
if(time>=a.time&&time<=b.time){
|
|
if(a.hold){
|
|
if(time>=b.time)return merge(layer.base,b.props);
|
|
return merge(layer.base,a.props);
|
|
}
|
|
var raw=(time-a.time)/(b.time-a.time);
|
|
var t=easing(b.easing,raw);
|
|
return lerpProps(merge(layer.base,a.props),merge(layer.base,b.props),t);
|
|
}
|
|
}
|
|
return merge(layer.base);
|
|
}
|
|
|
|
function loadImages(assets){
|
|
var imgs={};
|
|
var list=assets.filter(function(a){return a.kind==='image';});
|
|
return Promise.all(list.map(function(a){
|
|
return new Promise(function(resolve){
|
|
var img=new Image();
|
|
img.onload=function(){imgs[a.id]=img;resolve();};
|
|
img.onerror=function(){resolve();};
|
|
img.src=a.src;
|
|
});
|
|
})).then(function(){return imgs;});
|
|
}
|
|
|
|
function effectiveEnd(scene){
|
|
var max=0;
|
|
for(var i=0;i<scene.layers.length;i++){
|
|
var kfs=scene.layers[i].keyframes;
|
|
for(var j=0;j<kfs.length;j++){ if(kfs[j].time>max) max=kfs[j].time; }
|
|
}
|
|
var instances=scene.clipInstances||[];
|
|
var clips=scene.clips||[];
|
|
var clipById={};
|
|
for(var ci=0;ci<clips.length;ci++) clipById[clips[ci].id]=clips[ci];
|
|
for(var ii=0;ii<instances.length;ii++){
|
|
var inst=instances[ii];
|
|
var cl=clipById[inst.clipId];
|
|
if(!cl) continue;
|
|
var trimS=inst.trimStart||0;
|
|
var trimE=inst.trimEnd||0;
|
|
var end=inst.startTime+Math.max(0,cl.duration-trimS-trimE);
|
|
if(end>max) max=end;
|
|
}
|
|
if(max<=0) return scene.duration;
|
|
return Math.min(max,scene.duration);
|
|
}
|
|
function mount(container,scene,opts){
|
|
if(!container)return;
|
|
opts=opts||{};
|
|
var loop=opts.loop!==false;
|
|
var sceneEnd=effectiveEnd(scene);
|
|
var cs=getComputedStyle(container);
|
|
if(cs.position==='static')container.style.position='relative';
|
|
var canvas=document.createElement('canvas');
|
|
canvas.style.cssText='display:block;width:100%;height:100%;';
|
|
container.appendChild(canvas);
|
|
var ctx=canvas.getContext('2d');
|
|
var dpr=window.devicePixelRatio||1;
|
|
var size={w:0,h:0};
|
|
function resize(){
|
|
var r=container.getBoundingClientRect();
|
|
size.w=r.width;size.h=r.height;
|
|
canvas.width=Math.max(1,Math.round(r.width*dpr));
|
|
canvas.height=Math.max(1,Math.round(r.height*dpr));
|
|
}
|
|
var ro=new ResizeObserver(resize);
|
|
ro.observe(container);
|
|
resize();
|
|
var assetMap={};
|
|
scene.assets.forEach(function(a){assetMap[a.id]=a;});
|
|
var imgs={};
|
|
var start=0;
|
|
function frame(now){
|
|
if(!start)start=now;
|
|
var t=(now-start)/1000;
|
|
if(sceneEnd<=0){ draw(0); requestAnimationFrame(frame); return; }
|
|
if(loop) t=t%sceneEnd;
|
|
else if(t>sceneEnd) t=sceneEnd;
|
|
draw(t);
|
|
requestAnimationFrame(frame);
|
|
}
|
|
function drawLayer(layer,time){
|
|
var asset=assetMap[layer.assetId];
|
|
if(!asset||!layer.visible)return;
|
|
var p=sample(layer,time);
|
|
ctx.save();
|
|
ctx.globalAlpha=ctx.globalAlpha*p.opacity;
|
|
ctx.translate(p.x,p.y);
|
|
ctx.rotate(p.rotation*Math.PI/180);
|
|
ctx.scale(p.scaleX,p.scaleY);
|
|
var sOp=p.shadowOpacity||0;
|
|
var sBl=p.shadowBlur||0;
|
|
var sDi=p.shadowDistance||0;
|
|
if(sOp>0 && (sBl>0 || sDi>0)){
|
|
var sAn=(p.shadowAngle==null?90:p.shadowAngle)*Math.PI/180;
|
|
var sHex=(p.shadowColor||'#000000').replace('#','');
|
|
if(sHex.length===3){sHex=sHex[0]+sHex[0]+sHex[1]+sHex[1]+sHex[2]+sHex[2];}
|
|
var sNum=parseInt(sHex.slice(0,6),16);
|
|
if(isNaN(sNum))sNum=0;
|
|
ctx.shadowColor='rgba('+((sNum>>16)&255)+','+((sNum>>8)&255)+','+(sNum&255)+','+sOp+')';
|
|
ctx.shadowBlur=sBl;
|
|
ctx.shadowOffsetX=Math.cos(sAn)*sDi;
|
|
ctx.shadowOffsetY=Math.sin(sAn)*sDi;
|
|
}
|
|
if(asset.kind==='rect'){
|
|
var rOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
|
|
var rOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
|
|
var rBlur=(p.blur!=null?p.blur:(asset.blur||0));
|
|
ctx.fillStyle=p.fill||asset.fill;
|
|
if(rBlur>0) ctx.filter='blur('+rBlur+'px)';
|
|
ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height);
|
|
ctx.filter='none';
|
|
}else if(asset.kind==='circle'){
|
|
var cOffX=layer.offsetX!=null?layer.offsetX:0;
|
|
var cOffY=layer.offsetY!=null?layer.offsetY:0;
|
|
var cBlur=(p.blur!=null?p.blur:(asset.blur||0));
|
|
ctx.fillStyle=p.fill||asset.fill;
|
|
if(cBlur>0) ctx.filter='blur('+cBlur+'px)';
|
|
ctx.beginPath();
|
|
ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2);
|
|
ctx.fill();
|
|
ctx.filter='none';
|
|
}else if(asset.kind==='text'){
|
|
var tOffX=layer.offsetX!=null?layer.offsetX:0;
|
|
var tOffY=layer.offsetY!=null?layer.offsetY:0;
|
|
ctx.fillStyle=p.fill||asset.fill;
|
|
ctx.font=asset.fontSize+'px sans-serif';
|
|
ctx.textBaseline='top';
|
|
ctx.fillText(asset.text,-tOffX,-tOffY);
|
|
}else if(asset.kind==='image'){
|
|
var img=imgs[asset.id];
|
|
if(img){
|
|
var iOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
|
|
var iOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
|
|
ctx.drawImage(img,-iOffX,-iOffY,asset.width,asset.height);
|
|
}
|
|
}
|
|
ctx.shadowColor='transparent';
|
|
ctx.shadowBlur=0;
|
|
ctx.shadowOffsetX=0;
|
|
ctx.shadowOffsetY=0;
|
|
ctx.restore();
|
|
}
|
|
function draw(time){
|
|
var lw=scene.canvas.width,lh=scene.canvas.height;
|
|
var cw=size.w,ch=size.h;
|
|
if(!cw||!ch)return;
|
|
var s=Math.min(cw/lw,ch/lh);
|
|
var ox=(cw-lw*s)/2;
|
|
var oy=(ch-lh*s)/2;
|
|
ctx.setTransform(dpr,0,0,dpr,0,0);
|
|
ctx.clearRect(0,0,cw,ch);
|
|
ctx.save();
|
|
ctx.translate(ox,oy);
|
|
ctx.scale(s,s);
|
|
ctx.beginPath();
|
|
ctx.rect(0,0,lw,lh);
|
|
ctx.clip();
|
|
ctx.fillStyle=scene.canvas.background;
|
|
ctx.fillRect(0,0,lw,lh);
|
|
var layerById={};
|
|
for(var li=0;li<scene.layers.length;li++)layerById[scene.layers[li].id]=scene.layers[li];
|
|
var clipById2={};
|
|
var clips2=scene.clips||[];
|
|
for(var ci2=0;ci2<clips2.length;ci2++)clipById2[clips2[ci2].id]=clips2[ci2];
|
|
var instByTrack={};
|
|
var instances=scene.clipInstances||[];
|
|
for(var iInst=0;iInst<instances.length;iInst++){
|
|
var iE=instances[iInst];
|
|
(instByTrack[iE.clipTrackId]=instByTrack[iE.clipTrackId]||[]).push(iE);
|
|
}
|
|
var order=scene.trackOrder||[];
|
|
if(!order.length){for(var lj=0;lj<scene.layers.length;lj++)order.push(scene.layers[lj].id);}
|
|
for(var oi=order.length-1;oi>=0;oi--){
|
|
var id=order[oi];
|
|
var lyr=layerById[id];
|
|
if(lyr){ drawLayer(lyr,time); continue; }
|
|
var tInsts=instByTrack[id]||[];
|
|
for(var ti=0;ti<tInsts.length;ti++){
|
|
var inst2=tInsts[ti];
|
|
var clip2=clipById2[inst2.clipId];
|
|
if(!clip2)continue;
|
|
var tS=inst2.trimStart||0;
|
|
var tE=inst2.trimEnd||0;
|
|
var visible=Math.max(0,clip2.duration-tS-tE);
|
|
var offset=time-inst2.startTime;
|
|
if(offset<0||offset>visible)continue;
|
|
var localT=tS+offset;
|
|
for(var cl2=clip2.layers.length-1;cl2>=0;cl2--){
|
|
drawLayer(clip2.layers[cl2],localT);
|
|
}
|
|
}
|
|
}
|
|
ctx.restore();
|
|
}
|
|
loadImages(scene.assets).then(function(loaded){
|
|
imgs=loaded;
|
|
requestAnimationFrame(frame);
|
|
});
|
|
}
|
|
|
|
var api={ __v: '${RUNTIME_VERSION}', mount: mount };
|
|
window.AnimatrPlayer = api;
|
|
|
|
var pending = window.__animatrPending;
|
|
window.__animatrPending = null;
|
|
if (pending) for (var i=0;i<pending.length;i++) { try { pending[i](); } catch(e) { console.error(e); } }
|
|
})();
|
|
`
|
|
|
|
const SCENE_BOOT_SOURCE = `(function(){
|
|
var SCENE = __SCENE__;
|
|
var OPTIONS = __OPTIONS__;
|
|
var script = document.currentScript;
|
|
var target = null;
|
|
if (script && script.dataset && script.dataset.target) target = document.querySelector(script.dataset.target);
|
|
else if (script && script.parentElement) target = script.parentElement;
|
|
var autoOpts = {};
|
|
if (script && script.dataset && script.dataset.loop === 'false') autoOpts.loop = false;
|
|
function boot(){
|
|
if (!target || !window.AnimatrPlayer) return;
|
|
var merged = {};
|
|
for (var k in OPTIONS) merged[k] = OPTIONS[k];
|
|
for (var k2 in autoOpts) merged[k2] = autoOpts[k2];
|
|
window.AnimatrPlayer.mount(target, SCENE, merged);
|
|
}
|
|
if (window.AnimatrPlayer) boot();
|
|
else (window.__animatrPending = window.__animatrPending || []).push(boot);
|
|
})();
|
|
`
|
|
|
|
function jsonForExport(scene: Scene): string {
|
|
return JSON.stringify(scene)
|
|
}
|
|
|
|
export interface ExportOptions {
|
|
loop?: boolean
|
|
}
|
|
|
|
export function generateRuntimeScript(): string {
|
|
return (
|
|
'/* Animatr runtime v' + RUNTIME_VERSION + ' — generated ' + new Date().toISOString() + ' */\n' +
|
|
ENGINE_SOURCE
|
|
)
|
|
}
|
|
|
|
export function generateSceneScript(scene: Scene, options: ExportOptions = {}): string {
|
|
const sceneJson = jsonForExport(scene)
|
|
const optsJson = JSON.stringify({ loop: options.loop !== false })
|
|
return (
|
|
'/* Animatr scene — generated ' + new Date().toISOString() + '\n' +
|
|
' * Requires animatr-runtime.js (v' + RUNTIME_VERSION + ') to be loaded once per page.\n' +
|
|
' */\n' +
|
|
SCENE_BOOT_SOURCE.replace('__SCENE__', sceneJson).replace('__OPTIONS__', optsJson)
|
|
)
|
|
}
|
|
|
|
export function generateBundledScript(scene: Scene, options: ExportOptions = {}): string {
|
|
return (
|
|
'/* Animatr bundled export — generated ' + new Date().toISOString() + ' */\n' +
|
|
ENGINE_SOURCE +
|
|
'\n' +
|
|
generateSceneScriptBody(scene, options)
|
|
)
|
|
}
|
|
|
|
function generateSceneScriptBody(scene: Scene, options: ExportOptions): string {
|
|
const sceneJson = jsonForExport(scene)
|
|
const optsJson = JSON.stringify({ loop: options.loop !== false })
|
|
return SCENE_BOOT_SOURCE.replace('__SCENE__', sceneJson).replace('__OPTIONS__', optsJson)
|
|
}
|
|
|
|
export function downloadRuntime(filename = 'animatr-runtime.js') {
|
|
triggerDownload(generateRuntimeScript(), filename, 'application/javascript')
|
|
}
|
|
|
|
export function downloadSceneExport(scene: Scene, filename = 'animation.js') {
|
|
triggerDownload(generateSceneScript(scene), filename, 'application/javascript')
|
|
}
|
|
|
|
export function downloadBundledExport(scene: Scene, filename = 'animation-bundled.js') {
|
|
triggerDownload(generateBundledScript(scene), filename, 'application/javascript')
|
|
}
|
|
|
|
export function generateExampleHtml(scene: Scene, options: ExportOptions = {}): string {
|
|
const runtime = ENGINE_SOURCE
|
|
const sceneBoot = generateSceneScriptBody(scene, options)
|
|
const aspect = `${scene.canvas.width} / ${scene.canvas.height}`
|
|
return `<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>Animatr — Example</title>
|
|
<style>
|
|
:root { color-scheme: light dark; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 40px 20px;
|
|
background: #f5f5f7;
|
|
color: #1d1d1f;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body { background: #1e1e22; color: #e5e5ea; }
|
|
pre { background: #26262c !important; color: #e5e5ea; }
|
|
.stage { background: #26262c; box-shadow: 0 0 0 1px #3a3a42; }
|
|
}
|
|
h1 { font-size: 18px; font-weight: 600; margin: 0; }
|
|
p { margin: 0; color: #6e6e73; font-size: 13px; text-align: center; }
|
|
.stage {
|
|
width: min(100%, 960px);
|
|
aspect-ratio: ${aspect};
|
|
background: #fff;
|
|
box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.usage {
|
|
max-width: 760px;
|
|
width: 100%;
|
|
}
|
|
.usage h2 {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin: 0 0 6px;
|
|
color: #6e6e73;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
pre {
|
|
background: #fff;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
border-radius: 6px;
|
|
padding: 14px 16px;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
overflow: auto;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Animatr Export</h1>
|
|
<p>Load the runtime once, then embed as many scenes on the page as you like.</p>
|
|
|
|
<!-- Runtime: once per page -->
|
|
<script>
|
|
${runtime}
|
|
</script>
|
|
|
|
<div class="stage">
|
|
<!-- Scene: one per animation -->
|
|
<script>
|
|
${sceneBoot}
|
|
</script>
|
|
</div>
|
|
|
|
<div class="usage">
|
|
<h2>Embed on your own page</h2>
|
|
<pre><!-- once per page -->
|
|
<script src="animatr-runtime.js"></script>
|
|
|
|
<!-- per animation: one container + scene script -->
|
|
<div style="width: 800px; height: 450px;">
|
|
<script src="animation.js"></script>
|
|
</div>
|
|
|
|
<div style="width: 400px; height: 225px;">
|
|
<script src="animation-2.js"></script>
|
|
</div></pre>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`
|
|
}
|
|
|
|
export function downloadExampleHtml(scene: Scene, filename = 'animation-example.html') {
|
|
const source = generateExampleHtml(scene)
|
|
triggerDownload(source, filename, 'text/html')
|
|
}
|
|
|
|
function triggerDownload(source: string, filename: string, mime: string) {
|
|
const blob = new Blob([source], { type: mime })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = filename
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
setTimeout(() => URL.revokeObjectURL(url), 1000)
|
|
}
|