2d:null 2e:["$","title",null,{"children":"Animação | Vinícius Mello | Observable"}] 33:T9ed,class Animate { constructor() { this.div = html`

`; this.tl = anime.timeline({}); } remove(child) { this.div.removeChild(child); } move(ti,tf,span,pos,opt={}) { this.tl.add(Object.assign(opt,{ targets: span, left: `+=${pos[0]}px`, top: `+=${pos[1]}px`, duration: (tf-ti)*1000 }),ti*1000); if(Array.isArray(span)) { span.forEach( sp => { sp.pos[0] = sp.pos[0]+pos[0]; sp.pos[1] = sp.pos[1]+pos[1]; }); } else { span.pos[0] = span.pos[0]+pos[0]; span.pos[1] = span.pos[1]+pos[1]; } } moveTo(ti,tf,span,pos,opt={}) { this.tl.add(Object.assign(opt,{ targets: span, left: `${pos[0]}px`, top: `${pos[1]}px`, duration: (tf-ti)*1000 }),ti*1000); span.pos = pos; } swapH(ti,tf,span1,span2,sp,opt={}) { let t3 = (tf-ti)/3; let h = span2.pos[0]-span1.pos[0]; let v = span2.pos[1]-span1.pos[1]; this.move(ti,ti+t3,span1,[0,-sp],sp,opt); this.move(ti+t3,tf-t3,span1,[h,0],opt); this.move(tf-t3,tf,span1,[0,sp],opt); this.move(ti,ti+t3,span2,[0,sp],opt); this.move(ti+t3,tf-t3,span2,[-h,0],opt); this.move(tf-t3,tf,span2,[0,-sp],opt); span1.pos[0] = span1.pos[0] + h; span2.pos[0] = span2.pos[0] - h; } appear(ti,tf,span,pos,opt={}) { span.style.position = "absolute"; span.style.left = `${pos[0]}px`; span.style.top = `${pos[1]}px`; span.style.opacity = 0; span.pos = pos; this.div.append(span); this.tl.add(Object.assign(opt,{ targets: span, opacity: 1, duration: (tf-ti)*1000 }),ti*1000); } disappear(ti,tf,span,opt={}) { this.tl.add(Object.assign(opt,{ targets: span, opacity: 0, duration: (tf-ti)*1000 }),ti*1000); } reappear(ti,tf,span,opt={}) { this.tl.add(Object.assign(opt,{ targets: span, opacity: 1, duration: (tf-ti)*1000 }),ti*1000); } scale(ti,tf,span,f,opt={}) { this.tl.add(Object.assign(opt,{ targets: span, scale: f, duration: (tf-ti)*1000 }),ti*1000); } rotate(ti,tf,span,f,opt={}) { this.tl.add(Object.assign(opt,{ targets: span, rotate: f, duration: (tf-ti)*1000 }),ti*1000); } color(ti,tf,span,c,opt={}) { this.tl.add(Object.assign(opt,{ targets: span, color: c, duration: (tf-ti)*1000 }),ti*1000); } }34:T1218,function animaTeX(str) { let tl = new Animate(); tl.div.style.border = "5px solid red"; tl.div.append(html``); let objs = {}; str = String.raw(str); str = str.replace(/##.*\n/g,""); str = str.replace(/\s+/g," "); str = str.split("@["); function parse(str) { let result = []; let pars; while(str!=="") { if(pars=str.match(/^\$(.*)\$(.*)/)) { result.push(pars[1]); str = pars[2].trim(); } else if(pars=str.match(/^(.*)/)) { result.push(``); str = pars[2].trim(); } else if(pars=str.match(/^$([-+]?\d+),([-+]?\d+)$(.*)/)) { result.push([parseFloat(pars[1]),parseFloat(pars[2])]); str = pars[3].trim(); } else if(pars=str.match(/^([A-Za-z][A-Za-z0-9]*'*)(.*)/)) { result.push(pars[1]); str = pars[2].trim(); } else if(pars=str.match(/^([-+]?[0-9]*\.?[0-9]+)(.*)/)) { result.push(parseFloat(pars[1])); str = pars[2].trim(); } else if(pars=str.match(/^(\{.*\})(.*)/)) { console.log(pars[1]); result.push(JSON5.parse(pars[1])); str = pars[2].trim(); } } return result; } let colors = { "black" : "rgb(0,0,0)", "red" : "rgb(255,0,0)", "green" : "rgb(0,255,0)", "blue" : "rgb(0,0,255)", }; function clone(ti,tf,k,opt) { let o = objs[k]; let kp = k+"'"; if(o.type=="tex") { objs[kp] = { type: "tex", text: o.text, value: tex`${o.text}` }; objs[kp].value.style.color = colors.black; tl.appear(ti,tf,objs[kp].value,o.value.pos.slice(),opt); } else if(o.type=="group") { let pr = o.text.map( k => clone(ti,tf,k,opt) ); objs[kp] = { type: "group", text: pr, value: pr.map( l => objs[l].value ) } } return kp; } let evs = { "appear" : (ti,tf,str) => { let pars = parse(str); let o; if(pars[0].slice(0,4)===" { let pars = parse(str); tl.move(ti,tf,objs[pars[0]].value,pars[1],pars[2]); }, "moveTo" : (ti,tf,str) => { let pars = parse(str); tl.moveTo(ti,tf,objs[pars[0]].value,pars[1],pars[2]); }, "swap" : (ti,tf,str) => { let pars = parse(str); tl.swapH(ti,tf,objs[pars[0]].value,objs[pars[1]].value,pars[2],pars[3]); }, "disappear" : (ti,tf,str) => { let pars = parse(str); tl.disappear(ti,tf,objs[pars[0]].value,pars[1]); }, "reappear" : (ti,tf,str) => { let pars = parse(str); tl.reappear(ti,tf,objs[pars[0]].value,pars[1]); }, "scale" : (ti,tf,str) => { let pars = parse(str); tl.scale(ti,tf,objs[pars[0]].value,pars[1],pars[2]); }, "rotate" : (ti,tf,str) => { let pars = parse(str); tl.rotate(ti,tf,objs[pars[0]].value,pars[1],pars[2]); }, "color" : (ti,tf,str) => { let pars = parse(str); tl.color(ti,tf,objs[pars[0]].value,colors[pars[1]],pars[2]); }, "group" : (ti,tf,str) => { let pars = parse(str); let o = objs[pars[pars.length-1]] = { type: "group", text: pars.slice(0,-1), value: pars.slice(0,-1).map( k => objs[k].value), time: ti }; }, "clone" : (ti,tf,str) => { let pars = parse(str); let opt; if(typeof pars[pars.length-1] ==="object") { opt = pars[pars.length-1]; pars = pars.slice(0,-1); } pars.forEach( k => { clone(ti,tf,k,opt); }); }, "clear" : (ti,tf,str) => { let ks = Object.keys(objs); let t = []; ks.forEach( k => { if(objs[k].type!=="group") { t.push(objs[k].value); } }); tl.disappear(ti,tf,t, {complete: (anim) => { t.forEach( s => tl.remove(s) ); ks.forEach( k => objs[k] = undefined ); }}); } }; str.forEach( ev => { let l = ev.match(/(.*?),(.*?)\]:(.*)/); if(l) { let action = l[3].trim(); action = action.match(/(\w+) (.*)/); return evs[action[1]](parseFloat(l[1]),parseFloat(l[2]),action[2]); } }); return tl.div; } 35:[] 31:{"id":"be0ba8014607fada","slug":"animacao","title":"Animação","thumbnail":"bdc0225a09ad069d67ea7b4d1b84070bccaf8b326680b6dbbd091077f01e0ba3","access_level":"public","create_time":"$D2019-03-10T16:23:23.911Z","update_time":"$D2019-10-30T18:05:25.905Z","view_time":null,"first_public_time":"$D2019-03-11T18:59:31.195Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7a4ecd430a93cd6f","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":"starter_2024"},"version":665,"publish_version":665,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecc4854ab7ad95b6","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":null}],"members":[{"type":"individual","id":"ecc4854ab7ad95b6","login":"vinicius-mello","name":"Vinícius Mello","avatar_url":"https://avatars-next.observableusercontent.com/b5d4671aa488d8bcb984f575f985332403cde5f63942ea883a6a1a630941ec05","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Animação","cells":[{"id":0,"value":"md`# Animação`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"{\n let tl = new Animate();\n tl.div.style.border = \"5px solid red\";\n tl.div.append(html``);\n let op1 = tex`(`;\n let op2 = tex`(`;\n let x1 = tex`x`;\n let x2 = tex`x`;\n let y1 = tex`y`;\n let y2 = tex`y`;\n let plus1 = tex`+`;\n let plus2 = tex`+`;\n let cp1 = tex`)`;\n let cp2 = tex`)`;\n let twoexp = tex`{}^2`;\n cp1.style.color = \"rgb(255,0,0)\";\n tl.appear (0, 1, op1, [100,100]);\n tl.appear (0, 1, op2, [100,100]);\n tl.appear (0, 1, x1, [130,100]);\n tl.appear (0, 1, x2, [130,100]);\n tl.appear (0, 1, plus1, [180,100]);\n tl.appear (0, 1, plus2, [180,100]);\n tl.appear (0, 1, y1, [250,100]);\n tl.appear (0, 1, y2, [250,100]);\n tl.appear (0, 1, cp1, [290,100]);\n tl.appear (0, 1, cp2, [290,100]);\n tl.appear (0, 1, twoexp, [320,100]);\n tl.disappear(1, 5, twoexp);\n tl.move (1, 4, [op2,x2,plus2,y2,cp2], [220,0], {easing: 'linear' });\n return tl.div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"anime = require('https://unpkg.com/animejs/lib/anime.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"JSON5 = require('json5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"animaTeX`\n@[1,2]: appear $\\frac{1}{2}$ (100,100) a\n@[1,2]: appear $\\frac{1}{3}$ (150,100) b\n@[1,4]: appear (150,100) d\n@[1,2]: group a b c\n@[1,2]: clone c\n@[2,3]: swap a' b' 40\n@[3,4]: move c (200,0)\n@[3,4]: move c' (0,200) \n@[3,4]: color c' red \n@[3,4]: scale c 2.4\n@[4,5]: disappear c\n@[5,6]: reappear c\n@[6,10]: clear all\n@[10,11]: appear $\\text{Hello!}$ (100,100) t \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"animaTeX`\n@[1,2]: appear $(a+b)^2=$ (100,100) a\n@[2,3]: appear $(a+b)$ (430,100) b \n@[3,4]: clone b\n@[3,5]: move b' (200,0)\n@[5,6]: appear $=$ (0,200) c\n@[6,7]: move c (346,0)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"animaTeX`\n@[1,3]: appear $x^2$ (100,100) a\n@[3,5]: move a (200,0)\n@[3,4]: scale a 2\n@[4,5]: scale a 1\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"animaTeX`\n@[1,3]: appear $2x$ (280,230) \n@[1,3]: appear $+4$ (370,230) a\n@[1,3]: appear $=$ (490,230)\n@[1,3]: appear $13$ (560,230)\n@[1,3]: appear $-x$ (640,230) b\n@[3,5]: move a (180,200) { easing: 'steps(5)' }\n@[3,5]: scale a 2\n@[3,5]: rotate a 90 {easing: 'linear'}\n@[5,7]: move b (-180,-200)\n@[5,7]: scale b 2\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"JSON5.parse(\"{ easing: 'steps(8)' }bla\".match(/(\\{.*\\})(.*)/)[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"