Home Explore Help
Register Sign In
alancnet
/
animation
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Welcome to Programphile

Alan Colon 7 years ago
parent
db0a3ceec7
commit
82aa95aeb5
3 changed files with 33 additions and 7 deletions
Split View Show Diff Stats
  1. 18 4
      src/index.html
  2. 13 1
      src/index.js
  3. 2 2
      src/util.js

+ 18 - 4
src/index.html
View File 

@@ -2,10 +2,24 @@
 
   <head>
 
     <title>CHANGEME</title>
 
   </head>
 
-  <body>
 
-    <scene duration="10" background="https://www.alanc.net/programphile/computer-code-flythrough-loop-01.mov">
 
-      <sprite id="frown" left="50%" top="50%" translateX[0]="-50" translateX[1.5]="0" translateX[3]="-50">🙁</sprite>
 
-      <sprite id="smile" left="0" top="0" scale[0,1,2,3]="1,2,3,4" translateX[0,1,2,3,4]="0,100w,100w,0,50w" translateY[0,1,2,3,4]="0,0,1080,1080,540" duration[4]="6" rotate[4]="720" easing[4]="easeOutSine">😊</sprite>
 
+  <body ~="https://www.alanc.net/programphile">
 
+    <scene duration="10">
 
+      <video autoplay loop>
 
+        <source data-src="~/computer-code-flythrough-loop-01.mov" type="video/mp4" />
 
+      </video>
 
+
 
+      <img class="sprite" data-src="~/welcome.png" width="800"
 
+        rotate[0,1]="45,0"
 
+        translateY[0,1]="-50h,0"
 
+        left="50w" top="25h">
 
+      <img class="sprite" data-src="~/to.png" width="150"
 
+        scale[0,1.5]="0,1"
 
+        left="50w" top="40h">
 
+      <img class="sprite" data-src="~/programphile-hp.png" width="1500"
 
+        rotate[0,2]="-10,0"
 
+        translateY[0,2]="60h,0"
 
+        left="50w" top="70h">
 
+
 
     </scene>
 
   </body>
 
 </html>

+ 13 - 1
src/index.js
View File 

@@ -4,6 +4,7 @@ const animations = require('./animations')
 
 const { getAttrs, unit, transforms } = require('./util')
 
 const WIDTH = 1920
 
 const HEIGHT = 1080
 
+
 
 document.addEventListener('DOMContentLoaded', () => {
 
   const resize = () => {
 
     const wScale = window.innerWidth / WIDTH
 
@@ -13,6 +14,17 @@ document.addEventListener('DOMContentLoaded', () => {
 
   }
 
   window.addEventListener('resize', resize)
 
   resize()
 
+
 
+  Array.from(document.querySelectorAll('*'))
 
+  .flatMap(e => Array.from(e.attributes))
 
+  .filter(a => a.value && a.value.startsWith('~'))
 
+  .forEach(a => a.value = a.ownerElement.closest('[\\~]').attributes['~'].value + a.value.substr(1))
 
+  Array.from(document.querySelectorAll('[data-src]'))
 
+  .forEach(e => {
 
+    e.setAttribute('src', e.getAttribute('data-src'))
 
+    e.removeAttribute('data-src')
 
+  })
 
+
 
   const scenes = Array.from(document.querySelectorAll('scene, .scene'))
 
   scenes.forEach(scene => {
 
 
@@ -75,8 +87,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
               getFrame(time)[transform.name] = value
 
             }
 
           })
 
+          sprite.removeAttribute(attr.name)
 
         }
 
-        sprite.removeAttribute(attr.name)
 
       })
 
       // if (anim) {
 
       //   anime(Object.assign({

+ 2 - 2
src/util.js
View File 

@@ -10,9 +10,9 @@ const unit = (value, u = '') => {
 
   if (value instanceof Attr) value = value.value
 
   if (typeof value === 'number') value = value.toString()
 
   if (typeof value === 'string' && /^[\d\.]*$/.test(value)) value += u
 
-  const w = /^([\d\.]+)w$/i.exec(value)
 
+  const w = /^(-?[\d\.]+)w$/i.exec(value)
 
   if (w) value = `${+w[1] * 1920 / 100}px`
 
-  const h = /^([\d\.]+)h$/i.exec(value)
 
+  const h = /^(-?[\d\.]+)h$/i.exec(value)
 
   if (h) value = `${+h[1] * 1080 / 100}px`
 
   return value
 
 }