|
|
@@ -2,107 +2,121 @@ require('./index.css')
|
|
|
const anime = require('animejs').default
|
|
|
const animations = require('./animations')
|
|
|
const { getAttrs, unit, transforms } = require('./util')
|
|
|
+const WIDTH = 1920
|
|
|
+const HEIGHT = 1080
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
- const sprites = Array.from(document.querySelectorAll('sprite, .sprite'))
|
|
|
+ const resize = () => {
|
|
|
+ const wScale = window.innerWidth / WIDTH
|
|
|
+ const hScale = window.innerHeight / HEIGHT
|
|
|
+ const scale = Math.min(wScale, hScale)
|
|
|
+ document.body.style.zoom = scale
|
|
|
+ }
|
|
|
+ window.addEventListener('resize', resize)
|
|
|
+ resize()
|
|
|
+ const scenes = Array.from(document.querySelectorAll('scene, .scene'))
|
|
|
+ scenes.forEach(scene => {
|
|
|
|
|
|
- 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
|
|
|
+ const sprites = Array.from(scene.querySelectorAll('sprite, .sprite'))
|
|
|
|
|
|
- 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 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
|
|
|
|
|
|
- const getFrame = (time) => {
|
|
|
- const key = time.toString()
|
|
|
- if (!sprite.keyFrames[key]) {
|
|
|
- sprite.keyFrames[key] = {targets: scaler}
|
|
|
+ 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]
|
|
|
}
|
|
|
- return sprite.keyFrames[key]
|
|
|
- }
|
|
|
- const getMoverFrame = (time) => {
|
|
|
- const key = time.toString()
|
|
|
- if (!sprite.moverFrames[key]) {
|
|
|
- sprite.moverFrames[key] = {targets: mover}
|
|
|
+ const getMoverFrame = (time) => {
|
|
|
+ const key = time.toString()
|
|
|
+ if (!sprite.moverFrames[key]) {
|
|
|
+ sprite.moverFrames[key] = {targets: mover}
|
|
|
+ }
|
|
|
+ return sprite.moverFrames[key]
|
|
|
}
|
|
|
- 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]))
|
|
|
- // }
|
|
|
- }
|
|
|
+ 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 = unit(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)
|
|
|
+ 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
|
|
|
- }
|
|
|
+ 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]
|
|
|
+ })
|
|
|
})
|
|
|
- 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)
|
|
|
})
|
|
|
- })
|
|
|
- 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)
|
|
|
})
|
|
|
-
|
|
|
- console.log(timeline)
|
|
|
})
|
|
|
|
