chnobli 0.1.9 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/animation/Animation.d.ts +37 -0
- package/dist/animation/Animation.d.ts.map +1 -0
- package/dist/animation/Animation.js +232 -0
- package/dist/animation/Animation.js.map +1 -0
- package/dist/animation/public.d.ts +68 -0
- package/dist/animation/public.d.ts.map +1 -0
- package/dist/animation/public.js +115 -0
- package/dist/animation/public.js.map +1 -0
- package/dist/animator/Animator.d.ts +30 -0
- package/dist/animator/Animator.d.ts.map +1 -0
- package/dist/animator/Animator.js +97 -0
- package/dist/animator/Animator.js.map +1 -0
- package/dist/animator/index.d.ts +5 -0
- package/dist/animator/index.d.ts.map +1 -0
- package/dist/animator/index.js +53 -0
- package/dist/animator/index.js.map +1 -0
- package/dist/animator/public.d.ts +16 -0
- package/dist/animator/public.d.ts.map +1 -0
- package/dist/animator/public.js +50 -0
- package/dist/animator/public.js.map +1 -0
- package/dist/chnobli.d.ts +15 -0
- package/dist/chnobli.d.ts.map +1 -0
- package/dist/chnobli.js +59 -0
- package/dist/chnobli.js.map +1 -0
- package/dist/property/BasicProperty.d.ts +38 -0
- package/dist/property/BasicProperty.d.ts.map +1 -0
- package/dist/property/BasicProperty.js +72 -0
- package/dist/property/BasicProperty.js.map +1 -0
- package/dist/property/ClassProperty.d.ts +32 -0
- package/dist/property/ClassProperty.d.ts.map +1 -0
- package/dist/property/ClassProperty.js +108 -0
- package/dist/property/ClassProperty.js.map +1 -0
- package/dist/property/Property.d.ts +13 -0
- package/dist/property/Property.d.ts.map +1 -0
- package/dist/property/Property.js +22 -0
- package/dist/property/Property.js.map +1 -0
- package/dist/property/StyleProperty.d.ts +25 -0
- package/dist/property/StyleProperty.d.ts.map +1 -0
- package/dist/property/StyleProperty.js +221 -0
- package/dist/property/StyleProperty.js.map +1 -0
- package/dist/property/TransformProperty.d.ts +15 -0
- package/dist/property/TransformProperty.d.ts.map +1 -0
- package/dist/property/TransformProperty.js +43 -0
- package/dist/property/TransformProperty.js.map +1 -0
- package/dist/property/TransformXYProperty.d.ts +28 -0
- package/dist/property/TransformXYProperty.d.ts.map +1 -0
- package/dist/property/TransformXYProperty.js +65 -0
- package/dist/property/TransformXYProperty.js.map +1 -0
- package/dist/responsive/ResponsiveEvent.d.ts +17 -0
- package/dist/responsive/ResponsiveEvent.d.ts.map +1 -0
- package/dist/responsive/ResponsiveEvent.js +45 -0
- package/dist/responsive/ResponsiveEvent.js.map +1 -0
- package/dist/responsive/TestEvent.d.ts +11 -0
- package/dist/responsive/TestEvent.d.ts.map +1 -0
- package/dist/responsive/TestEvent.js +26 -0
- package/dist/responsive/TestEvent.js.map +1 -0
- package/dist/scroll/Scroll.d.ts +61 -0
- package/dist/scroll/Scroll.d.ts.map +1 -0
- package/dist/scroll/Scroll.js +280 -0
- package/dist/scroll/Scroll.js.map +1 -0
- package/dist/scroll/ScrollEvent.d.ts +17 -0
- package/dist/scroll/ScrollEvent.d.ts.map +1 -0
- package/dist/scroll/ScrollEvent.js +40 -0
- package/dist/scroll/ScrollEvent.js.map +1 -0
- package/dist/scroll/index.d.ts +8 -0
- package/dist/scroll/index.d.ts.map +1 -0
- package/dist/scroll/index.js +9 -0
- package/dist/scroll/index.js.map +1 -0
- package/dist/scroll/public.d.ts +35 -0
- package/dist/scroll/public.d.ts.map +1 -0
- package/dist/scroll/public.js +50 -0
- package/dist/scroll/public.js.map +1 -0
- package/dist/stagger/stagger.d.ts +20 -0
- package/dist/stagger/stagger.d.ts.map +1 -0
- package/dist/stagger/stagger.js +43 -0
- package/dist/stagger/stagger.js.map +1 -0
- package/dist/target/BaseTarget.old.d.ts +33 -0
- package/dist/target/BaseTarget.old.d.ts.map +1 -0
- package/dist/target/BaseTarget.old.js +73 -0
- package/dist/target/BaseTarget.old.js.map +1 -0
- package/dist/target/DomTarget.d.ts +41 -0
- package/dist/target/DomTarget.d.ts.map +1 -0
- package/dist/target/DomTarget.js +230 -0
- package/dist/target/DomTarget.js.map +1 -0
- package/dist/target/ObjectTarget.d.ts +31 -0
- package/dist/target/ObjectTarget.d.ts.map +1 -0
- package/dist/target/ObjectTarget.js +108 -0
- package/dist/target/ObjectTarget.js.map +1 -0
- package/dist/target/Target.d.ts +25 -0
- package/dist/target/Target.d.ts.map +1 -0
- package/dist/target/Target.js +25 -0
- package/dist/target/Target.js.map +1 -0
- package/dist/target/TestDomNode.d.ts +14 -0
- package/dist/target/TestDomNode.d.ts.map +1 -0
- package/dist/target/TestDomNode.js +55 -0
- package/dist/target/TestDomNode.js.map +1 -0
- package/dist/timeline/Nested.d.ts +30 -0
- package/dist/timeline/Nested.d.ts.map +1 -0
- package/dist/timeline/Nested.js +51 -0
- package/dist/timeline/Nested.js.map +1 -0
- package/dist/timeline/Timeline.d.ts +42 -0
- package/dist/timeline/Timeline.d.ts.map +1 -0
- package/dist/timeline/Timeline.js +306 -0
- package/dist/timeline/Timeline.js.map +1 -0
- package/dist/timeline/public.d.ts +167 -0
- package/dist/timeline/public.d.ts.map +1 -0
- package/dist/timeline/public.js +396 -0
- package/dist/timeline/public.js.map +1 -0
- package/dist/timing/AnimationFrameTicker.d.ts +32 -0
- package/dist/timing/AnimationFrameTicker.d.ts.map +1 -0
- package/dist/timing/AnimationFrameTicker.js +138 -0
- package/dist/timing/AnimationFrameTicker.js.map +1 -0
- package/dist/timing/Ease.d.ts +6 -0
- package/dist/timing/Ease.d.ts.map +1 -0
- package/dist/timing/Ease.js +15 -0
- package/dist/timing/Ease.js.map +1 -0
- package/dist/timing/TestTicker.d.ts +19 -0
- package/dist/timing/TestTicker.d.ts.map +1 -0
- package/dist/timing/TestTicker.js +85 -0
- package/dist/timing/TestTicker.js.map +1 -0
- package/dist/timing/Ticker.d.ts +16 -0
- package/dist/timing/Ticker.d.ts.map +1 -0
- package/dist/timing/Ticker.js +2 -0
- package/dist/timing/Ticker.js.map +1 -0
- package/dist/timing/Timing.d.ts +116 -0
- package/dist/timing/Timing.d.ts.map +1 -0
- package/dist/timing/Timing.js +310 -0
- package/dist/timing/Timing.js.map +1 -0
- package/dist/timing/easing.d.ts +158 -0
- package/dist/timing/easing.d.ts.map +1 -0
- package/dist/timing/easing.js +273 -0
- package/dist/timing/easing.js.map +1 -0
- package/dist/utils/Events.d.ts +9 -0
- package/dist/utils/Events.d.ts.map +1 -0
- package/dist/utils/Events.js +35 -0
- package/dist/utils/Events.js.map +1 -0
- package/dist/utils/internal.d.ts +5 -0
- package/dist/utils/internal.d.ts.map +1 -0
- package/dist/utils/internal.js +9 -0
- package/dist/utils/internal.js.map +1 -0
- package/dist/utils/motionpath.d.ts +16 -0
- package/dist/utils/motionpath.d.ts.map +1 -0
- package/dist/utils/motionpath.js +41 -0
- package/dist/utils/motionpath.js.map +1 -0
- package/dist/utils/utils.d.ts +44 -0
- package/dist/utils/utils.d.ts.map +1 -0
- package/dist/utils/utils.js +88 -0
- package/dist/utils/utils.js.map +1 -0
- package/dist/values/ColorValue.d.ts +12 -0
- package/dist/values/ColorValue.d.ts.map +1 -0
- package/dist/values/ColorValue.js +134 -0
- package/dist/values/ColorValue.js.map +1 -0
- package/dist/values/StyleValue.d.ts +41 -0
- package/dist/values/StyleValue.d.ts.map +1 -0
- package/dist/values/StyleValue.js +159 -0
- package/dist/values/StyleValue.js.map +1 -0
- package/dist/values/Value.d.ts +13 -0
- package/dist/values/Value.d.ts.map +1 -0
- package/dist/values/Value.js +38 -0
- package/dist/values/Value.js.map +1 -0
- package/dist/values/defaultcolors.d.ts +2 -0
- package/dist/values/defaultcolors.d.ts.map +1 -0
- package/dist/values/defaultcolors.js +149 -0
- package/dist/values/defaultcolors.js.map +1 -0
- package/eslint.config.js +23 -0
- package/package.json +10 -3
- package/src/animation/Animation.ts +6 -3
- package/src/animator/Animator.ts +130 -0
- package/src/animator/index.ts +56 -0
- package/src/animator/public.ts +66 -0
- package/src/chnobli.ts +3 -2
- package/src/property/ClassProperty.ts +1 -1
- package/src/property/TransformXYProperty.ts +1 -1
- package/src/scroll/Scroll.ts +202 -51
- package/src/scroll/ScrollEvent.ts +1 -0
- package/src/scroll/index.ts +3 -0
- package/src/scroll/public.ts +35 -2
- package/src/target/DomTarget.ts +1 -1
- package/src/target/ObjectTarget.ts +19 -13
- package/src/tests/properties.test.ts +44 -3
- package/src/tests/timeline.test.ts +1 -1
- package/src/tests/timing.test.ts +32 -0
- package/src/tests/usecases.test.ts +40 -2
- package/src/tests/values.test.ts +9 -9
- package/src/timeline/Timeline.ts +5 -4
- package/src/timeline/public.ts +34 -12
- package/src/timing/AnimationFrameTicker.ts +6 -1
- package/src/timing/TestTicker.ts +7 -1
- package/src/timing/Ticker.ts +5 -1
- package/src/timing/Timing.ts +127 -91
- package/src/utils/Events.ts +1 -1
- package/src/utils/motionpath.ts +5 -5
- package/src/utils/utils.ts +0 -10
- package/src/values/ColorValue.ts +1 -0
- package/src/values/Value.ts +1 -1
- package/.eslintrc.cjs +0 -39
- package/src/animator.js +0 -187
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
export const COLORS = {
|
|
2
|
+
black: [0, 0, 0],
|
|
3
|
+
silver: [192, 192, 192],
|
|
4
|
+
gray: [128, 128, 128],
|
|
5
|
+
white: [255, 255, 255],
|
|
6
|
+
maroon: [128, 0, 0],
|
|
7
|
+
red: [255, 0, 0],
|
|
8
|
+
purple: [128, 0, 128],
|
|
9
|
+
fuchsia: [255, 0, 255],
|
|
10
|
+
green: [0, 128, 0],
|
|
11
|
+
lime: [0, 255, 0],
|
|
12
|
+
olive: [128, 128, 0],
|
|
13
|
+
yellow: [255, 255, 0],
|
|
14
|
+
navy: [0, 0, 128],
|
|
15
|
+
blue: [0, 0, 255],
|
|
16
|
+
teal: [0, 128, 128],
|
|
17
|
+
aqua: [0, 255, 255],
|
|
18
|
+
aliceblue: [240, 248, 255],
|
|
19
|
+
antiquewhite: [250, 235, 215],
|
|
20
|
+
aquamarine: [127, 255, 212],
|
|
21
|
+
azure: [240, 255, 255],
|
|
22
|
+
beige: [245, 245, 220],
|
|
23
|
+
bisque: [255, 228, 196],
|
|
24
|
+
blanchedalmond: [255, 235, 205],
|
|
25
|
+
blueviolet: [138, 43, 226],
|
|
26
|
+
brown: [165, 42, 42],
|
|
27
|
+
burlywood: [222, 184, 135],
|
|
28
|
+
cadetblue: [95, 158, 160],
|
|
29
|
+
chartreuse: [127, 255, 0],
|
|
30
|
+
chocolate: [210, 105, 30],
|
|
31
|
+
coral: [255, 127, 80],
|
|
32
|
+
cornflowerblue: [100, 149, 237],
|
|
33
|
+
cornsilk: [255, 248, 220],
|
|
34
|
+
crimson: [220, 20, 60],
|
|
35
|
+
cyan: [0, 255, 255],
|
|
36
|
+
darkblue: [0, 0, 139],
|
|
37
|
+
darkcyan: [0, 139, 139],
|
|
38
|
+
darkgoldenrod: [184, 134, 11],
|
|
39
|
+
darkgray: [169, 169, 169],
|
|
40
|
+
darkgreen: [0, 100, 0],
|
|
41
|
+
darkgrey: [169, 169, 169],
|
|
42
|
+
darkkhaki: [189, 183, 107],
|
|
43
|
+
darkmagenta: [139, 0, 139],
|
|
44
|
+
darkolivegreen: [85, 107, 47],
|
|
45
|
+
darkorange: [255, 140, 0],
|
|
46
|
+
darkorchid: [153, 50, 204],
|
|
47
|
+
darkred: [139, 0, 0],
|
|
48
|
+
darksalmon: [233, 150, 122],
|
|
49
|
+
darkseagreen: [143, 188, 143],
|
|
50
|
+
darkslateblue: [72, 61, 139],
|
|
51
|
+
darkslategray: [47, 79, 79],
|
|
52
|
+
darkslategrey: [47, 79, 79],
|
|
53
|
+
darkturquoise: [0, 206, 209],
|
|
54
|
+
darkviolet: [148, 0, 211],
|
|
55
|
+
deeppink: [255, 20, 147],
|
|
56
|
+
deepskyblue: [0, 191, 255],
|
|
57
|
+
dimgray: [105, 105, 105],
|
|
58
|
+
dimgrey: [105, 105, 105],
|
|
59
|
+
dodgerblue: [30, 144, 255],
|
|
60
|
+
firebrick: [178, 34, 34],
|
|
61
|
+
floralwhite: [255, 250, 240],
|
|
62
|
+
forestgreen: [34, 139, 34],
|
|
63
|
+
gainsboro: [220, 220, 220],
|
|
64
|
+
ghostwhite: [248, 248, 255],
|
|
65
|
+
gold: [255, 215, 0],
|
|
66
|
+
goldenrod: [218, 165, 32],
|
|
67
|
+
greenyellow: [173, 255, 47],
|
|
68
|
+
honeydew: [240, 255, 240],
|
|
69
|
+
hotpink: [255, 105, 180],
|
|
70
|
+
indianred: [205, 92, 92],
|
|
71
|
+
indigo: [75, 0, 130],
|
|
72
|
+
ivory: [255, 255, 240],
|
|
73
|
+
khaki: [240, 230, 140],
|
|
74
|
+
lavender: [230, 230, 250],
|
|
75
|
+
lavenderblush: [255, 240, 245],
|
|
76
|
+
lawngreen: [124, 252, 0],
|
|
77
|
+
lemonchiffon: [255, 250, 205],
|
|
78
|
+
lightblue: [173, 216, 230],
|
|
79
|
+
lightcoral: [240, 128, 128],
|
|
80
|
+
lightcyan: [224, 255, 255],
|
|
81
|
+
lightgoldenrodyellow: [250, 250, 210],
|
|
82
|
+
lightgray: [211, 211, 211],
|
|
83
|
+
lightgreen: [144, 238, 144],
|
|
84
|
+
lightgrey: [211, 211, 211],
|
|
85
|
+
lightpink: [255, 182, 193],
|
|
86
|
+
lightsalmon: [255, 160, 122],
|
|
87
|
+
lightseagreen: [32, 178, 170],
|
|
88
|
+
lightskyblue: [135, 206, 250],
|
|
89
|
+
lightslategray: [119, 136, 153],
|
|
90
|
+
lightslategrey: [119, 136, 153],
|
|
91
|
+
lightsteelblue: [176, 196, 222],
|
|
92
|
+
lightyellow: [255, 255, 224],
|
|
93
|
+
limegreen: [50, 205, 50],
|
|
94
|
+
linen: [250, 240, 230],
|
|
95
|
+
magenta: [255, 0, 255],
|
|
96
|
+
mediumaquamarine: [102, 205, 170],
|
|
97
|
+
mediumblue: [0, 0, 205],
|
|
98
|
+
mediumorchid: [186, 85, 211],
|
|
99
|
+
mediumpurple: [147, 112, 219],
|
|
100
|
+
mediumseagreen: [60, 179, 113],
|
|
101
|
+
mediumslateblue: [123, 104, 238],
|
|
102
|
+
mediumspringgreen: [0, 250, 154],
|
|
103
|
+
mediumturquoise: [72, 209, 204],
|
|
104
|
+
mediumvioletred: [199, 21, 133],
|
|
105
|
+
midnightblue: [25, 25, 112],
|
|
106
|
+
mintcream: [245, 255, 250],
|
|
107
|
+
mistyrose: [255, 228, 225],
|
|
108
|
+
moccasin: [255, 228, 181],
|
|
109
|
+
navajowhite: [255, 222, 173],
|
|
110
|
+
oldlace: [253, 245, 230],
|
|
111
|
+
olivedrab: [107, 142, 35],
|
|
112
|
+
orange: [255, 165, 0],
|
|
113
|
+
orangered: [255, 69, 0],
|
|
114
|
+
orchid: [218, 112, 214],
|
|
115
|
+
palegoldenrod: [238, 232, 170],
|
|
116
|
+
palegreen: [152, 251, 152],
|
|
117
|
+
paleturquoise: [175, 238, 238],
|
|
118
|
+
palevioletred: [219, 112, 147],
|
|
119
|
+
papayawhip: [255, 239, 213],
|
|
120
|
+
peachpuff: [255, 218, 185],
|
|
121
|
+
peru: [205, 133, 63],
|
|
122
|
+
pink: [255, 192, 203],
|
|
123
|
+
plum: [221, 160, 221],
|
|
124
|
+
powderblue: [176, 224, 230],
|
|
125
|
+
rosybrown: [188, 143, 143],
|
|
126
|
+
royalblue: [65, 105, 225],
|
|
127
|
+
saddlebrown: [139, 69, 19],
|
|
128
|
+
salmon: [250, 128, 114],
|
|
129
|
+
sandybrown: [244, 164, 96],
|
|
130
|
+
seagreen: [46, 139, 87],
|
|
131
|
+
seashell: [255, 245, 238],
|
|
132
|
+
sienna: [160, 82, 45],
|
|
133
|
+
skyblue: [135, 206, 235],
|
|
134
|
+
slateblue: [106, 90, 205],
|
|
135
|
+
slategray: [112, 128, 144],
|
|
136
|
+
slategrey: [112, 128, 144],
|
|
137
|
+
snow: [255, 250, 250],
|
|
138
|
+
springgreen: [0, 255, 127],
|
|
139
|
+
steelblue: [70, 130, 180],
|
|
140
|
+
tan: [210, 180, 140],
|
|
141
|
+
thistle: [216, 191, 216],
|
|
142
|
+
tomato: [255, 99, 71],
|
|
143
|
+
turquoise: [64, 224, 208],
|
|
144
|
+
violet: [238, 130, 238],
|
|
145
|
+
wheat: [245, 222, 179],
|
|
146
|
+
whitesmoke: [245, 245, 245],
|
|
147
|
+
yellowgreen: [154, 205, 50],
|
|
148
|
+
};
|
|
149
|
+
//# sourceMappingURL=defaultcolors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaultcolors.js","sourceRoot":"","sources":["../../src/values/defaultcolors.ts"],"names":[],"mappings":"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"}
|
package/eslint.config.js
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// @ts-check
|
|
2
|
+
|
|
3
|
+
import eslint from '@eslint/js';
|
|
4
|
+
import tseslint from 'typescript-eslint';
|
|
5
|
+
|
|
6
|
+
export default tseslint.config(
|
|
7
|
+
eslint.configs.recommended,
|
|
8
|
+
...tseslint.configs.recommended,
|
|
9
|
+
{
|
|
10
|
+
rules: {
|
|
11
|
+
'@typescript-eslint/no-explicit-any': 'off',
|
|
12
|
+
'@typescript-eslint/ban-ts-comment': 'off',
|
|
13
|
+
'@typescript-eslint/no-unused-vars': [
|
|
14
|
+
'error',
|
|
15
|
+
{
|
|
16
|
+
argsIgnorePattern: '^_',
|
|
17
|
+
varsIgnorePattern: '^_',
|
|
18
|
+
caughtErrorsIgnorePattern: '^_',
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chnobli",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"author": "Sören Meier <info@soerenmeier.ch>",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -30,17 +30,24 @@
|
|
|
30
30
|
"import": "./dist/scroll/index.js",
|
|
31
31
|
"types": "./dist/scroll/index.d.ts"
|
|
32
32
|
},
|
|
33
|
+
"./animator": {
|
|
34
|
+
"import": "./dist/animator/index.js",
|
|
35
|
+
"types": "./dist/animator/index.d.ts"
|
|
36
|
+
},
|
|
33
37
|
".": {
|
|
34
38
|
"import": "./dist/chnobli.js",
|
|
35
39
|
"types": "./dist/chnobli.d.ts"
|
|
36
40
|
}
|
|
37
41
|
},
|
|
38
42
|
"devDependencies": {
|
|
39
|
-
"eslint": "^
|
|
43
|
+
"@eslint/js": "^9.4.0",
|
|
44
|
+
"@types/eslint__js": "^8.42.3",
|
|
45
|
+
"eslint": "^8.57.0",
|
|
40
46
|
"jsdoc": "^4.0.2",
|
|
41
47
|
"prettier": "^3.2.4",
|
|
42
48
|
"tslib": "^2.6.2",
|
|
43
|
-
"typescript": "^5.
|
|
49
|
+
"typescript": "^5.4.5",
|
|
50
|
+
"typescript-eslint": "^7.11.0",
|
|
44
51
|
"vitest": "^1.1.3"
|
|
45
52
|
},
|
|
46
53
|
"dependencies": {
|
|
@@ -7,6 +7,7 @@ import Timing, {
|
|
|
7
7
|
import Property, { ParseableValue, newProperty } from '../property/Property.js';
|
|
8
8
|
import Ticker from '../timing/Ticker.js';
|
|
9
9
|
import { Target } from '../target/Target.js';
|
|
10
|
+
import { DestroyOptions } from '../timeline/public.js';
|
|
10
11
|
|
|
11
12
|
export default class Animation {
|
|
12
13
|
timing: Timing;
|
|
@@ -95,9 +96,11 @@ export default class Animation {
|
|
|
95
96
|
}
|
|
96
97
|
}
|
|
97
98
|
|
|
98
|
-
destroy() {
|
|
99
|
-
|
|
100
|
-
prop
|
|
99
|
+
destroy(opts: DestroyOptions) {
|
|
100
|
+
if (!opts.keepValues) {
|
|
101
|
+
for (const prop of this._props) {
|
|
102
|
+
prop.restoreBefore(this.target);
|
|
103
|
+
}
|
|
101
104
|
}
|
|
102
105
|
|
|
103
106
|
this._ticker.unregisterTarget(this.target.inner());
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import Property, { newProperty } from '../property/Property.js';
|
|
2
|
+
import { Target } from '../target/Target.js';
|
|
3
|
+
import Ticker from '../timing/Ticker.js';
|
|
4
|
+
import Timing, { STATE_AFTER } from '../timing/Timing.js';
|
|
5
|
+
|
|
6
|
+
export type Settings = {
|
|
7
|
+
duration: number;
|
|
8
|
+
ease?: (t: number) => number;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/*
|
|
12
|
+
|
|
13
|
+
const opacity = animator(obj, {
|
|
14
|
+
duration: 200,
|
|
15
|
+
ease: sinInOut
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
opacity.set({ opacity: 0 });
|
|
19
|
+
|
|
20
|
+
opacity.to({ opacity: 1 });
|
|
21
|
+
opacity.to({ opacity: 2 }, 1000);
|
|
22
|
+
*/
|
|
23
|
+
|
|
24
|
+
export default class Animator {
|
|
25
|
+
setts: Settings;
|
|
26
|
+
target: Target;
|
|
27
|
+
private props: Map<string, PropertyAnimator<any>>;
|
|
28
|
+
|
|
29
|
+
private ticker: Ticker;
|
|
30
|
+
|
|
31
|
+
constructor(target: any, ticker: Ticker, setts: Settings) {
|
|
32
|
+
this.setts = setts;
|
|
33
|
+
this.target = ticker.registerTarget(target);
|
|
34
|
+
|
|
35
|
+
this.ticker = ticker;
|
|
36
|
+
|
|
37
|
+
this.props = new Map();
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
private getProp(name: string): PropertyAnimator<any> {
|
|
41
|
+
const prop = this.props.get(name);
|
|
42
|
+
if (prop) return prop;
|
|
43
|
+
|
|
44
|
+
const newProp = new PropertyAnimator(name, this.setts, this.target);
|
|
45
|
+
this.props.set(name, newProp);
|
|
46
|
+
return newProp;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
set(props: Record<string, any>) {
|
|
50
|
+
for (const prop in props) {
|
|
51
|
+
const propAni = this.getProp(prop);
|
|
52
|
+
console.log('got prop ani', propAni);
|
|
53
|
+
propAni.set(this.target, props[prop]);
|
|
54
|
+
console.log('got prop ani', propAni);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
to(props: Record<string, any>, duration?: number) {
|
|
59
|
+
for (const prop in props) {
|
|
60
|
+
const propAni = this.getProp(prop);
|
|
61
|
+
propAni.to(this.target, props[prop], duration);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/// returns if the ticker should keep running
|
|
66
|
+
_tick(change: number): boolean {
|
|
67
|
+
let shouldStop = true;
|
|
68
|
+
|
|
69
|
+
for (const prop of this.props.values()) {
|
|
70
|
+
prop.advance(change);
|
|
71
|
+
prop.render(this.target);
|
|
72
|
+
|
|
73
|
+
if (prop.timing.state < STATE_AFTER) {
|
|
74
|
+
shouldStop = false;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return !shouldStop;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export class PropertyAnimator<V> {
|
|
83
|
+
prop: Property<V>;
|
|
84
|
+
timing: Timing;
|
|
85
|
+
|
|
86
|
+
private initialized: boolean;
|
|
87
|
+
|
|
88
|
+
constructor(prop: string, setts: Settings, target: Target) {
|
|
89
|
+
this.prop = newProperty(prop, target.type());
|
|
90
|
+
|
|
91
|
+
this.timing = new Timing(setts);
|
|
92
|
+
this.initialized = false;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
set(target: Target, value: any) {
|
|
96
|
+
const val = this.prop.parseValue(value);
|
|
97
|
+
|
|
98
|
+
this.prop.init(target, val, val);
|
|
99
|
+
|
|
100
|
+
this.timing.seek(2);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
to(target: Target, value: any, duration?: number) {
|
|
104
|
+
const val = this.prop.parseValue(value);
|
|
105
|
+
|
|
106
|
+
let current = null;
|
|
107
|
+
if (this.initialized) {
|
|
108
|
+
current = this.prop.interpolate(this.timing.position);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
this.prop.init(target, current, val);
|
|
112
|
+
this.initialized = true;
|
|
113
|
+
|
|
114
|
+
this.timing.seek(0);
|
|
115
|
+
if (typeof duration === 'number') {
|
|
116
|
+
this.timing.setDuration(duration);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
advance(change: number) {
|
|
121
|
+
this.timing.advance(change);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// call advance first
|
|
125
|
+
render(target: Target) {
|
|
126
|
+
const pos = this.timing.position;
|
|
127
|
+
|
|
128
|
+
this.prop.setValue(target, this.prop.interpolate(pos));
|
|
129
|
+
}
|
|
130
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/*
|
|
2
|
+
|
|
3
|
+
const obj = { opacity: 1 };
|
|
4
|
+
// maybe we could even have stagger?
|
|
5
|
+
const opacity = animator(obj, {
|
|
6
|
+
// initial value
|
|
7
|
+
// might also be able to be set with stagger?
|
|
8
|
+
// for example
|
|
9
|
+
opacity: 1,
|
|
10
|
+
|
|
11
|
+
duration: 200,
|
|
12
|
+
ease: sineInOut
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
// or maybe instead
|
|
16
|
+
|
|
17
|
+
const animator = animator();
|
|
18
|
+
animator.add(obj, {
|
|
19
|
+
opacity: 1,
|
|
20
|
+
duration: 200,
|
|
21
|
+
ease: sineInOut
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
// what is the reason why we would wan't one animator with
|
|
25
|
+
// multiple objects with different timings
|
|
26
|
+
// could we not just use multiple animators
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
opacity.set(obj, { opacity: 0 });
|
|
30
|
+
|
|
31
|
+
let's make the most basic animator first
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
const opacity = animator(obj, {
|
|
35
|
+
duration: 200,
|
|
36
|
+
ease: sinInOut
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
opacity.set({ opacity: 0 });
|
|
40
|
+
|
|
41
|
+
opacity.to({ opacity: 1 });
|
|
42
|
+
opacity.to({ opacity: 2 }, 1000);
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
*/
|
|
48
|
+
|
|
49
|
+
import Animator, { AnimatorProps } from './public.js';
|
|
50
|
+
|
|
51
|
+
export { Animator };
|
|
52
|
+
export type { AnimatorProps };
|
|
53
|
+
|
|
54
|
+
export function animator(target: any, props?: AnimatorProps): Animator {
|
|
55
|
+
return new Animator(target, props);
|
|
56
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/*
|
|
2
|
+
set,
|
|
3
|
+
to,
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import AnimationFrameTicker from '../timing/AnimationFrameTicker.js';
|
|
7
|
+
import Ticker from '../timing/Ticker.js';
|
|
8
|
+
import Events from '../utils/Events.js';
|
|
9
|
+
import Animator from './Animator.js';
|
|
10
|
+
|
|
11
|
+
export type AnimatorProps = {
|
|
12
|
+
duration?: number;
|
|
13
|
+
ease?: (t: number) => number;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default class PublicAnimator {
|
|
17
|
+
private ticker: Ticker;
|
|
18
|
+
private inner: Animator;
|
|
19
|
+
private runningTicker: any;
|
|
20
|
+
private events: Events;
|
|
21
|
+
|
|
22
|
+
constructor(target: any, props: AnimatorProps = {}) {
|
|
23
|
+
this.ticker = AnimationFrameTicker.global();
|
|
24
|
+
this.inner = new Animator(target, this.ticker, {
|
|
25
|
+
duration: props.duration ?? 1000,
|
|
26
|
+
ease: props.ease,
|
|
27
|
+
});
|
|
28
|
+
this.events = new Events();
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
set(props: Record<string, any>): this {
|
|
32
|
+
this.inner.set(props);
|
|
33
|
+
this.startTicker();
|
|
34
|
+
|
|
35
|
+
return this;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
to(props: Record<string, any>, duration?: number): this {
|
|
39
|
+
this.inner.to(props, duration);
|
|
40
|
+
this.startTicker();
|
|
41
|
+
|
|
42
|
+
return this;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// on: update
|
|
46
|
+
on(ev: string, fn: (...args: any[]) => void): () => void {
|
|
47
|
+
return this.events.add(ev, fn);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
private startTicker() {
|
|
51
|
+
if (this.runningTicker) return;
|
|
52
|
+
|
|
53
|
+
this.runningTicker = this.ticker.add((change, opts) => {
|
|
54
|
+
const keepRunning = this.inner._tick(change);
|
|
55
|
+
|
|
56
|
+
opts.onApplied(() => {
|
|
57
|
+
this.events.trigger('update');
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
if (!keepRunning) {
|
|
61
|
+
opts.remove();
|
|
62
|
+
this.runningTicker = null;
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
}
|
package/src/chnobli.ts
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import Animation, { AnimationProps } from './animation/public.js';
|
|
2
|
-
import Timeline from './timeline/public.js';
|
|
2
|
+
import Timeline, { TimelineProps } from './timeline/public.js';
|
|
3
3
|
import Stagger, { type StaggerValue } from './stagger/stagger.js';
|
|
4
4
|
import type { Targets, AnimationTarget } from './target/Target.js';
|
|
5
5
|
|
|
6
6
|
export type {
|
|
7
7
|
Animation,
|
|
8
8
|
Timeline,
|
|
9
|
+
TimelineProps,
|
|
9
10
|
Stagger,
|
|
10
11
|
Targets,
|
|
11
12
|
AnimationTarget,
|
|
@@ -28,7 +29,7 @@ export function animate(
|
|
|
28
29
|
return new Animation(targets, props);
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
export function timeline(props:
|
|
32
|
+
export function timeline(props: TimelineProps = {}): Timeline {
|
|
32
33
|
return new Timeline(props);
|
|
33
34
|
}
|
|
34
35
|
|