From 9a703a8d7cb4f5eb3122f91191a62e736a2faee0 Mon Sep 17 00:00:00 2001 From: southrock <32596089+southrock@users.noreply.github.com> Date: Thu, 15 Aug 2019 03:47:42 +0800 Subject: [PATCH] [animejs] update to 3.1 (#37580) * update index.d.ts for animejs v3.1 * test new api * fix: remove offset --- types/animejs/animejs-tests.ts | 31 ++++++++++++++++ types/animejs/index.d.ts | 66 +++++++++++++++++++++------------- 2 files changed, 72 insertions(+), 25 deletions(-) diff --git a/types/animejs/animejs-tests.ts b/types/animejs/animejs-tests.ts index 8ed6fccf8e..4ea6a494a3 100644 --- a/types/animejs/animejs-tests.ts +++ b/types/animejs/animejs-tests.ts @@ -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" + } +); diff --git a/types/animejs/index.d.ts b/types/animejs/index.d.ts index 607872039f..80480e145b 100644 --- a/types/animejs/index.d.ts +++ b/types/animejs/index.d.ts @@ -1,12 +1,14 @@ -// Type definitions for animejs 2.0 +// Type definitions for animejs 3.1 // Project: http://animejs.com // Definitions by: Andrew Babin // supaiku0 +// 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; + interface AnimeAnimParams extends AnimeCallBack { + targets?: AnimeTarget | ReadonlyArray; duration?: number | FunctionBasedParameter; delay?: number | FunctionBasedParameter; + endDelay?: number | FunctionBasedParameter; elasticity?: number | FunctionBasedParameter; round?: number | boolean | FunctionBasedParameter; + keyframes?: ReadonlyArray; - easing?: EasingOptions | string | ReadonlyArray; + 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; - 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; + 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): 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, options?: StaggerOptions): FunctionBasedParameter; + function set(targets: AnimeTarget, value: {[AnyAnimatedProperty: string]: any}): void; // Timeline - function timeline(params?: AnimeInstanceParams | ReadonlyArray): AnimeTimelineInstance; + function timeline(params?: AnimeParams | ReadonlyArray): AnimeTimelineInstance; function random(min: number, max: number): number; }