feat: animation frame

packages/timing/animation-frame.coffee

@@ -1,54 +0,0 @@
-
-# Adapted from https://gist.github.com/paulirish/1579671#gistcomment-91515
-raf = window.requestAnimationFrame
-caf = window.cancelAnimationFrame
-
-w = window
-for vendor in ['ms', 'moz', 'webkit', 'o']
-  break if raf
-  raf = w["#{vendor}RequestAnimationFrame"]
-  caf = (
-    w["#{vendor}CancelAnimationFrame"] or
-    w["#{vendor}CancelRequestAnimationFrame"]
-  )
-
-# rAF is built in but cAF is not.
-if raf and not caf
-  browserRaf = raf
-  canceled = {}
-
-  raf = (fn) -> id = browserRaf (time) ->
-    return fn time unless id of canceled
-    delete canceled[id]
-
-  caf = (id) -> canceled[id] = true
-
-# Handle legacy browsers which don’t implement rAF
-unless raf
-  targetTime = 0
-
-  raf = (fn) ->
-    targetTime = Math.max targetTime + 16, currentTime = +new Date
-    w.setTimeout (-> fn +new Date), targetTime - currentTime
-
-  caf = (id) -> clearTimeout id
-
-export requestAnimationFrame = raf
-export cancelAnimationFrame = caf
-
-# setInterval, but for animations. :)
-said = 1
-handles = {}
-export setAnimation = (fn) ->
-  id = said++
-
-  handles[id] = raf ifn = do (id) -> (time) ->
-    return unless handles[id]?
-    fn time
-    handles[id] = raf ifn
-
-  return id
-
-export clearAnimation = (id) ->
-  caf handles[id]
-  delete handles[id]

packages/timing/animation-frame.js

@@ -0,0 +1,74 @@
+
+// Adapted from https://gist.github.com/paulirish/1579671#gistcomment-91515
+let raf = window.requestAnimationFrame;
+let caf = window.cancelAnimationFrame;
+// Vendors?
+const w = window;
+for (const vendor of ['ms', 'moz', 'webkit', 'o']) {
+  if (raf) {
+    break;
+  }
+  raf = window[`${vendor}RequestAnimationFrame`];
+  caf = window[`${vendor}CancelAnimationFrame`];
+  caf = caf || window[`${vendor}CancelRequestAnimationFrame`];
+}
+
+// rAF is built in but cAF is not.
+if (raf && !caf) {
+  const browserRaf = raf;
+  const canceled = {}
+  raf = (fn) => {
+    const id = browserRaf((time) => {
+      if (!(id in canceled)) {
+        return fn(time);
+      }
+      delete canceled[id];
+    });
+    return id;
+  };
+  caf = (id) => {
+    canceled[id] = true;
+  };
+}
+
+// Handle legacy browsers which don’t implement rAF
+if (!raf) {
+  let targetTime = 0;
+
+  raf = (fn) => {
+    const currentTime = +new Date;
+    targetTime = Math.max(targetTime + 16, currentTime);
+    const wfn = () => {
+      fn(+new Date);
+    }
+    return window.setTimeout(wfn, targetTime - currentTime);
+  };
+
+  caf = (id) => {
+    window.clearTimeout(id);
+  };
+}
+
+export {caf as cancelAnimationFrame};
+export {raf as requestAnimationFrame};
+
+// setInterval, but for animations. :)
+let said = 0
+const handles = {}
+export function setAnimation(fn) {
+  const id = ++said;
+  const wfn = (time) => {
+    if (!handles[id]) {
+      return;
+    }
+    fn(time);
+    handles[id] = raf(wfn);
+  }
+  handles[id] = raf(wfn);
+  return id;
+}
+
+export function clearAnimation (id) {
+  caf(handles[id]);
+  delete handles[id];
+}

packages/timing/index.js

@@ -1,3 +1,9 @@
 export {Animation} from './animation';
+export {
+  cancelAnimationFrame,
+  clearAnimation,
+  requestAnimationFrame,
+  setAnimation,
+} from './animation-frame';
 export {Ticker} from './ticker';
 export {TimedIndexMixin as TimedIndex} from './timed-index';