improve animation translations
This commit is contained in:
parent
5f7041ddc2
commit
79a31a161c
|
@ -1,3 +1,11 @@
|
|||
[[language]]
|
||||
name = "svelte"
|
||||
auto-format = true
|
||||
|
||||
[[language]]
|
||||
name = "typescript"
|
||||
auto-format = true
|
||||
|
||||
[[language]]
|
||||
name = 'toml'
|
||||
auto-format = true
|
||||
|
|
|
@ -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"]
|
||||
|
|
|
@ -2685,7 +2685,7 @@ dependencies = [
|
|||
|
||||
[[package]]
|
||||
name = "ray_format"
|
||||
version = "0.1.0"
|
||||
version = "0.2.0"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"log",
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
|
|
16
src/store.ts
16
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;
|
||||
|
|
19
src/types.ts
19
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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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";
|
||||
|
|
Loading…
Reference in New Issue