47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
|
import { PluginObject } from 'vue'
|
||
|
|
import anime, { StaggerOptions, AnimeTimelineInstance, AnimeParams, AnimeInstance } from 'animejs'
|
||
|
|
|
||
|
|
type FunctionBasedParameter = (element: HTMLElement, index: number, length: number) => number
|
||
|
|
type AnimeTarget = string | object | HTMLElement | SVGElement | NodeList | null
|
||
|
|
type AnimeFunc = (params: AnimeParams) => AnimeInstance
|
||
|
|
|
||
|
|
interface Anime {
|
||
|
|
version: string
|
||
|
|
speed: number
|
||
|
|
running: AnimeInstance[]
|
||
|
|
easings: { [EasingFunction: string]: (t: number) => any }
|
||
|
|
remove(targets: AnimeTarget | ReadonlyArray<AnimeTarget>): void
|
||
|
|
get(targets: AnimeTarget, prop: string): string | number
|
||
|
|
path(
|
||
|
|
path: string | HTMLElement | SVGElement | null,
|
||
|
|
percent?: number,
|
||
|
|
): (
|
||
|
|
prop: string,
|
||
|
|
) => {
|
||
|
|
el: HTMLElement | SVGElement
|
||
|
|
property: string
|
||
|
|
totalLength: number
|
||
|
|
}
|
||
|
|
setDashoffset(el: HTMLElement | SVGElement | null): number
|
||
|
|
bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number
|
||
|
|
stagger(value: number | string | ReadonlyArray<number | string>, options?: StaggerOptions): FunctionBasedParameter
|
||
|
|
set(targets: AnimeTarget, value: { [AnyAnimatedProperty: string]: any }): void
|
||
|
|
// Timeline
|
||
|
|
timeline(params?: AnimeParams | ReadonlyArray<AnimeInstance>): AnimeTimelineInstance
|
||
|
|
random(min: number, max: number): number
|
||
|
|
}
|
||
|
|
|
||
|
|
declare module 'vue/types/vue' {
|
||
|
|
interface Vue {
|
||
|
|
$anime: AnimeFunc & Anime
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const plugin: PluginObject<undefined> = {
|
||
|
|
install(Vue) {
|
||
|
|
Vue.prototype.$anime = anime
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
export default plugin
|