add inputItem audio keyframes animation
This commit is contained in:
riqo
parent
a2effc7337
commit
b1260dd18f
1 changed files with 45 additions and 51 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div id=inputItem
|
||||
class="player-controls playing"
|
||||
class="input-item playing"
|
||||
:style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }">
|
||||
<span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="play"></span>
|
||||
<span :style="{ top: `${inputItemY}px`, left: `${inputItemX}px` }" class="pause"></span>
|
||||
|
|
@ -19,29 +19,27 @@ export default defineComponent({
|
|||
let element: HTMLElement | null;
|
||||
|
||||
// Cords of inputItem.
|
||||
const inputItemX = ref(0)
|
||||
const inputItemY = ref(0)
|
||||
const inputItemX = ref(0);
|
||||
const inputItemY = ref(0);
|
||||
|
||||
// Position of inputItem on terms of percentage of window.
|
||||
let percentX: number
|
||||
let percentY: number
|
||||
let percentX: number;
|
||||
let percentY: number;
|
||||
|
||||
// How close inputItem is to closest X or Y side.
|
||||
let xShort: number
|
||||
let yShort: number
|
||||
let xShort: number;
|
||||
let yShort: number;
|
||||
|
||||
//---Event Handlers-----------------------------------------------
|
||||
|
||||
// Update the position of inputItem on mouse dragging.
|
||||
const onMouseMove = (e: any) => {
|
||||
element = document.getElementById('inputItem')
|
||||
element = document.getElementById('inputItem');
|
||||
|
||||
if (element) {
|
||||
|
||||
const inputItemRect = element.getBoundingClientRect()
|
||||
inputItemX.value = inputItemRect.left + e.movementX
|
||||
inputItemY.value = inputItemRect.top + e.movementY
|
||||
|
||||
const inputItemRect = element.getBoundingClientRect();
|
||||
inputItemX.value = inputItemRect.left + e.movementX;
|
||||
inputItemY.value = inputItemRect.top + e.movementY;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -55,56 +53,52 @@ export default defineComponent({
|
|||
const onMouseUp = (_e: any) => {
|
||||
window.removeEventListener('mousemove', onMouseMove, true);
|
||||
|
||||
const winW = window.innerWidth
|
||||
const winH = window.innerHeight
|
||||
const winW = window.innerWidth;
|
||||
const winH = window.innerHeight;
|
||||
|
||||
xShort = calcSideProximity(inputItemX.value, winW)
|
||||
yShort = calcSideProximity(inputItemY.value, winH)
|
||||
xShort = calcSideProximity(inputItemX.value, winW);
|
||||
yShort = calcSideProximity(inputItemY.value, winH);
|
||||
|
||||
percentX = inputItemX.value / winW
|
||||
percentY = inputItemY.value / winH
|
||||
percentX = inputItemX.value / winW;
|
||||
percentY = inputItemY.value / winH;
|
||||
|
||||
console.log(`Pos refs updated: \n
|
||||
percentX: ${percentX}, percentY: ${percentY} \n
|
||||
xShort: ${xShort}, yShort: ${yShort}`
|
||||
)
|
||||
}
|
||||
|
||||
// Update position of inputItem on windowResize.
|
||||
const onWindowResize = (_e: any) => {
|
||||
const winW = window.innerWidth
|
||||
const winH = window.innerHeight
|
||||
const winW = window.innerWidth;
|
||||
const winH = window.innerHeight;
|
||||
|
||||
inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW)
|
||||
inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH)
|
||||
inputItemX.value = calcPosition(inputItemX.value, percentX, xShort, winW);
|
||||
inputItemY.value = calcPosition(inputItemY.value, percentY, yShort, winH);
|
||||
|
||||
}
|
||||
|
||||
//---------------------------------------------------------------
|
||||
|
||||
onMounted(() => {
|
||||
element = document.getElementById('inputItem')
|
||||
element = document.getElementById('inputItem');
|
||||
|
||||
if (element) {
|
||||
element.addEventListener('mousedown', onMouseDown, false);
|
||||
}
|
||||
|
||||
window.addEventListener("mouseup", onMouseUp, false)
|
||||
window.addEventListener("mouseup", onMouseUp, false);
|
||||
|
||||
// Initialize the positional references.
|
||||
percentX = inputItemX.value / window.innerWidth
|
||||
percentY = inputItemY.value / window.innerHeight
|
||||
percentX = inputItemX.value / window.innerWidth;
|
||||
percentY = inputItemY.value / window.innerHeight;
|
||||
|
||||
xShort = calcSideProximity(inputItemX.value, window.innerWidth)
|
||||
yShort = calcSideProximity(inputItemX.value, window.innerHeight)
|
||||
xShort = calcSideProximity(inputItemX.value, window.innerWidth);
|
||||
yShort = calcSideProximity(inputItemX.value, window.innerHeight);
|
||||
|
||||
// Then, we can listen for window resize.
|
||||
window.addEventListener('resize', onWindowResize, false)
|
||||
window.addEventListener('resize', onWindowResize, false);
|
||||
});
|
||||
|
||||
// Initialize the coordinants.
|
||||
inputItemX.value = 600 - 38 - 20
|
||||
inputItemY.value = 500 - 38 - 20
|
||||
inputItemX.value = 600 - 38 - 20;
|
||||
inputItemY.value = 500 - 38 - 20;
|
||||
|
||||
// remove event listeners
|
||||
onUnmounted(() => {
|
||||
|
|
@ -125,7 +119,8 @@ export default defineComponent({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
#inputItem {
|
||||
.input-item {
|
||||
|
||||
position: absolute;
|
||||
|
||||
width: 30px;
|
||||
|
|
@ -141,8 +136,7 @@ export default defineComponent({
|
|||
|
||||
background-color: white;
|
||||
border: 4px solid #C3C3C3;
|
||||
}
|
||||
.player-controls {
|
||||
|
||||
.play, .pause {
|
||||
z-index: 5;
|
||||
&::before, &::after {
|
||||
|
|
@ -151,8 +145,8 @@ export default defineComponent({
|
|||
border-radius: 1000px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 2.4em;
|
||||
width: 2.4em;
|
||||
height: 2.35em;
|
||||
width: 2.35em;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
|
|
@ -160,7 +154,7 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
.play::before {
|
||||
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
||||
box-shadow: 0 0 0 rgba(195, 195, 195, 0);
|
||||
}
|
||||
.pause {
|
||||
opacity: 0;
|
||||
|
|
@ -187,7 +181,7 @@ export default defineComponent({
|
|||
}
|
||||
&:hover {
|
||||
.play::before {
|
||||
box-shadow: 0 0 12px rgba(255, 238, 125, 0.8);
|
||||
box-shadow: 0 0 12px rgba(195, 195, 195, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -201,16 +195,16 @@ export default defineComponent({
|
|||
@keyframes audio1 {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.4);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.15);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.55);
|
||||
box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.55);
|
||||
}
|
||||
75% {
|
||||
box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.25);
|
||||
box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.25);
|
||||
}
|
||||
}
|
||||
.animate-audio2 {
|
||||
|
|
@ -222,16 +216,16 @@ export default defineComponent({
|
|||
@keyframes audio2 {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.15);
|
||||
box-shadow: 0 0 0 0.25em rgba(195, 195, 195, 0.15);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0 0 0 0.4em rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 0 0 0.4em rgba(195, 195, 195, 0.3);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 0 0.15em rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 0 0 0.15em rgba(195, 195, 195, 0.05);
|
||||
}
|
||||
75% {
|
||||
box-shadow: 0 0 0 0.55em rgba(255, 255, 255, 0.45);
|
||||
box-shadow: 0 0 0 0.55em rgba(195, 195, 195, 0.45);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue