diff --git a/README.md b/README.md index 6cf598c..81b503f 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ This is the **next** version on Wilderness, built on top of It's pretty much there. Remaining tasks before it is released: -- Timeline events +- ~~Timeline events~~ - ~~Testing the DOM libraries~~ - ~~Adding code comments to the DOM libraries~~ - Creating documentation diff --git a/examples/events/src.js b/examples/events/src.js index d097255..fc1f423 100644 --- a/examples/events/src.js +++ b/examples/events/src.js @@ -1,20 +1,28 @@ 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 shape1Keyframe1 = { type: 'rect', width: 10, height: 10, x: 10, y: 45, name: 'KEYFRAME_1' } +const shape1Keyframe2 = { type: 'rect', width: 10, height: 10, x: 40, y: 45, name: 'KEYFRAME_2' } -const square = shape(keyframe1, keyframe2) +const shape1 = shape(shape1Keyframe1, shape1Keyframe2) -const playbackOptions = { - alternate: true, - duration: 2000, - iterations: Infinity -} +const shape2Keyframe1 = { type: 'rect', width: 10, height: 10, x: 50, y: 45, name: 'KEYFRAME_1' } +const shape2Keyframe2 = { type: 'rect', width: 10, height: 10, x: 70, y: 45, name: 'KEYFRAME_2' } -const animation = timeline(square, playbackOptions) +const shape2 = shape(shape2Keyframe1, shape2Keyframe2) + +const playbackOptions = { alternate: true, duration: 10000, iterations: Infinity } + +const animation = timeline( + [ shape1, { name: 'SHAPE_1' } ], + [ shape2, { name: 'SHAPE_2' } ], + playbackOptions +) animation.event.subscribe('timeline.start', () => console.log('timeline.start')) animation.event.subscribe('timeline.finish', () => console.log('timeline.finish')) +animation.event.subscribe('shape.start', ({ shapeName }) => console.log(`shape.start ${shapeName}`)) +animation.event.subscribe('shape.finish', ({ shapeName }) => console.log(`shape.finish ${shapeName}`)) +animation.event.subscribe('keyframe', ({ keyframeName, shapeName }) => console.log(`keyframe ${shapeName} ${keyframeName}`)) animation.event.subscribe('frame', () => console.log('frame')) render(document.querySelector('svg'), animation) diff --git a/package.json b/package.json index 67f642d..89d541b 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ } }, "dependencies": { - "wilderness-core": "^2.1.0", + "wilderness-core": "^2.2.0", "wilderness-dom-node": "^1.2.1" }, "description": "A javascript API for making SVG animations", diff --git a/yarn.lock b/yarn.lock index 56a6710..43145df 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4067,9 +4067,9 @@ wide-align@^1.1.0: dependencies: string-width "^1.0.2" -wilderness-core@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/wilderness-core/-/wilderness-core-2.1.0.tgz#3f3fe49cff925acc3a95a89c22b56fd6dd819efd" +wilderness-core@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/wilderness-core/-/wilderness-core-2.2.0.tgz#cf616e9052a234a3911ecfbec80e21bd0c4ab09a" dependencies: points "^3.1.0" svg-points "^6.0.0"