Fixed control ref; type changes to anim

Author: mkbabb

demo/components/AnimationControls.vue

@@ -19,10 +19,7 @@
                     <input
                         type="string"
                         :value="reverseCSSTime(animation.options.delay)"
-                        @change="
-                            (e) =>
-                                (animation.options.delay = parseCSSTime(e.target.value))
-                        "
+                        @change="(e) => animation.updateDelay(e.target.value)"
                     />
 
                     <label>Iteration Count</label>
@@ -106,8 +103,11 @@
                                 xmlns="http://www.w3.org/2000/svg"
                             ></svg>
 
-                            <label class="preset-label" @click="copyToClipboard">{{ cubicBezierPreset }}<div ref="copyTextEl" class="info">Copied!</div>
-                            <font-awesome-icon :icon="['fas', 'clipboard']" /></label>
+                            <label class="preset-label" @click="copyToClipboard"
+                                >{{ cubicBezierPreset }}
+                                <div ref="copyTextEl" class="info">Copied!</div>
+                                <font-awesome-icon :icon="['fas', 'clipboard']"
+                            /></label>
 
                             <input
                                 @input="updateTimingFunction"
@@ -148,9 +148,9 @@
                     class="slider"
                     type="range"
                     :min="0"
-                    :disabled="!animation.paused"
                     :max="animation.options.duration"
                     @input="sliderUpdate"
+                    :disabled="!animation.paused"
                     v-model.number="animation.t"
                 />
                 <div class="timing">
@@ -209,7 +209,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
+import { computed, onMounted, reactive } from "vue";
 import {
     Animation,
     CSSKeyframesToString,
@@ -238,7 +238,7 @@ let timingFunctionsAnd = {
     ...timingFunctions,
 };
 
-const { animation, isGrouped } = defineProps({
+const { animation: tmpAnimation, isGrouped } = defineProps({
     isGrouped: {
         type: Boolean,
         required: false,
@@ -250,6 +250,8 @@ const { animation, isGrouped } = defineProps({
     },
 });
 
+const animation = $ref(tmpAnimation);
+
 const emit = defineEmits<{
     (
         e: "sliderUpdate",
@@ -291,31 +293,38 @@ let jumpTerm = $ref("jump-none");
 let steps = $ref(10);
 
 let cubicBezierPreset = $ref("ease");
-let cubicBezierValues = $ref(bezierPresets[cubicBezierPreset]);
+let cubicBezierValues = $ref(
+    bezierPresets[cubicBezierPreset] as [number, number, number, number]
+);
 const svgCubicBezierEl = $ref(null);
 
 const updateTimingFunction = () => {
     let timingFunction = timingFunctions[timingFunctionKey];
     if (timingFunctionKey === "steps") {
         timingFunction = timingFunctions[timingFunctionKey](steps, jumpTerm);
     } else if (timingFunctionKey === "cubicBezier") {
-        timingFunction = CSSBezier(...cubicBezierValues);
+        timingFunction = CSSBezier(
+            ...(cubicBezierValues as [number, number, number, number])
+        );
         cubicBezierPreset = `cubic-bezier(${cubicBezierValues
             .map((v) => v.toFixed(2))
             .join(",")})`;
+
         const path = svgCubicBezier(
             cubicBezierValues[0],
             cubicBezierValues[1],
             cubicBezierValues[2],
             cubicBezierValues[3]
         );
+
         svgCubicBezierEl.innerHTML = path;
     }
 
     setTimingFunction(timingFunction);
 };
 
 let prevT = $ref(0);
+
 const toggle = () => {
     if (!animation.started && !isGrouped) {
         animation.play();
@@ -370,8 +379,8 @@ function onKeyDown(e: KeyboardEvent) {
 }
 
 const parseCSSKeyframesStringEl = debounce((event: Event) => {
+    // @ts-ignore
     const s: string = event.target.innerText;
-    console.log(event.key);
 
     const p = CSSAnimationKeyframes.Values.parse(s);
 
@@ -508,7 +517,6 @@ input[type="range"] {
     grid-template-columns: auto auto;
     align-items: center;
 
-    
     label {
         overflow: hidden;
         white-space: pre;
@@ -519,7 +527,6 @@ input[type="range"] {
     input {
         grid-column: span 2;
         margin: 0;
-    
 
         background: linear-gradient(
             to right,

demo/components/AnimationControlsGroup.vue

@@ -46,6 +46,7 @@ const { animations } = defineProps<{
 }>();
 
 const selectedAnimation = ref("");
+
 const emit = defineEmits<{
     (e: "selectedAnimation", val: string): void;
 }>();

package-lock.json

@@ -18,7 +18,8 @@
     "scripts": {
         "dev": "vite --port 8080 --mode production",
         "build": "vite build --mode production",
-        "gh-pages": "vite build --mode gh-pages"
+        "gh-pages": "vite build --mode gh-pages",
+        "test": "vitest"
     },
     "repository": {
         "type": "git",

package.json

@@ -29,7 +29,8 @@ export type Vars<T = any> = {
 };
 
 type TransformFunction<V extends Vars> = (t: number, v: V) => void;
-type TimingFunction = (t: number) => number | keyof typeof timingFunctions;
+type TimingFunction = (t: number) => number;
+type TimingFunctionNames = keyof typeof timingFunctions;
 
 export type Keyframe<V extends Vars> = [
     vars: V,
@@ -140,12 +141,12 @@ export function parseTemplateFrame<V extends Vars>(
 }
 
 type AnimationOptions = {
-    duration: number | string;
+    duration: number;
     delay: number;
     iterationCount: number;
     direction: "normal" | "reverse" | "alternate" | "alternate-reverse";
     fillMode: "none" | "forwards" | "backwards" | "both";
-    timingFunction: keyof typeof timingFunctions | TimingFunction;
+    timingFunction: TimingFunction;
 };
 
 const defaultOptions: AnimationOptions = {
@@ -157,14 +158,24 @@ const defaultOptions: AnimationOptions = {
     timingFunction: easeInOutCubic,
 };
 
+type InputAnimationOptions = {
+    duration: number | string;
+    delay: number | string;
+    iterationCount: number | "infinite";
+    direction: typeof defaultOptions.direction;
+    fillMode: typeof defaultOptions.fillMode;
+    timingFunction: TimingFunction | TimingFunctionNames;
+};
+
 const getTimingFunction = (
-    timingFunction: TimingFunction
-): TimingFunction | typeof timingFunction | undefined => {
+    timingFunction: TimingFunction | TimingFunctionNames | undefined
+): TimingFunction | undefined => {
     if (typeof timingFunction === "string") {
-        return timingFunctions[timingFunction];
+        return timingFunctions[timingFunction] as TimingFunction | undefined;
     } else if (timingFunction == null) {
         return undefined;
     }
+
     return timingFunction;
 };
 
@@ -193,21 +204,19 @@ export class Animation<V extends Vars> {
     paused: boolean = false;
 
     constructor(
-        options: Partial<AnimationOptions>,
+        options: Partial<InputAnimationOptions>,
         public target: HTMLElement = document.documentElement
     ) {
-        this.options = { ...defaultOptions, ...options };
-
-        this.updateTimingFunction(this.options.timingFunction);
-        this.updateDuration(this.options.duration);
-        this.updateIterationCount(this.options.iterationCount);
+        this.options = { ...defaultOptions, ...options } as AnimationOptions;
+        
+        this.parseOptions(options);
     }
 
     frame<K extends V>(
         start: number | string,
         vars: Partial<K>,
         transform?: TransformFunction<K>,
-        timingFunction?: TimingFunction
+        timingFunction?: TimingFunction | TimingFunctionNames
     ): Animation<K> {
         start = typeof start === "number" ? String(start) + "%" : start;
         const parsedStart = CSSValueUnit.Value.tryParse(start)!;
@@ -266,7 +275,7 @@ export class Animation<V extends Vars> {
         return this;
     }
 
-    updateTimingFunction(timingFunction: TimingFunction) {
+    updateTimingFunction(timingFunction: TimingFunction | TimingFunctionNames) {
         this.options.timingFunction = getTimingFunction(timingFunction);
         return this;
     }
@@ -301,6 +310,23 @@ export class Animation<V extends Vars> {
         return this;
     }
 
+    updateDelay(delay: number | string) {
+        if (typeof delay === "string") {
+            delay = parseCSSTime(delay);
+        }
+        this.options.delay = delay;
+        return this;
+    }
+
+    parseOptions(options: Partial<InputAnimationOptions>) {
+        this.updateTimingFunction(options.timingFunction);
+        this.updateDuration(options.duration);
+        this.updateIterationCount(options.iterationCount);
+        this.updateDelay(options.delay);
+
+        return this;
+    }
+
     parse() {
         this.transformVars().parseFrames();
         return this;
@@ -511,8 +537,11 @@ export class CSSKeyframesAnimation<V extends Vars> {
     targets: HTMLElement[];
     animation: Animation<V>;
 
-    constructor(options: Partial<AnimationOptions> = {}, ...targets: HTMLElement[]) {
-        this.options = { ...defaultOptions, ...options };
+    constructor(
+        options: Partial<InputAnimationOptions> = {},
+        ...targets: HTMLElement[]
+    ) {
+        this.options = { ...defaultOptions, ...options } as AnimationOptions;
         this.targets = targets;
     }
 

src/animation.ts

@@ -143,6 +143,7 @@ export class ValueUnit<T = number> {
         if (this.unit !== other.unit) {
             const [left, right] = collapseNumericType(this, other, target);
             const value = lerp(t, left.value, right.value);
+            
             return new ValueUnit(value, left.unit, left.superType);
         } else if (this.unit === "color") {
             const value = lerpColor(
@@ -169,6 +170,7 @@ function lerpMany<T>(
     for (let i = 0; i < minLength; i++) {
         const l = left[i];
         const r = right[i];
+
         arr.push(l.lerp(t, r, target));
     }
     return arr;
@@ -268,7 +270,7 @@ export function transformObject(input: any): TransformedVars {
                 return p;
             }
         } else {
-            return input;
+            return input as ValueArray | FunctionValue;
         }
     };
 
@@ -289,7 +291,6 @@ export function reverseTransformObject(
         return original;
     }
 
-
     for (let i = 0; i < keys.length; i++) {
         const k = keys[i];
         if (values !== undefined && i === keys.length - 1) {