diff --git a/src/animations/array.ts b/src/animations/array.ts new file mode 100644 index 0000000..298a32c --- /dev/null +++ b/src/animations/array.ts @@ -0,0 +1,27 @@ +import animejs from 'animejs' +import type { AnimeInstance, AnimeParams, Targets } from '../type' + +export function arrayAnimations(_anime: (params: AnimeParams) => AnimeInstance) { + const fade = (value: { target: Targets; params?: AnimeParams }) => { + return _anime({ + targets: value.target, + delay: animejs.stagger(100), + opacity: [0, 1], + ...value.params, + }) + } + + const slide = (value: { target: Targets; params?: AnimeParams }) => { + return _anime({ + targets: value.target, + delay: animejs.stagger(100, { start: 500 }), + translateX: [100, 0], + ...value.params, + }) + } + + return { + fade, + slide, + } +} diff --git a/src/animations/svg.ts b/src/animations/svg.ts new file mode 100644 index 0000000..6f2862e --- /dev/null +++ b/src/animations/svg.ts @@ -0,0 +1,21 @@ +import type { AnimeInstance, AnimeParams, Targets } from '../type' + +export function svgAnimations(_anime: (params: AnimeParams) => AnimeInstance) { + const draw = (value: { target: Targets; params?: AnimeParams }) => { + return _anime({ + targets: value.target, + strokeDashoffset: [_anime.setDashoffset, 0], + easing: 'easeInOutSine', + duration: 1500, + delay(el, i) { return i * 250 }, + direction: 'alternate', + loop: true, + ...value.params, + }) + } + + return { + draw, + + } +} diff --git a/src/index.ts b/src/index.ts index 63d374a..5e16ded 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,43 +1,87 @@ import animejs from 'animejs' -import type { AnimeInstance, AnimeParams, FunctionBasedParameter, StaggerOptions, Targets } from './type' - -function arrayAnimations(_anime: (params: AnimeParams) => AnimeInstance) { - const fade = (value: { target: Targets; params?: AnimeParams }) => { - return _anime({ - targets: value.target, - delay: animejs.stagger(100), - opacity: [0, 1], - ...value.params, - }) +import { arrayAnimations } from './animations/array' +import type { AnimeInstance, AnimeParams, AnimeTarget, AnimeTimelineInstance, FunctionBasedParameter, StaggerOptions } from './type' +export function useAnimejs() { + const _anime = (params: AnimeParams): AnimeInstance => { + return animejs(params) } + const helper = () => { + const version = (): string => { + return animejs.version + } - const slide = (value: { target: Targets; params?: AnimeParams }) => { - return _anime({ - targets: value.target, - delay: animejs.stagger(100, { start: 500 }), - translateX: [100, 0], - ...value.params, - }) - } + const speed = (): number => { + return animejs.speed + } - return { - fade, - slide, + const running = (): ReadonlyArray => { + return animejs.running + } + + function remove(targets: AnimeTarget | ReadonlyArray): void { + return animejs.remove(targets) + } + + function get(targets: AnimeTarget, prop: string, unit?: string): string | number { + return animejs.get(targets, prop, unit) + } + + function path(path: string | HTMLElement | SVGElement | null, percent?: number): (prop: string) => { + el: HTMLElement | SVGElement + property: string + totalLength: number + } { + return animejs.path(path, percent) + } + + function setDashoffset(el: HTMLElement | SVGElement | null): number { + return animejs.setDashoffset(el) + } + function bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number { + return animejs.bezier(x1, y1, x2, y2) + } + function stagger(value: number | string | ReadonlyArray, options?: StaggerOptions): FunctionBasedParameter { + return animejs.stagger(value, options) + } + function set(targets: AnimeTarget, value: { [AnyAnimatedProperty: string]: any }): void { + return animejs.set(targets, value) + } + + return { + stagger, + setDashoffset, + version, + speed, + running, + remove, + get, + path, + bezier, + set, + } } -} -export function useAnimejs() { - const _anime = (params: AnimeParams) => { - return animejs(params) + const timeline = () => { + function timeline(params?: AnimeParams | ReadonlyArray): AnimeTimelineInstance { + return animejs.timeline(params) + } + function random(min: number, max: number): number { + return animejs.random(min, max) + } + return { + timeline, + random, + } } - const stagger = (value: number | string | ReadonlyArray, options?: StaggerOptions): FunctionBasedParameter => { - return animejs.stagger(value, options) + + const animations = { + array: arrayAnimations(_anime), } - const array = arrayAnimations(_anime) return { anime: _anime, - array, - stagger, + animations, + helper: helper(), + timeline, } } diff --git a/src/type.ts b/src/type.ts index c2897d3..0a6fc8b 100644 --- a/src/type.ts +++ b/src/type.ts @@ -133,7 +133,7 @@ interface AnimeTimelineAnimParams extends AnimeAnimParams { timelineOffset: number | string | FunctionBasedParameter } -interface AnimeTimelineInstance extends AnimeInstance { +export interface AnimeTimelineInstance extends AnimeInstance { add(params: AnimeAnimParams, timelineOffset?: string | number): AnimeTimelineInstance }