1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | type FunctionBasedParameter = (element: HTMLElement, index: number, length: number) => number;
|
10 | type AnimeCallbackFunction = (anim: anime.AnimeInstance) => void;
|
11 | type CustomEasingFunction = (el: HTMLElement, index: number, length: number) => ((time: number) => number);
|
12 |
|
13 | type AnimeTarget = string | object | HTMLElement | SVGElement | NodeList | null;
|
14 |
|
15 | declare namespace anime {
|
16 | type EasingOptions =
|
17 | | "linear"
|
18 | | "easeInQuad"
|
19 | | "easeInCubic"
|
20 | | "easeInQuart"
|
21 | | "easeInQuint"
|
22 | | "easeInSine"
|
23 | | "easeInExpo"
|
24 | | "easeInCirc"
|
25 | | "easeInBack"
|
26 | | "easeInElastic"
|
27 | | "easeInBounce"
|
28 | | "easeOutQuad"
|
29 | | "easeOutCubic"
|
30 | | "easeOutQuart"
|
31 | | "easeOutQuint"
|
32 | | "easeOutSine"
|
33 | | "easeOutExpo"
|
34 | | "easeOutCirc"
|
35 | | "easeOutBack"
|
36 | | "easeOutElastic"
|
37 | | "easeOutBounce"
|
38 | | "easeInOutQuad"
|
39 | | "easeInOutCubic"
|
40 | | "easeInOutQuart"
|
41 | | "easeInOutQuint"
|
42 | | "easeInOutSine"
|
43 | | "easeInOutExpo"
|
44 | | "easeInOutCirc"
|
45 | | "easeInOutBack"
|
46 | | "easeInOutElastic"
|
47 | | "easeInOutBounce";
|
48 | type DirectionOptions = "reverse" | "alternate" | "normal";
|
49 |
|
50 | interface AnimeCallBack {
|
51 | begin?: AnimeCallbackFunction | undefined;
|
52 | change?: AnimeCallbackFunction | undefined;
|
53 | update?: AnimeCallbackFunction | undefined;
|
54 | complete?: AnimeCallbackFunction | undefined;
|
55 | loopBegin?: AnimeCallbackFunction | undefined;
|
56 | loopComplete?: AnimeCallbackFunction | undefined;
|
57 | changeBegin?: AnimeCallbackFunction | undefined;
|
58 | changeComplete?: AnimeCallbackFunction | undefined;
|
59 | }
|
60 |
|
61 | interface AnimeInstanceParams extends AnimeCallBack {
|
62 | loop?: number | boolean | undefined;
|
63 | autoplay?: boolean | undefined;
|
64 | direction?: DirectionOptions | string | undefined;
|
65 | }
|
66 |
|
67 | interface AnimeAnimParams extends AnimeCallBack {
|
68 | targets?: AnimeTarget | ReadonlyArray<AnimeTarget> | undefined;
|
69 |
|
70 | duration?: number | FunctionBasedParameter | undefined;
|
71 | delay?: number | FunctionBasedParameter | undefined;
|
72 | endDelay?: number | FunctionBasedParameter | undefined;
|
73 | elasticity?: number | FunctionBasedParameter | undefined;
|
74 | round?: number | boolean | FunctionBasedParameter | undefined;
|
75 | keyframes?: ReadonlyArray<AnimeAnimParams> | undefined;
|
76 |
|
77 | easing?: EasingOptions | string | CustomEasingFunction | ((el: HTMLElement) => string) | undefined;
|
78 |
|
79 | [AnyAnimatedProperty: string]: any;
|
80 | }
|
81 |
|
82 | interface AnimeParams extends AnimeInstanceParams, AnimeAnimParams {
|
83 | // Just need this to merge both Params interfaces.
|
84 | }
|
85 |
|
86 | interface Animatable {
|
87 | id: number;
|
88 | target: HTMLElement;
|
89 | total: number;
|
90 | transforms: object;
|
91 | }
|
92 |
|
93 | interface Animation {
|
94 | animatable: Animatable;
|
95 | currentValue: string;
|
96 | delay: number;
|
97 | duration: number;
|
98 | endDelay: number;
|
99 | property: string;
|
100 | tweens: ReadonlyArray<object>;
|
101 | type: string;
|
102 | }
|
103 |
|
104 | interface AnimeInstance extends AnimeCallBack {
|
105 | play(): void;
|
106 | pause(): void;
|
107 | restart(): void;
|
108 | reverse(): void;
|
109 | seek(time: number): void;
|
110 | tick(time: number): void;
|
111 |
|
112 | began: boolean;
|
113 | paused: boolean;
|
114 | completed: boolean;
|
115 | finished: Promise<void>;
|
116 |
|
117 | autoplay: boolean;
|
118 | currentTime: number;
|
119 | delay: number;
|
120 | direction: string;
|
121 | duration: number;
|
122 | loop: number | boolean;
|
123 | timelineOffset: number;
|
124 | progress: number;
|
125 | remaining: number;
|
126 | reversed: boolean;
|
127 |
|
128 | animatables: ReadonlyArray<Animatable>;
|
129 | animations: ReadonlyArray<Animation>;
|
130 | }
|
131 |
|
132 | interface AnimeTimelineAnimParams extends AnimeAnimParams {
|
133 | timelineOffset: number | string | FunctionBasedParameter;
|
134 | }
|
135 |
|
136 | interface AnimeTimelineInstance extends AnimeInstance {
|
137 | add(params: AnimeAnimParams, timelineOffset?: string | number): AnimeTimelineInstance;
|
138 | }
|
139 |
|
140 | interface StaggerOptions {
|
141 | start?: number | string | undefined;
|
142 | direction?: 'normal' | 'reverse' | undefined;
|
143 | easing?: CustomEasingFunction | string | EasingOptions | undefined;
|
144 | grid?: ReadonlyArray<number> | undefined;
|
145 | axis?: 'x' | 'y' | undefined;
|
146 | from?: 'first' | 'last' | 'center' | number | undefined;
|
147 | }
|
148 |
|
149 | // Helpers
|
150 | const version: string;
|
151 | const speed: number;
|
152 | const running: AnimeInstance[];
|
153 | const easings: { [EasingFunction: string]: (t: number) => any };
|
154 | function remove(targets: AnimeTarget | ReadonlyArray<AnimeTarget>): void;
|
155 | function get(targets: AnimeTarget, prop: string): string | number;
|
156 | function path(path: string | HTMLElement | SVGElement | null, percent?: number): (prop: string) => {
|
157 | el: HTMLElement | SVGElement,
|
158 | property: string,
|
159 | totalLength: number
|
160 | };
|
161 | function setDashoffset(el: HTMLElement | SVGElement | null): number;
|
162 | function bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
|
163 | function stagger(value: number | string | ReadonlyArray<number | string>, options?: StaggerOptions): FunctionBasedParameter;
|
164 | function set(targets: AnimeTarget, value: {[AnyAnimatedProperty: string]: any}): void;
|
165 |
|
166 | function timeline(params?: AnimeParams | ReadonlyArray<AnimeInstance>): AnimeTimelineInstance;
|
167 | function random(min: number, max: number): number;
|
168 | }
|
169 |
|
170 | declare function anime(params: anime.AnimeParams): anime.AnimeInstance;
|
171 |
|
172 | export = anime;
|
173 | export as namespace anime;
|