improve animation translations

.helix/languages.toml

@@ -1,3 +1,11 @@
 [[language]]
 name = "svelte"
 auto-format = true
+
+[[language]]
+name = "typescript"
+auto-format = true
+
+[[language]]
+name = 'toml'
+auto-format = true

ray_format/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ray_format"
-version = "0.1.0"
+version = "0.2.0"
 edition = "2021"
 license = "GPL-3.0-or-later"
 authors = ["AnActualEmerald"]

src-tauri/Cargo.lock

@@ -2685,7 +2685,7 @@ dependencies = [
 
 [[package]]
 name = "ray_format"
-version = "0.1.0"
+version = "0.2.0"
 dependencies = [
  "anyhow",
  "log",

src-tauri/Cargo.toml

@@ -9,11 +9,11 @@ edition = "2021"
 
 [package.metadata.generate-rpm]
 assets = [
-  {source= "target/release/cathode", dest= "/usr/bin/cathode", mode= "755"},
-  {source="cathode-tube.desktop", dest="/usr/share/applications/cathode-tube.desktop", mode="0644"},
-  {source="application-cathode.xml", dest="/usr/share/mime/packages/application-cathode.xml", mode="0644"},
-  {source="icons/128x128.png", dest="/usr/share/icons/hicolor/128x128/apps/cathode-tube.png", mode="0644"},
-  {source="icons/128x128@2x.png", dest="/usr/share/icons/hicolor/256x256@2/apps/cathode-tube.png", mode="0644"},
+  { source = "target/release/cathode", dest = "/usr/bin/cathode", mode = "755" },
+  { source = "cathode-tube.desktop", dest = "/usr/share/applications/cathode-tube.desktop", mode = "0644" },
+  { source = "application-cathode.xml", dest = "/usr/share/mime/packages/application-cathode.xml", mode = "0644" },
+  { source = "icons/128x128.png", dest = "/usr/share/icons/hicolor/128x128/apps/cathode-tube.png", mode = "0644" },
+  { source = "icons/128x128@2x.png", dest = "/usr/share/icons/hicolor/256x256@2/apps/cathode-tube.png", mode = "0644" },
 ]
 auto-req = "no"
 
@@ -39,7 +39,7 @@ serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "1.2.0", features = ["cli", "dialog-all", "fs-create-dir", "fs-read-dir", "fs-read-file", "fs-write-file", "macos-private-api", "window-minimize", "window-set-max-size", "window-set-min-size", "window-unminimize"] }
 cpal = { version = "0.14.1", features = ["jack"] }
-ray_format = {path = "../ray_format", version = "~0.1.0"}
+ray_format = { path = "../ray_format", version = ">=0.1.0" }
 anyhow = "1.0.66"
 log = "0.4.17"
 env_logger = "0.9.3"
@@ -53,7 +53,7 @@ notify = "5.0.0"
 [features]
 # by default Tauri runs in production mode
 # when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
-default = [ "custom-protocol" ]
+default = ["custom-protocol"]
 # this feature is used used for production builds where `devPath` points to the filesystem
 # DO NOT remove this
-custom-protocol = [ "tauri/custom-protocol" ]
+custom-protocol = ["tauri/custom-protocol"]

src/components/tube.svelte

@@ -1,17 +1,37 @@
+<script lang="ts" context="module">
+	const defaultAnims = {
+		hop: {
+			keyframes: [
+				{ translate: "0px 0%" },
+				{ translate: "0px -5%" },
+				{ transform: "0px 0%" },
+			],
+			duration: 200,
+		},
+		wiggle: {
+			keyframes: {
+				translate: ["0%", "2%", "0%", "-2%", "0%"],
+			},
+
+			duration: 500,
+		},
+		bounce: {
+			keyframes: {
+				translate: ["0px 0%", "0px -5%", "0px 0%"],
+				easing: ["linear", "ease-in-out", "linear"],
+			},
+
+			duration: 1000,
+		},
+	};
+</script>
+
 <script lang="ts">
 	import { frames } from "../store";
 	import { onMount } from "svelte";
 	import { appWindow } from "@tauri-apps/api/window";
 	import type { Anim } from "../types";
-
-	let hop: Anim = {
-		keyframes: [
-			{ transform: "translateY(-50%)" },
-			{ transform: "translateY(-52%)" },
-			{ transform: "translateY(-50%)" },
-		],
-		duration: 200,
-	};
+	import { invoke } from "@tauri-apps/api";
 
 	let src = "";
 	export let buf = 0;
@@ -22,17 +42,33 @@
 	let shouldAnimIn = false;
 	let shouldAnimOut = false;
 
+	let inAnim: Anim | undefined = defaultAnims.hop;
+	let outAnim: Anim | undefined = null;
+	let idleAnim: Anim | undefined = defaultAnims.wiggle;
+
 	let elem: HTMLImageElement;
 
+	$: {
+		if (idleAnim && elem) idle();
+	}
+
 	$: {
 		if (elem && shouldAnimIn) {
-			elem.animate(hop.keyframes, hop.duration);
+			invoke("log", { msg: "in" }).catch();
+			elem.animate(inAnim.keyframes, {
+				duration: inAnim.duration,
+				composite: "accumulate",
+			});
 		}
 	}
 
 	$: {
-		if (elem && shouldAnimOut) {
-			elem.animate(hop.keyframes, hop.duration);
+		if (outAnim && elem && shouldAnimOut) {
+			invoke("log", { msg: "out" }).catch();
+			elem.animate(outAnim.keyframes, {
+				duration: outAnim.duration,
+				composite: "accumulate",
+			});
 		}
 	}
 
@@ -59,7 +95,27 @@
 		}
 	}
 
+	const idle = () => {
+		if (elem && idleAnim)
+			elem
+				.animate(idleAnim.keyframes, {
+					duration: idleAnim.duration,
+					composite: "accumulate",
+				})
+				.addEventListener("finish", idle);
+	};
+
+	const still = () => {
+		if (elem)
+			elem.animate([{ transform: "translateY(-50%)" }], {
+				duration: 1,
+				fill: "forwards",
+			});
+	};
+
 	onMount(async () => {
+		idle();
+		still();
 		await appWindow.listen("mouth-open", () => {
 			// should animate if mouth wasn't open
 			shouldAnimIn = !open;

src/store.ts

@@ -1,22 +1,6 @@
 import {writable} from "svelte/store";
 export type BGColor ="transparent" | "blue" | "green" | "pink" | {custom: string} ;
 
-export  type Meta = {
-    threshold: string | null;
-    closeThreshold: string | null;
-  };
-
-export  class WebRay {
-    meta: Meta;
-    frames: string[];
-    public constructor(
-      frames: string[] = [],
-      meta: Meta = { threshold: null, closeThreshold: null }
-    ) {
-      this.frames = frames;
-      this.meta = meta;
-    }
-}
 
 export class Config {
   background_color: BGColor;

src/types.ts

@@ -1 +1,18 @@
-export type Anim = {keyframes: Keyframe[] | PropertyIndexedKeyframes, duration: number}:
+export type Anim = { keyframes: Keyframe[] | PropertyIndexedKeyframes, duration: number };
+
+export type Meta = {
+  threshold: string | null;
+  closeThreshold: string | null;
+};
+
+export class WebRay {
+  meta: Meta;
+  frames: string[];
+  public constructor(
+    frames: string[] = [],
+    meta: Meta = { threshold: null, closeThreshold: null }
+  ) {
+    this.frames = frames;
+    this.meta = meta;
+  }
+}

src/views/main.svelte

@@ -13,9 +13,10 @@
   import { fly } from "svelte/transition";
   import { invoke } from "@tauri-apps/api/tauri";
   import { tick } from "svelte";
-  import { frames, WebRay } from "../store";
+  import { frames } from "../store";
   import { quintInOut } from "svelte/easing";
   import type { UnlistenFn } from "@tauri-apps/api/event";
+  import { WebRay } from "../types";
 
   //components
   import FramePreview from "../components/FramePreview.svelte";