diff --git a/types/animejs/animejs-tests.ts b/types/animejs/animejs-tests.ts index e7eec563c9..697c79f738 100644 --- a/types/animejs/animejs-tests.ts +++ b/types/animejs/animejs-tests.ts @@ -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"); \ No newline at end of file +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"); diff --git a/types/animejs/index.d.ts b/types/animejs/index.d.ts index f7c24bf349..a975f59513 100644 --- a/types/animejs/index.d.ts +++ b/types/animejs/index.d.ts @@ -1,109 +1,137 @@ -// Type definitions for animejs 2.0 -// Project: http://animejs.com -// Definitions by: Andrew 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; - - duration ?: number | FunctionBasedParamter; - delay ?: number | FunctionBasedParamter; - elasticity ?: number | FunctionBasedParamter; - round ?: number | boolean | FunctionBasedParamter; - - easing ?: EasingOptions | string | ReadonlyArray; - - 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; - - 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; - animations : ReadonlyArray; - } - - 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 ) : 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) : 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 +// 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; + + duration?: number | FunctionBasedParamter; + delay?: number | FunctionBasedParamter; + elasticity?: number | FunctionBasedParamter; + round?: number | boolean | FunctionBasedParamter; + + easing?: EasingOptions | string | ReadonlyArray; + + 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; + + 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; + animations: ReadonlyArray; + } + + 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): 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): AnimeTimelineInstance; + function random(min: number, max: number): number; +} + +declare function anime(params: anime.AnimeParams): anime.AnimeInstance; + +export = anime; +export as namespace anime;