mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-11 20:40:20 +00:00
animejs: Lint (#19252)
This commit is contained in:
Andy
@@ -1,73 +1,71 @@
|
||||
import * as anime from 'animejs';
|
||||
|
||||
const test1 = anime({
|
||||
targets: 'div',
|
||||
duration: 40,
|
||||
color: "#FFFFFF"
|
||||
})
|
||||
|
||||
|
||||
|
||||
const callback = (anim : any) => {
|
||||
console.log(anim.completed);
|
||||
}
|
||||
|
||||
const test2 = anime({
|
||||
targets: 'div',
|
||||
translateX: (el : HTMLElement, i : number, index : number) => {
|
||||
return 0;
|
||||
},
|
||||
translateY: '40px',
|
||||
color: [
|
||||
{value: '#FF0000', duration: 2000},
|
||||
{value: '#00FF00', duration: 2000},
|
||||
{value: '#0000FF', duration: 2000},
|
||||
],
|
||||
duration: () => {
|
||||
return 1000000000000;
|
||||
},
|
||||
update: callback,
|
||||
complete: callback
|
||||
})
|
||||
|
||||
const someNodes = document.querySelector('button');
|
||||
|
||||
const test3 = anime({
|
||||
targets: someNodes,
|
||||
top: "-5000000em"
|
||||
})
|
||||
|
||||
const tl = anime.timeline({
|
||||
loop: false,
|
||||
direction: 'normal'
|
||||
})
|
||||
|
||||
tl.add({
|
||||
targets: ".tiny-divvy-div",
|
||||
scale: 10000000
|
||||
})
|
||||
|
||||
var path = anime.path('#motionPath path');
|
||||
|
||||
test1.play();
|
||||
test2.reverse();
|
||||
test3.pause();
|
||||
tl.seek(4000);
|
||||
|
||||
tl.finished.then(() => {
|
||||
console.log("I wonder if anyone will ever actually read this.");
|
||||
})
|
||||
|
||||
let usesEnums = anime({
|
||||
targets: ".usingEnumsIsAReallyHandyThing",
|
||||
direction: anime.DirectionEnum.Reverse,
|
||||
easing: anime.EasingsEnum.InOutExpo,
|
||||
someProperty: "+=4000"
|
||||
})
|
||||
|
||||
const bezier = anime.bezier(0, 0, 100, 100);
|
||||
// anime.speed = 100000000;
|
||||
(anime as any).speed = 4000;
|
||||
anime.easings['hello'] = anime.bezier(0, 0, 1900, 3020);
|
||||
const runningAnims = anime.running;
|
||||
anime.remove(".tiny-divvy-div");
|
||||
import * as anime from 'animejs';
|
||||
|
||||
const test1 = anime({
|
||||
targets: 'div',
|
||||
duration: 40,
|
||||
color: "#FFFFFF"
|
||||
});
|
||||
|
||||
const callback = (anim: any) => {
|
||||
console.log(anim.completed);
|
||||
};
|
||||
|
||||
const test2 = anime({
|
||||
targets: 'div',
|
||||
translateX: (el: HTMLElement, i: number, index: number) => {
|
||||
return 0;
|
||||
},
|
||||
translateY: '40px',
|
||||
color: [
|
||||
{value: '#FF0000', duration: 2000},
|
||||
{value: '#00FF00', duration: 2000},
|
||||
{value: '#0000FF', duration: 2000},
|
||||
],
|
||||
duration: () => {
|
||||
return 1000000000000;
|
||||
},
|
||||
update: callback,
|
||||
complete: callback
|
||||
});
|
||||
|
||||
const someNodes = document.querySelector('button');
|
||||
|
||||
const test3 = anime({
|
||||
targets: someNodes,
|
||||
top: "-5000000em"
|
||||
});
|
||||
|
||||
const tl = anime.timeline({
|
||||
loop: false,
|
||||
direction: 'normal'
|
||||
});
|
||||
|
||||
tl.add({
|
||||
targets: ".tiny-divvy-div",
|
||||
scale: 10000000
|
||||
});
|
||||
|
||||
const path = anime.path('#motionPath path');
|
||||
|
||||
test1.play();
|
||||
test2.reverse();
|
||||
test3.pause();
|
||||
tl.seek(4000);
|
||||
|
||||
tl.finished.then(() => {
|
||||
console.log("I wonder if anyone will ever actually read this.");
|
||||
});
|
||||
|
||||
const usesEnums = anime({
|
||||
targets: ".usingEnumsIsAReallyHandyThing",
|
||||
direction: "reverse",
|
||||
easing: "inoutexpo",
|
||||
someProperty: "+=4000"
|
||||
});
|
||||
|
||||
const bezier = anime.bezier(0, 0, 100, 100);
|
||||
// anime.speed = 100000000;
|
||||
(anime as any).speed = 4000;
|
||||
anime.easings['hello'] = anime.bezier(0, 0, 1900, 3020);
|
||||
const runningAnims = anime.running;
|
||||
anime.remove(".tiny-divvy-div");
|
||||
|
||||
Vendored
+137
-109
@@ -1,109 +1,137 @@
|
||||
// Type definitions for animejs 2.0
|
||||
// Project: http://animejs.com
|
||||
// Definitions by: Andrew Babin <https://github.com/A-Babin>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.4
|
||||
|
||||
type FunctionBasedParamter = (element : HTMLElement, index : number, length : number) => number;
|
||||
type AnimeCallbackFunction = (anim : anime.AnimeInstance) => void;
|
||||
type AnimeTarget = string | object | HTMLElement | SVGElement | NodeList | null; //Allowing null is necessary because DOM querys may not return anything.
|
||||
|
||||
declare namespace anime {
|
||||
type EasingOptions = "linear" | "easeInQuad" | "easeInCubic" | "easeInQuart" | "easeInQuint" | "easeInSine" | "easeInExpo" | "easeInCirc" | "easeInBack" | "easeInElastic" | "easeOutQuad" | "easeOutCubic" | "easeOutQuart" | "easeOutQuint" | "easeOutSine" | "easeOutExpo" | "easeOutCirc" | "easeOutBack" | "easeOutElastic" | "easeInOutQuad" | "easeInOutCubic" | "easeInOutQuart" | "easeInOutQuint" | "easeInOutSine" | "easeInOutExpo" | "easeInOutCirc" | "easeInOutBack" | "easeInOutElastic";
|
||||
type DirectionOptions = "reverse" | "alternate" | "normal";
|
||||
|
||||
interface AnimeInstanceParams {
|
||||
loop ?: number | boolean;
|
||||
autoplay ?: boolean;
|
||||
direction ?: DirectionOptions | string;
|
||||
|
||||
begin ?: AnimeCallbackFunction;
|
||||
run ?: AnimeCallbackFunction;
|
||||
update ?: AnimeCallbackFunction;
|
||||
complete ?: AnimeCallbackFunction;
|
||||
}
|
||||
|
||||
interface AnimeAnimParams {
|
||||
targets : AnimeTarget | ReadonlyArray<AnimeTarget>;
|
||||
|
||||
duration ?: number | FunctionBasedParamter;
|
||||
delay ?: number | FunctionBasedParamter;
|
||||
elasticity ?: number | FunctionBasedParamter;
|
||||
round ?: number | boolean | FunctionBasedParamter;
|
||||
|
||||
easing ?: EasingOptions | string | ReadonlyArray<number>;
|
||||
|
||||
begin ?: AnimeCallbackFunction;
|
||||
run ?: AnimeCallbackFunction;
|
||||
update ?: AnimeCallbackFunction;
|
||||
complete ?: AnimeCallbackFunction;
|
||||
[AnyAnimatedProperty: string] : any;
|
||||
}
|
||||
|
||||
interface AnimeParams extends AnimeInstanceParams, AnimeAnimParams {
|
||||
//Just need this to merge both Params interfaces.
|
||||
}
|
||||
|
||||
interface AnimeInstance {
|
||||
play : () => void;
|
||||
pause : () => void;
|
||||
restart : () => void;
|
||||
reverse : () => void;
|
||||
seek : (time : number) => void;
|
||||
|
||||
began : boolean;
|
||||
paused : boolean;
|
||||
completed : boolean;
|
||||
finished : Promise<void>;
|
||||
|
||||
begin : AnimeCallbackFunction;
|
||||
run : AnimeCallbackFunction;
|
||||
update : AnimeCallbackFunction;
|
||||
complete : AnimeCallbackFunction;
|
||||
|
||||
|
||||
autoplay : boolean
|
||||
currentTime : number;
|
||||
delay : number;
|
||||
direction : string;
|
||||
duration : number;
|
||||
loop : number | boolean;
|
||||
offset : number;
|
||||
progress : number;
|
||||
remaining : number;
|
||||
reversed : boolean;
|
||||
|
||||
animatables : ReadonlyArray<object>;
|
||||
animations : ReadonlyArray<object>;
|
||||
}
|
||||
|
||||
interface AnimeTimelineAnimParams extends AnimeAnimParams {
|
||||
offset : number | string | FunctionBasedParamter;
|
||||
}
|
||||
|
||||
interface AnimeTimelineInstance extends AnimeInstance {
|
||||
add (params : AnimeAnimParams) : AnimeTimelineInstance;
|
||||
}
|
||||
|
||||
// Helpers
|
||||
var speed : number;
|
||||
var running : AnimeInstance[];
|
||||
var easings : { [EasingFunction : string] : (t : number) => any };
|
||||
function remove (targets : AnimeTarget | ReadonlyArray<AnimeTarget> ) : void;
|
||||
function getValue (targets : AnimeTarget, prop : string) : string | number;
|
||||
function path (path : string | HTMLElement | SVGElement | null, percent ?: number) : (prop : string) => {
|
||||
el : HTMLElement | SVGElement,
|
||||
property : string,
|
||||
totalLength : number
|
||||
};
|
||||
function setDashoffset (el : HTMLElement | SVGElement | null) : number;
|
||||
function bezier (x1 : number, y1 : number, x2 : number, y2 : number) : (t : number) => number;
|
||||
// Timeline
|
||||
function timeline (params ?: AnimeInstanceParams | ReadonlyArray<AnimeInstance>) : AnimeTimelineInstance;
|
||||
function random(min : number, max : number) : number;
|
||||
}
|
||||
|
||||
declare function anime(params : anime.AnimeParams) : anime.AnimeInstance;
|
||||
|
||||
export = anime;
|
||||
export as namespace anime;
|
||||
// Type definitions for animejs 2.0
|
||||
// Project: http://animejs.com
|
||||
// Definitions by: Andrew Babin <https://github.com/A-Babin>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.4
|
||||
|
||||
type FunctionBasedParamter = (element: HTMLElement, index: number, length: number) => number;
|
||||
type AnimeCallbackFunction = (anim: anime.AnimeInstance) => void;
|
||||
// Allowing null is necessary because DOM queries may not return anything.
|
||||
type AnimeTarget = string | object | HTMLElement | SVGElement | NodeList | null;
|
||||
|
||||
declare namespace anime {
|
||||
type EasingOptions =
|
||||
| "linear"
|
||||
| "easeInQuad"
|
||||
| "easeInCubic"
|
||||
| "easeInQuart"
|
||||
| "easeInQuint"
|
||||
| "easeInSine"
|
||||
| "easeInExpo"
|
||||
| "easeInCirc"
|
||||
| "easeInBack"
|
||||
| "easeInElastic"
|
||||
| "easeOutQuad"
|
||||
| "easeOutCubic"
|
||||
| "easeOutQuart"
|
||||
| "easeOutQuint"
|
||||
| "easeOutSine"
|
||||
| "easeOutExpo"
|
||||
| "easeOutCirc"
|
||||
| "easeOutBack"
|
||||
| "easeOutElastic"
|
||||
| "easeInOutQuad"
|
||||
| "easeInOutCubic"
|
||||
| "easeInOutQuart"
|
||||
| "easeInOutQuint"
|
||||
| "easeInOutSine"
|
||||
| "easeInOutExpo"
|
||||
| "easeInOutCirc"
|
||||
| "easeInOutBack"
|
||||
| "easeInOutElastic";
|
||||
type DirectionOptions = "reverse" | "alternate" | "normal";
|
||||
|
||||
interface AnimeInstanceParams {
|
||||
loop?: number | boolean;
|
||||
autoplay?: boolean;
|
||||
direction?: DirectionOptions | string;
|
||||
|
||||
begin?: AnimeCallbackFunction;
|
||||
run?: AnimeCallbackFunction;
|
||||
update?: AnimeCallbackFunction;
|
||||
complete?: AnimeCallbackFunction;
|
||||
}
|
||||
|
||||
interface AnimeAnimParams {
|
||||
targets: AnimeTarget | ReadonlyArray<AnimeTarget>;
|
||||
|
||||
duration?: number | FunctionBasedParamter;
|
||||
delay?: number | FunctionBasedParamter;
|
||||
elasticity?: number | FunctionBasedParamter;
|
||||
round?: number | boolean | FunctionBasedParamter;
|
||||
|
||||
easing?: EasingOptions | string | ReadonlyArray<number>;
|
||||
|
||||
begin?: AnimeCallbackFunction;
|
||||
run?: AnimeCallbackFunction;
|
||||
update?: AnimeCallbackFunction;
|
||||
complete?: AnimeCallbackFunction;
|
||||
[AnyAnimatedProperty: string]: any;
|
||||
}
|
||||
|
||||
interface AnimeParams extends AnimeInstanceParams, AnimeAnimParams {
|
||||
// Just need this to merge both Params interfaces.
|
||||
}
|
||||
|
||||
interface AnimeInstance {
|
||||
play(): void;
|
||||
pause(): void;
|
||||
restart(): void;
|
||||
reverse(): void;
|
||||
seek(time: number): void;
|
||||
|
||||
began: boolean;
|
||||
paused: boolean;
|
||||
completed: boolean;
|
||||
finished: Promise<void>;
|
||||
|
||||
begin: AnimeCallbackFunction;
|
||||
run: AnimeCallbackFunction;
|
||||
update: AnimeCallbackFunction;
|
||||
complete: AnimeCallbackFunction;
|
||||
|
||||
autoplay: boolean;
|
||||
currentTime: number;
|
||||
delay: number;
|
||||
direction: string;
|
||||
duration: number;
|
||||
loop: number | boolean;
|
||||
offset: number;
|
||||
progress: number;
|
||||
remaining: number;
|
||||
reversed: boolean;
|
||||
|
||||
animatables: ReadonlyArray<object>;
|
||||
animations: ReadonlyArray<object>;
|
||||
}
|
||||
|
||||
interface AnimeTimelineAnimParams extends AnimeAnimParams {
|
||||
offset: number | string | FunctionBasedParamter;
|
||||
}
|
||||
|
||||
interface AnimeTimelineInstance extends AnimeInstance {
|
||||
add(params: AnimeAnimParams): AnimeTimelineInstance;
|
||||
}
|
||||
|
||||
// Helpers
|
||||
const speed: number;
|
||||
const running: AnimeInstance[];
|
||||
const easings: { [EasingFunction: string]: (t: number) => any };
|
||||
function remove(targets: AnimeTarget | ReadonlyArray<AnimeTarget>): void;
|
||||
function getValue(targets: AnimeTarget, prop: string): string | number;
|
||||
function path(path: string | HTMLElement | SVGElement | null, percent?: number): (prop: string) => {
|
||||
el: HTMLElement | SVGElement,
|
||||
property: string,
|
||||
totalLength: number
|
||||
};
|
||||
function setDashoffset(el: HTMLElement | SVGElement | null): number;
|
||||
function bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
|
||||
// Timeline
|
||||
function timeline(params?: AnimeInstanceParams | ReadonlyArray<AnimeInstance>): AnimeTimelineInstance;
|
||||
function random(min: number, max: number): number;
|
||||
}
|
||||
|
||||
declare function anime(params: anime.AnimeParams): anime.AnimeInstance;
|
||||
|
||||
export = anime;
|
||||
export as namespace anime;
|
||||
|
||||
Reference in New Issue
Block a user