vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-12 04:50:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[animejs] update to 3.1 (#37580)

Browse Source 
* update index.d.ts for animejs v3.1

* test new api

* fix: remove offset
This commit is contained in:
southrock
2019-08-14 12:47:42 -07:00
committed by Pranav Senthilnathan
parent acc0673552
commit 9a703a8d7c
2 changed files with 72 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/animejs/animejs-tests.ts
+31
View File
@@ -75,3 +75,34 @@ anime.timeline().add({
duration: 1000,
easing: "linear",
}, 0);
anime({
targets: ".mizi",
keyframes: [
{translateY: -40, delay: 123},
{translateX: 250},
{translateY: 40},
{translateX: 0},
{translateY: 0}
],
delay: anime.stagger(200, {grid: [14, 5], from: 'center'}),
endDelay: -1.12742e-12,
loop: true,
easing: (el, i, total) => {
return (t) => {
return Math.pow(Math.sin(t * (i + 1)), total);
};
},
loopBegin: () => {
console.log("Hello, MMM");
},
changeComplete: () => {
console.log("It surely had been read.");
}
});
anime.set(
".test-div",
{
height: "1000px"
}
);
types/animejs/index.d.ts
Vendored
+41 -25
View File
@@ -1,12 +1,14 @@
// Type definitions for animejs 2.0
// Type definitions for animejs 3.1
// Project: http://animejs.com
// Definitions by: Andrew Babin <https://github.com/A-Babin>
// supaiku0 <https://github.com/supaiku0>
// southrock <https://github.com/southrock>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.4
type FunctionBasedParameter = (element: HTMLElement, index: number, length: number) => number;
type AnimeCallbackFunction = (anim: anime.AnimeInstance) => void;
type CustomEasingFunction = (el: HTMLElement, index: number, length: number) => ((time: number) => number);
// Allowing null is necessary because DOM queries may not return anything.
type AnimeTarget = string | object | HTMLElement | SVGElement | NodeList | null;
@@ -22,6 +24,7 @@ declare namespace anime {
| "easeInCirc"
| "easeInBack"
| "easeInElastic"
| "easeInBounce"
| "easeOutQuad"
| "easeOutCubic"
| "easeOutQuart"
@@ -31,6 +34,7 @@ declare namespace anime {
| "easeOutCirc"
| "easeOutBack"
| "easeOutElastic"
| "easeOutBounce"
| "easeInOutQuad"
| "easeInOutCubic"
| "easeInOutQuart"
@@ -39,34 +43,39 @@ declare namespace anime {
| "easeInOutExpo"
| "easeInOutCirc"
| "easeInOutBack"
| "easeInOutElastic";
| "easeInOutElastic"
| "easeInOutBounce";
type DirectionOptions = "reverse" | "alternate" | "normal";
interface AnimeInstanceParams {
interface AnimeCallBack {
begin?: AnimeCallbackFunction;
change?: AnimeCallbackFunction;
update?: AnimeCallbackFunction;
complete?: AnimeCallbackFunction;
loopBegin?: AnimeCallbackFunction;
loopComplete?: AnimeCallbackFunction;
changeBegin?: AnimeCallbackFunction;
changeComplete?: AnimeCallbackFunction;
}
interface AnimeInstanceParams extends AnimeCallBack {
loop?: number | boolean;
autoplay?: boolean;
direction?: DirectionOptions | string;
begin?: AnimeCallbackFunction;
run?: AnimeCallbackFunction;
update?: AnimeCallbackFunction;
complete?: AnimeCallbackFunction;
}
interface AnimeAnimParams {
targets: AnimeTarget | ReadonlyArray<AnimeTarget>;
interface AnimeAnimParams extends AnimeCallBack {
targets?: AnimeTarget | ReadonlyArray<AnimeTarget>;
duration?: number | FunctionBasedParameter;
delay?: number | FunctionBasedParameter;
endDelay?: number | FunctionBasedParameter;
elasticity?: number | FunctionBasedParameter;
round?: number | boolean | FunctionBasedParameter;
keyframes?: ReadonlyArray<AnimeAnimParams>;
easing?: EasingOptions | string | ReadonlyArray<number>;
easing?: EasingOptions | string | CustomEasingFunction | ((el: HTMLElement) => string);
begin?: AnimeCallbackFunction;
run?: AnimeCallbackFunction;
update?: AnimeCallbackFunction;
complete?: AnimeCallbackFunction;
[AnyAnimatedProperty: string]: any;
}
@@ -74,7 +83,7 @@ declare namespace anime {
// Just need this to merge both Params interfaces.
}
interface AnimeInstance {
interface AnimeInstance extends AnimeCallBack {
play(): void;
pause(): void;
restart(): void;
@@ -86,18 +95,13 @@ declare namespace anime {
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;
timelineOffset: number;
progress: number;
remaining: number;
reversed: boolean;
@@ -107,19 +111,29 @@ declare namespace anime {
}
interface AnimeTimelineAnimParams extends AnimeAnimParams {
offset: number | string | FunctionBasedParameter;
timelineOffset: number | string | FunctionBasedParameter;
}
interface AnimeTimelineInstance extends AnimeInstance {
add(params: AnimeAnimParams, timelineOffset?: string | number): AnimeTimelineInstance;
}
interface StaggerOptions {
start?: number | string;
direction?: 'normal' | 'reverse';
easing?: CustomEasingFunction | string | EasingOptions;
grid?: ReadonlyArray<number>;
axis?: 'x' | 'y';
from?: 'first' | 'last' | 'center' | number;
}
// Helpers
const version: string;
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 get(targets: AnimeTarget, prop: string): string | number;
function path(path: string | HTMLElement | SVGElement | null, percent?: number): (prop: string) => {
el: HTMLElement | SVGElement,
property: string,
@@ -127,8 +141,10 @@ declare namespace anime {
};
function setDashoffset(el: HTMLElement | SVGElement | null): number;
function bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
function stagger(value: number | string | ReadonlyArray<number | string>, options?: StaggerOptions): FunctionBasedParameter;
function set(targets: AnimeTarget, value: {[AnyAnimatedProperty: string]: any}): void;
// Timeline
function timeline(params?: AnimeInstanceParams | ReadonlyArray<AnimeInstance>): AnimeTimelineInstance;
function timeline(params?: AnimeParams | ReadonlyArray<AnimeInstance>): AnimeTimelineInstance;
function random(min: number, max: number): number;
}