diff --git a/types/animejs/animejs-tests.ts b/types/animejs/animejs-tests.ts new file mode 100644 index 0000000000..e7eec563c9 --- /dev/null +++ b/types/animejs/animejs-tests.ts @@ -0,0 +1,73 @@ +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 diff --git a/types/animejs/index.d.ts b/types/animejs/index.d.ts new file mode 100644 index 0000000000..f7c24bf349 --- /dev/null +++ b/types/animejs/index.d.ts @@ -0,0 +1,109 @@ +// 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; diff --git a/types/animejs/tsconfig.json b/types/animejs/tsconfig.json new file mode 100644 index 0000000000..a8cfacd5fd --- /dev/null +++ b/types/animejs/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "animejs-tests.ts" + ] +} diff --git a/types/animejs/tslint.json b/types/animejs/tslint.json new file mode 100644 index 0000000000..2750cc0197 --- /dev/null +++ b/types/animejs/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } \ No newline at end of file