Merge pull request #19222 from A-Babin/animejs-typings

New definition for animejs

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");

types/animejs/index.d.ts

@@ -0,0 +1,109 @@
+// 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;

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"
+    ]
+}

types/animejs/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }