init
This commit is contained in:
th committed
commit
c6863f2bfc
34 files changed
+6909
No files matched your search
@@ -0,0 +1,326 @@
|
||||
import type { Scene } from '@/types/scene'
|
||||
|
||||
const RUNTIME_SOURCE = `(function(){
|
||||
var SCENE = __SCENE__;
|
||||
var OPTIONS = __OPTIONS__;
|
||||
|
||||
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){
|
||||
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; }
|
||||
}
|
||||
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 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);
|
||||
for(var i=0;i<scene.layers.length;i++){
|
||||
var layer=scene.layers[i];
|
||||
if(!layer.visible)continue;
|
||||
var asset=assetMap[layer.assetId];
|
||||
if(!asset)continue;
|
||||
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);
|
||||
if(asset.kind==='rect'){
|
||||
var rOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
|
||||
var rOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
|
||||
ctx.fillStyle=p.fill||asset.fill;
|
||||
ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height);
|
||||
}else if(asset.kind==='circle'){
|
||||
ctx.fillStyle=p.fill||asset.fill;
|
||||
ctx.beginPath();
|
||||
ctx.arc(0,0,asset.radius,0,Math.PI*2);
|
||||
ctx.fill();
|
||||
}else if(asset.kind==='text'){
|
||||
ctx.fillStyle=p.fill||asset.fill;
|
||||
ctx.font=asset.fontSize+'px sans-serif';
|
||||
ctx.textBaseline='top';
|
||||
ctx.fillText(asset.text,0,0);
|
||||
}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.restore();
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
loadImages(scene.assets).then(function(loaded){
|
||||
imgs=loaded;
|
||||
requestAnimationFrame(frame);
|
||||
});
|
||||
}
|
||||
|
||||
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){
|
||||
if(script.dataset.loop==='false')autoOpts.loop=false;
|
||||
}
|
||||
if(target)mount(target,SCENE,Object.assign({},OPTIONS,autoOpts));
|
||||
var api={mount:function(c,opts){return mount(c,SCENE,opts||{});}};
|
||||
if(typeof window!=='undefined'){
|
||||
window.AnimatrPlayer=window.AnimatrPlayer||api;
|
||||
}
|
||||
})();
|
||||
`
|
||||
|
||||
function jsonForExport(scene: Scene): string {
|
||||
return JSON.stringify(scene)
|
||||
}
|
||||
|
||||
export interface ExportOptions {
|
||||
loop?: boolean
|
||||
}
|
||||
|
||||
export function generateExportScript(scene: Scene, options: ExportOptions = {}): string {
|
||||
const sceneJson = jsonForExport(scene)
|
||||
const optsJson = JSON.stringify({ loop: options.loop !== false })
|
||||
return (
|
||||
'/* Animatr export — generated ' +
|
||||
new Date().toISOString() +
|
||||
' */\n' +
|
||||
RUNTIME_SOURCE.replace('__SCENE__', sceneJson).replace('__OPTIONS__', optsJson)
|
||||
)
|
||||
}
|
||||
|
||||
export function downloadExport(scene: Scene, filename = 'animation.js') {
|
||||
const source = generateExportScript(scene)
|
||||
triggerDownload(source, filename, 'application/javascript')
|
||||
}
|
||||
|
||||
export function generateExampleHtml(scene: Scene, options: ExportOptions = {}): string {
|
||||
const script = generateExportScript(scene, options)
|
||||
const aspect = `${scene.canvas.width} / ${scene.canvas.height}`
|
||||
return `<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>Animatr — Beispiel</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>Diese HTML-Datei enthält Runtime + Szene inline — einfach im Browser öffnen.</p>
|
||||
|
||||
<div class="stage">
|
||||
<script>
|
||||
${script}
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div class="usage">
|
||||
<h2>Einbinden in eine eigene Seite</h2>
|
||||
<pre><div style="width: 800px; height: 450px;">
|
||||
<script src="animation.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)
|
||||
}
|
||||
Reference in new issue
Block a user