feat: animations, helper, timeline

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,
+  }
+}

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,
+
+  }
+}

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<AnimeInstance> => {
+      return animejs.running
+    }
+
+    function remove(targets: AnimeTarget | ReadonlyArray<AnimeTarget>): 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<number | string>, 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<AnimeInstance>): 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<number | string>, 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,
   }
 }

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
 }