feat(events): add events from wilderness core

colinmeinke · Jul 25, 2017 · ca60f10 · ca60f10
1 parent 51858bd
commit ca60f10
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 5 deletions.
diff --git a/examples/events/index.html b/examples/events/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+  <title>Basic tween</title>
+  <style>
+    html,
+    body {
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+    }
+
+    svg {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+</head>
+<body>
+  <svg
+    height="100"
+    preserveAspectRatio="xMidYMid meet"
+    width="100"
+    viewBox="0 0 100 100"
+  >
+  </svg>
+  <script src="dist.js"></script>
+</body>
diff --git a/examples/events/src.js b/examples/events/src.js
@@ -0,0 +1,22 @@
+import { shape, render, timeline, play } from '../../src'
+
+const keyframe1 = { type: 'rect', width: 10, height: 10, x: 0, y: 0 }
+const keyframe2 = { type: 'rect', width: 10, height: 10, x: 90, y: 90 }
+
+const square = shape(keyframe1, keyframe2)
+
+const playbackOptions = {
+  alternate: true,
+  duration: 2000,
+  iterations: Infinity
+}
+
+const animation = timeline(square, playbackOptions)
+
+animation.event.subscribe('timeline.start', () => console.log('timeline.start'))
+animation.event.subscribe('timeline.finish', () => console.log('timeline.finish'))
+animation.event.subscribe('frame', () => console.log('frame'))
+
+render(document.querySelector('svg'), animation)
+
+play(animation)
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     }
   },
   "dependencies": {
-    "wilderness-core": "^2.0.0",
+    "wilderness-core": "^2.1.0",
     "wilderness-dom-node": "^1.2.1"
   },
   "description": "A javascript API for making SVG animations",

diff --git a/src/timeline.js b/src/timeline.js
@@ -1,6 +1,6 @@
 /* globals __DEV__ */
 
-import { frame, play as corePlay, timeline as coreTimeline } from 'wilderness-core'
+import { events, frame, play as corePlay, timeline as coreTimeline } from 'wilderness-core'
 import { updateNode } from 'wilderness-dom-node'
 
 /**
@@ -63,6 +63,8 @@ const tick = ({ at, bypassTickingCheck = false, recurse = true } = {}) => {
         t.timelineShapes.map(({ shape }, i) => {
           updateNode(shape.node, frameShapes[ i ])
         })
+
+        events(t)
       })
 
       if (activeTimelines.length && recurse) {

diff --git a/yarn.lock b/yarn.lock
@@ -4067,9 +4067,9 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2"
 
-wilderness-core@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/wilderness-core/-/wilderness-core-2.0.0.tgz#8d3b8226dc1888ab627cb9ff5010c5f5e9e8feb4"
+wilderness-core@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wilderness-core/-/wilderness-core-2.1.0.tgz#3f3fe49cff925acc3a95a89c22b56fd6dd819efd"
   dependencies:
     points "^3.1.0"
     svg-points "^6.0.0"