-
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e919280
commit b0e8b55
Showing
9 changed files
with
423 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,48 +1,83 @@ | ||
<script setup lang="ts"> | ||
import { Motion } from "@vue-motion/lib"; | ||
/** @ts-expect-error virtual-import */ | ||
Check failure on line 3 in packages/app/src/components/Preview.vue GitHub Actions / type-check
|
||
import Animation from "virtual:user-main"; | ||
import { ref, watch } from "vue"; | ||
// import TestAnimation from './__test__/TestAnimation.vue' | ||
// import Animation from "virtual:user-main"; | ||
import { ref, watch, onMounted, onUnmounted } from "vue"; | ||
import TestAnimation from "./__test__/TestAnimation.vue"; | ||
const { width, height } = defineProps<{ | ||
width: number; | ||
height: number; | ||
}>(); | ||
const zoom = ref(((window.innerHeight - 40) * 0.6) / height); | ||
const zoom = ref(1); | ||
const container = ref<HTMLDivElement | null>(null); | ||
function updateZoom() { | ||
zoom.value = | ||
((window.innerWidth - 40) * 0.6) / width < | ||
((window.innerHeight - 40) * 0.6) / height | ||
? ((window.innerHeight - 40) * 0.6) / height | ||
: ((window.innerWidth - 40) * 0.6) / width; | ||
if (!container.value) return; | ||
const rect = container.value.getBoundingClientRect(); | ||
const containerWidth = rect.width; | ||
const containerHeight = rect.height; | ||
// Calculate aspect ratios | ||
const videoRatio = width / height; | ||
const containerRatio = containerWidth / containerHeight; | ||
// Determine scaling based on aspect ratio comparison | ||
if (containerRatio > videoRatio) { | ||
// Container is wider than video - use height as constraint | ||
zoom.value = Math.min(containerHeight / height, 1); | ||
} else { | ||
// Container is taller than video - use width as constraint | ||
zoom.value = Math.min(containerWidth / width, 1); | ||
} | ||
} | ||
window.addEventListener("resize", updateZoom); | ||
// Update zoom when container is resized | ||
const resizeObserver = new ResizeObserver(() => { | ||
updateZoom(); | ||
}); | ||
onMounted(() => { | ||
if (container.value) { | ||
resizeObserver.observe(container.value); | ||
} | ||
}); | ||
watch(() => window.innerHeight, updateZoom); | ||
onUnmounted(() => { | ||
resizeObserver.disconnect(); | ||
}); | ||
let dev: boolean; | ||
if (__D__) dev = true; | ||
else dev = false; | ||
</script> | ||
|
||
<template> | ||
<div class="w-full h-[60%] flex overflow-hidden"> | ||
<div class="w-full h-full flex items-center justify-center"> | ||
<Motion | ||
id="motion" | ||
:width="width" | ||
:height="height" | ||
:scale="dev ? zoom : (null as any)" | ||
:min-width="dev ? width * zoom : (null as any)" | ||
:min-height="dev ? height * zoom : (null as any)" | ||
<div class="flex-grow flex overflow-hidden"> | ||
<div | ||
ref="container" | ||
class="w-full h-full flex items-center justify-center p-4" | ||
> | ||
<div | ||
:style="{ | ||
width: `${width}px`, | ||
height: `${height}px`, | ||
transform: `scale(${zoom})`, | ||
transformOrigin: 'center', | ||
}" | ||
class="relative" | ||
> | ||
<Animation /> | ||
<!-- <TestAnimation /> --> | ||
</Motion> | ||
<Motion | ||
id="motion" | ||
:width="width" | ||
:height="height" | ||
class="max-w-full max-h-full" | ||
> | ||
<TestAnimation /> | ||
</Motion> | ||
</div> | ||
</div> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,24 @@ | ||
<script setup lang="ts"> | ||
import { Arc } from "@vue-motion/lib"; | ||
import { useMotion } from "@vue-motion/core"; | ||
import { Arc, Circle } from "@vue-motion/lib"; | ||
import { useMotion, usePlayer, useWidget } from "@vue-motion/core"; | ||
import { onMounted } from "vue"; | ||
import { CircleIns } from "@vue-motion/lib"; | ||
const motion = useMotion(); | ||
motion.width.value = 1600; | ||
motion.height.value = 900; | ||
const { play } = usePlayer(); | ||
const arc = useWidget<CircleIns>(); | ||
onMounted(() => { | ||
arc.move(200, 300, { | ||
duration: 10, | ||
}); | ||
play(); | ||
}); | ||
</script> | ||
|
||
<template> | ||
<Arc :radius="100" /> | ||
<Circle :radius="100" :widget="arc" /> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.