-
Notifications
You must be signed in to change notification settings - Fork 8
/
client.js
68 lines (57 loc) · 1.25 KB
/
client.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { shape, render, play } from './tmp'
const from1 = {
type: 'path',
d: 'M20,20H80V80H20ZM30,30V70H70ZM40,40H60V60H40Z',
fillRule: 'evenodd',
rotate: 45
}
const from2 = {
type: 'path',
d: 'M20,120H80V180H20ZM30,130V170H70ZM40,140H60V160H40Z',
}
const from3 = {
type: 'path',
d: 'M20,220H80V280H20ZM30,230V270H70ZM40,240H60V260H40ZM35,250V265H50Z',
}
const to1 = {
type: 'path',
d: 'M290,40h20v20h-20z',
}
const to2 = {
type: 'path',
d: 'M290,140h20v20h-20z',
}
const to3 = {
type: 'path',
d: 'M290,240h20v20h-20z',
}
const animation1 = shape(from1, to1)
const animation2 = shape(from2, to2)
const animation3 = shape(from3, to3)
render(
{ selector: '.svg' },
shape({ ...from1, fill: 'rgba(0,0,0,0.2)' }),
shape({ ...from2, fill: 'rgba(0,0,0,0.2)' }),
shape({ ...from3, fill: 'rgba(0,0,0,0.2)' }),
shape({ ...to1, fill: 'rgba(0,0,0,0.2)' }),
shape({ ...to2, fill: 'rgba(0,0,0,0.2)' }),
shape({ ...to3, fill: 'rgba(0,0,0,0.2)' }),
animation1,
animation2,
animation3
)
play(animation1, {
duration: 4000,
iterations: Infinity,
alternate: true
})
play(animation2, {
duration: 4000,
iterations: Infinity,
alternate: true
})
play(animation3, {
duration: 4000,
iterations: Infinity,
alternate: true
})