Add pause/resume to shader and CSS animations (css-doodle#78)

* Add pause/resume to shader animations

* A quick implementation to pause/resume CSS animation

* Reduce min frame rate to 1fps

* Use last step value if possible

Author: yuanchuan

src/index.js

@@ -47,7 +47,10 @@ if (typeof customElements !== 'undefined') {
 
     disconnectedCallback() {
       Cache.clear();
-      this.clear_animations();
+      for (let animation of this.animations) {
+        animation.cancel();
+      }
+      this.animations = [];
     }
 
     update(styles) {
@@ -241,11 +244,18 @@ if (typeof customElements !== 'undefined') {
       draw_canvas(code).then(fn);
     }
 
-    clear_animations() {
+    pause() {
+      this.setAttribute('cssd-paused-animation', true);
       for (let animation of this.animations) {
-        animation.cancel();
+        animation.pause();
+      }
+    }
+
+    resume() {
+      this.removeAttribute('cssd-paused-animation');
+      for (let animation of this.animations) {
+        animation.resume();
       }
-      this.animations = [];
     }
 
     shader_to_image({ shader, cell, id }, fn) {
@@ -581,11 +591,9 @@ function get_basic_styles() {
     .map(n => `${ n }: inherit;`)
     .join('');
   return `
-    * {
-      box-sizing: border-box
-    }
-    *::after, *::before {
-      box-sizing: inherit
+    *, *::after, *::before {
+      box-sizing: border-box;
+      animation-play-state: var(--cssd-animation-play-state) !important;
     }
     :host, .host {
       display: block;
@@ -615,6 +623,10 @@ function get_basic_styles() {
       width: 100%;
       height: 100%;
     }
+    :host([cssd-paused-animation]) {
+      --cssd-animation-play-state: paused;
+      animation-play-state: paused !important;
+    }
   `;
 }
 

src/utils/create-animation-frame.js

@@ -1,14 +1,44 @@
+const STEP60 = 1000 / 60; // 60fps
+const STEP1 = 1000 / 1;   // 1fps
+
 function createAnimationFrame(fn) {
   let id;
-  function _loop(stamp) {
-    fn(stamp);
-    id = requestAnimationFrame(_loop);
+  let time = 0;
+  let lastTime = 0;
+  let lastStep = 0;
+  let paused = false;
+  function loop(stamp) {
+    if (!time) time = stamp;
+    fn(time);
+    let step = (stamp - lastTime);
+    if (step < STEP60) step = STEP60;
+    if (step > STEP1) step = lastStep || STEP1;
+    if (lastTime) time += step;
+    lastStep = step;
+    lastTime = stamp;
+    id = requestAnimationFrame(loop);
   }
-  id = requestAnimationFrame(_loop);
+  id = requestAnimationFrame(loop);
   return {
+    resume() {
+      if (id && paused) {
+        paused = false;
+        id = requestAnimationFrame(loop);
+      }
+    },
+    pause() {
+      if (id) {
+        cancelAnimationFrame(id);
+        paused = true;
+      }
+    },
     cancel() {
-      cancelAnimationFrame(id);
-    }
+      if (id) {
+        paused = false;
+        cancelAnimationFrame(id);
+        id = null;
+      }
+    },
   }
 }