How to run/pause an animation with holding down any key and letting it go?-CodePudding

I can't really figure out how to make this "rotating ball" start and stop its animation by holding down any key. Animation should only run while a key is pressed.

I have really tried to do research but only find code for jQuery which i don't know how to code. I think I miss some stuff for my Javascript but as you probably figured out by now, i am really new to this so i don't know whats missing.

(I know I've put the keypress on "Q" but i would like the Animation to start running while I push any key down and then pause if i let the key go. I also want the animation to run several times and not stop after 1 run.)

const start = document.querySelector("#ball");
const rot = document.querySelector("#roter");

window.addEventListener("keydown", spill)
function spill(event) {

    if (event.key == "q") {
        ball.style.animation = "rulle 4s linear running";
        roter.style.animation = "roter 4s linear running";
    } else {
        ball.style.animation = "rulle 4s linear paused";
        roter.style.animation = "roter 4s linear paused";
    }
};

.linje{
        width: 1000px;
        height: 500px;

    }

    #ball{
        position: relative;
        top: 40px;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: rgb(114, 240, 214);
        border-radius: 50%;
        animation-play-state: paused;
        text-align: center;
        line-height: 100px;
    }

    /*.ball:hover{
        animation-play-state: paused;
    }

    -#roter:hover{
        animation-play-state: paused;
    } */

    @keyframes rulle {
        0%{
            top: 40px;
            left: 0;
            transform: rotate(0deg);
        }
        12.5%{
            top: 40px;
            left: 50px;
            transform: rotate(45deg);
        }
        25%{
            top: 40px;
            left: 100px;
            transform: rotate(90deg);
        }
        37.5%{
            top: 40px;
            left: 150px;
            transform: rotate(135deg);
        }
        50%{
            top: 40px;
            left: 200px;
            transform: rotate(180deg);
        }
        62.5%{
            top: 40px;
            left: 250;
            transform: rotate(225deg);
        }
        75%{
            top: 40px;
            left: 300px;
            transform: rotate(270deg);
        }
        87.5%{
            top: 40px;
            left: 350px;
            transform: rotate(315deg);
        }
        100%{
            top: 40px;
            left: 250px;
            transform: rotate(360deg);
        }
    }

    #roter{
        animation-name: roter;
        animation-play-state: paused;
    }

    @keyframes roter {
        0%{

        }
        25%{
            transform: rotate(90deg);
        }
        50%{
            transform: rotate(180deg);
        }
        75%{
            transform: rotate(270deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

<div >
    <div id="ball">
        <p id="roter">161519</p>
    </div>

</div>

CodePudding user response：

Is this what you want? Run the snippet and check. Your css animation is not smooth. I don't have time to fix your animation but the following code do what you asked.

Note the js code here. In css, the animation is already applied and set the play state to paused so it's not playing at the beginning. Then, on keydown event, play state is changed to running and on keyup, it's changed back to paused.

Also, the other point you asked is running css animation forever. It can be addressed by animation-iteration-count: infinite or by using the shorthand animation: rulle 4s infinite linear; as I used here. Note the word infinite.

const start = document.querySelector("#ball");
const rot = document.querySelector("#roter");

window.addEventListener("keydown", () => {
    ball.style.animationPlayState = "running";
    roter.style.animationPlayState = "running";
})

window.addEventListener("keyup", () => {
    ball.style.animationPlayState = "paused";
    roter.style.animationPlayState = "paused";
})

.linje{
        width: 1000px;
        height: 500px;

    }

#ball{
    position: relative;
    top: 40px;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: rgb(114, 240, 214);
    border-radius: 50%;
    animation: rulle 4s infinite linear;
    animation-play-state: paused;
    text-align: center;
    line-height: 100px;
}

@keyframes rulle {
    0%{
        top: 40px;
        left: 0;
        transform: rotate(0deg);
    }
    12.5%{
        top: 40px;
        left: 50px;
        transform: rotate(45deg);
    }
    25%{
        top: 40px;
        left: 100px;
        transform: rotate(90deg);
    }
    37.5%{
        top: 40px;
        left: 150px;
        transform: rotate(135deg);
    }
    50%{
        top: 40px;
        left: 200px;
        transform: rotate(180deg);
    }
    62.5%{
        top: 40px;
        left: 250;
        transform: rotate(225deg);
    }
    75%{
        top: 40px;
        left: 300px;
        transform: rotate(270deg);
    }
    87.5%{
        top: 40px;
        left: 350px;
        transform: rotate(315deg);
    }
    100%{
        top: 40px;
        left: 250px;
        transform: rotate(360deg);
    }
}

#roter{
    animation: roter 4s linear infinite;
    animation-play-state: paused;
}

@keyframes roter {
    0%{

    }
    25%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    75%{
        transform: rotate(270deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

<div >
    <div id="ball">
        <p id="roter">161519</p>
    </div>
</div>

CodePudding user response：

You need to listen to the "keyup" event to let go of the animation. event.key == "q" else doesn't mean that the Event.type was a "keyup".

Here's a simpler CSS and the needed (better) JS approach.
All you need is to toggle using JS the element's style animationPlayState value.
Also, while doing so make sure that the code is not being triggered on a long-press — by using evt.repeat:

const elBall = document.querySelector("#ball");

const toggleRoll = (evt) => {
  if (evt.key !== "q" || evt.repeat) return;
  elBall.style.animationPlayState = evt.type === "keydown" ? "running" : "paused";
};

addEventListener("keydown", toggleRoll);
addEventListener("keyup", toggleRoll);

#ball {
  --size: 100px;
  position: relative;
  top: 40px;
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  border-radius: var(--size);
  text-align: center;
  background-color: rgb(114, 240, 214);
  
  animation: roll 3s linear infinite alternate;
  animation-play-state: paused;
}

@keyframes roll {
  0% { transform: translateX(0px) rotate(0deg); }
  100% { transform: translateX(300px) rotate(360deg); }
}

Click here to focus, then press key "q" to animate!
<div id="ball">161519</div>

CodePudding user response：

It does work.

https: slash slash jsfiddle.net/k5cx382e/ (

Press q to run and anyother key to stop the animation.

Have you missed including jquery?