-
Notifications
You must be signed in to change notification settings - Fork 8
/
src.js
30 lines (21 loc) · 1.36 KB
/
src.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { shape, render, timeline, play } from '../../src'
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 shape1 = shape(shape1Keyframe1, shape1Keyframe2)
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 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)
play(animation)