Change replay method to reset option of play

Author: inokawa

src/hooks/core.ts

@@ -45,13 +45,14 @@ export const createAnimation = (
   }
 };
 
+export type PlayOptions = { reset?: boolean };
+
 export const createHandle = () => {
   const handle = {
-    _play: (animation: Animation) => {
-      animation.play();
-    },
-    _replay: (animation: Animation) => {
-      animation.currentTime = 0;
+    _play: (animation: Animation, opts: PlayOptions = {}) => {
+      if (opts.reset) {
+        animation.currentTime = 0;
+      }
       animation.play();
     },
     _reverse: (animation: Animation) => {

src/hooks/index.ts

@@ -3,6 +3,7 @@ export type {
   TypedEasing,
   AnimationOptions,
   AnimatableCSSProperties,
+  PlayOptions,
 } from "./core";
 export { useAnimation } from "./useAnimation";
 export type { AnimationHandle, WithRef } from "./useAnimation";

src/hooks/useAnimation.ts

@@ -4,12 +4,12 @@ import {
   AnimationOptions,
   createAnimation,
   createHandle,
+  PlayOptions,
   TypedKeyframe,
 } from "./core";
 
 export type AnimationHandle = {
-  play: () => AnimationHandle;
-  replay: () => AnimationHandle;
+  play: (opts?: PlayOptions) => AnimationHandle;
   reverse: () => AnimationHandle;
   cancel: () => AnimationHandle;
   finish: () => AnimationHandle;
@@ -70,12 +70,8 @@ export const useAnimation = (
       const handle = createHandle();
 
       const externalHandle: WithRef<AnimationHandle> = {
-        play: () => {
-          handle._play(initAnimation(getKeyframes(), getOptions()));
-          return externalHandle;
-        },
-        replay: () => {
-          handle._replay(initAnimation(getKeyframes(), getOptions()));
+        play: (opts) => {
+          handle._play(initAnimation(getKeyframes(), getOptions()), opts);
           return externalHandle;
         },
         reverse: () => {

src/hooks/useAnimationFunction.ts

@@ -1,10 +1,14 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { isSameObject } from "../utils";
-import { AnimationOptions, createAnimation, createHandle } from "./core";
+import {
+  AnimationOptions,
+  createAnimation,
+  createHandle,
+  PlayOptions,
+} from "./core";
 
 export type AnimationFunctionHandle = {
-  play: () => AnimationFunctionHandle;
-  replay: () => AnimationFunctionHandle;
+  play: (opts?: PlayOptions) => AnimationFunctionHandle;
   reverse: () => AnimationFunctionHandle;
   cancel: () => AnimationFunctionHandle;
   finish: () => AnimationFunctionHandle;
@@ -76,12 +80,8 @@ export const useAnimationFunction = (
       const handle = createHandle();
 
       const externalHandle: AnimationFunctionHandle = {
-        play: () => {
-          handle._play(initAnimation(getOptions()));
-          return externalHandle;
-        },
-        replay: () => {
-          handle._replay(initAnimation(getOptions()));
+        play: (opts) => {
+          handle._play(initAnimation(getOptions()), opts);
           return externalHandle;
         },
         reverse: () => {

src/hooks/useAnimations.ts

@@ -4,13 +4,13 @@ import {
   AnimationOptions,
   createAnimation,
   createHandle,
+  PlayOptions,
   TypedKeyframe,
 } from "./core";
 import type { WithRef } from "./useAnimation";
 
 export type AnimationsHandle<ID extends string> = {
-  play: (name: ID) => AnimationsHandle<ID>;
-  replay: (name: ID) => AnimationsHandle<ID>;
+  play: (name: ID, opts?: PlayOptions) => AnimationsHandle<ID>;
   reverse: (name: ID) => AnimationsHandle<ID>;
   cancel: (name: ID) => AnimationsHandle<ID>;
   finish: (name: ID) => AnimationsHandle<ID>;
@@ -72,12 +72,8 @@ export const useAnimations = <ID extends string>(
     const handle = createHandle();
 
     const externalHandle: WithRef<AnimationsHandle<ID>> = {
-      play: (name) => {
-        handle._play(initAnimation(name));
-        return externalHandle;
-      },
-      replay: (name) => {
-        handle._replay(initAnimation(name));
+      play: (name, opts) => {
+        handle._play(initAnimation(name), opts);
         return externalHandle;
       },
       reverse: (name) => {