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