|
|
@@ -1,4 +1,108 @@
|
|
|
require('./index.css')
|
|
|
+const anime = require('animejs').default
|
|
|
+const animations = require('./animations')
|
|
|
+const { getAttrs, unit, transforms } = require('./util')
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
- console.log(roboto)
|
|
|
-})
|
|
|
+ const sprites = Array.from(document.querySelectorAll('sprite, .sprite'))
|
|
|
+
|
|
|
+ const spritesById = {}
|
|
|
+ sprites
|
|
|
+ .filter(sprite => sprite.id)
|
|
|
+ .forEach(sprite => spritesById[sprite.id] = sprite)
|
|
|
+ const timeline = anime.timeline()
|
|
|
+ const initialize = sprite => {
|
|
|
+ const mover = document.createElement('mover')
|
|
|
+ const centerer = document.createElement('centerer')
|
|
|
+ const scaler = document.createElement('scaler')
|
|
|
+ mover.appendChild(centerer)
|
|
|
+ centerer.appendChild(scaler)
|
|
|
+ sprite.replaceWith(mover)
|
|
|
+ scaler.appendChild(sprite)
|
|
|
+ if (sprite.initialized) return
|
|
|
+ sprite.initialized = true
|
|
|
+
|
|
|
+ sprite.keyFrames = {}
|
|
|
+ sprite.moverFrames = {}
|
|
|
+ ;['left', 'right', 'top', 'bottom', 'width', 'height', 'opacity'].forEach(key => {
|
|
|
+ const val = sprite.attributes[key]
|
|
|
+ if (val) mover.style[key] = unit(val)
|
|
|
+ })
|
|
|
+
|
|
|
+ const getFrame = (time) => {
|
|
|
+ const key = time.toString()
|
|
|
+ if (!sprite.keyFrames[key]) {
|
|
|
+ sprite.keyFrames[key] = {targets: scaler}
|
|
|
+ }
|
|
|
+ return sprite.keyFrames[key]
|
|
|
+ }
|
|
|
+ const getMoverFrame = (time) => {
|
|
|
+ const key = time.toString()
|
|
|
+ if (!sprite.moverFrames[key]) {
|
|
|
+ sprite.moverFrames[key] = {targets: mover}
|
|
|
+ }
|
|
|
+ return sprite.moverFrames[key]
|
|
|
+ }
|
|
|
+
|
|
|
+ Array.from(sprite.attributes).forEach(attr => {
|
|
|
+ let {1:name, 2:time} = (/^([^\]]*)\[([^\]]*)\]$/.exec(attr.name) || [null, attr.name, "0"])
|
|
|
+ const transform = transforms[name]
|
|
|
+ if (transform) {
|
|
|
+ const times = time.split(',').map(x => +x)
|
|
|
+ const values = attr.value.split(',').map(x => x.trim())
|
|
|
+ if (times.length !== values.length) return console.error('Mismatched time, value arrays', attr)
|
|
|
+ times.forEach((time, i) => {
|
|
|
+ const value = values[i]
|
|
|
+ console.log(`${transform.name} ${value} at ${time}`, attr)
|
|
|
+ if (transform.global) {
|
|
|
+ getMoverFrame(time)[transform.name] = value
|
|
|
+ getFrame(time)[transform.name] = value
|
|
|
+ } else if (transform.mover) {
|
|
|
+ getMoverFrame(time)[transform.name] = value
|
|
|
+ } else {
|
|
|
+ getFrame(time)[transform.name] = value
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ sprite.removeAttribute(attr.name)
|
|
|
+ })
|
|
|
+ // if (anim) {
|
|
|
+ // anime(Object.assign({
|
|
|
+ // targets: sprite
|
|
|
+ // }, animations[anim]))
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ sprites.forEach(initialize)
|
|
|
+
|
|
|
+ const allFrames = []
|
|
|
+ sprites.forEach(({keyFrames, moverFrames}) => {
|
|
|
+ const frames = [...Object.entries(keyFrames), ...Object.entries(moverFrames)].map(([time, frame]) => [+time * 1000, frame])
|
|
|
+ frames.sort((a, b) => a[0] - b[0])
|
|
|
+ frames.forEach(frame => {
|
|
|
+ frame[1].targets.lastTime = 0
|
|
|
+ if (frame[1].duration) {
|
|
|
+ frame[1].duration = 1000 * +frame[1].duration
|
|
|
+ }
|
|
|
+ })
|
|
|
+ frames.forEach(frame => {
|
|
|
+ allFrames.push(frame)
|
|
|
+ if (frame[0] == 0) {
|
|
|
+ frame[0] = Number.EPSILON
|
|
|
+ frame[1].easing = 'steps(1)'
|
|
|
+ } else {
|
|
|
+ frame[1].duration = frame[1].duration || Math.min(1000, frame[0] - frame[1].targets.lastTime)
|
|
|
+ }
|
|
|
+ frame[1].targets.lastTime = frame[0]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ allFrames.sort((a, b) => a[0] - b[0])
|
|
|
+
|
|
|
+ console.log(allFrames)
|
|
|
+ allFrames.forEach(([time, keyFrame]) => {
|
|
|
+ timeline.add(keyFrame, time)
|
|
|
+ console.log(time, keyFrame)
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log(timeline)
|
|
|
+})
|
|
|
+
|
Alan Colon