See i am making a project where i need to show box-based animation In the animation i have to show box opening when user pressed/touch open box button and close when release the button from same frame where click was release but my code work in one way which is open box and not closing box as expected .. please help me in this animation
const $element = $('#img-crate-box1');
const imagePath = 'https://datasetstesting.000webhostapp.com/cdnimages';
const totalFrames = 5;
const animationDuration = 800;
const timePerFrame = animationDuration / totalFrames;
let timeWhenLastUpdate;
let timeFromLastUpdate;
let frameNumber = 1;
var i=0;
var j=0;
var flag = false;
var revflag = false;
var lastFrame = 0;
function revstep(startTime){
if (!timeWhenLastUpdate) timeWhenLastUpdate = startTime;
timeFromLastUpdate = startTime - timeWhenLastUpdate;
if (timeFromLastUpdate > timePerFrame) {
$element.attr('src', imagePath + `/Egg-${lastFrame}.png`);
// $element.attr('Height', '350');
//$element.attr('Width', '400');
timeWhenLastUpdate = startTime;
if (frameNumber >= totalFrames) {
frameNumber = 1;
} else {
lastFrame = lastFrame - 1;
}
if(j === 0)
{
revflag = false;
}
else{
if(revflag === true)
{
window.requestAnimationFrame(revstep);
revflag = true;
}
else if(revflag === false)
{
return;
}
}
}
}
function step(startTime) {
if (!timeWhenLastUpdate) timeWhenLastUpdate = startTime;
timeFromLastUpdate = startTime - timeWhenLastUpdate;
if (timeFromLastUpdate > timePerFrame) {
$element.attr('src', imagePath + `/Egg-${frameNumber}.png`);
// $element.attr('Height', '350');
//$element.attr('Width', '400');
timeWhenLastUpdate = startTime;
if (frameNumber >= totalFrames) {
frameNumber = 1;
} else {
frameNumber = frameNumber + 1;
}
}
if(flag === true)
{
window.requestAnimationFrame(step);
flag = true;
}
else if(flag === false)
{
return;
}
}
const mouseDown=()=>{
window.requestAnimationFrame(step);
flag = true;
$(document).ready(() => {
for (i = 1; i < totalFrames + 1; i++) {
$('#div-small-crate-box1').fillHTML="<img id='preload-image-"+i+"' src="+imagePath+"/Egg-"+i+".png
style='height: 255px;' alt='Egg Frame"+i+"'> ";
}
});
lastFrame = frameNumber;
document.getElementById('displayNumber').innerHTML = " " + frameNumber;
}
const mouseUp=()=>{
window.cancelAnimationFrame(step);
window.requestAnimationFrame(revstep);
flag = false;
revflag = true;
for (j = lastFrame; j > 0; j--) {
$('#div-small-crate-box1').fillHTML="<img id='preload-image-"+j+"' src="+imagePath+"/Egg-"+j+".png
style='height: 255px;' alt='Egg Frame"+j+"'> ";
}
}
<html>
<head>
<title>Generate Number</title>
</head>
<body>
<p>The Number Geneared are<div id="displayNumber"></div></p>
<p></p>
<p></p>
<img id="img-crate-box1" src="https://datasetstesting.000webhostapp.com/cdnimages/Egg-1.png"
class="sixboximg">
<img id="div-small-crate-box1" onmouseup="mouseUp(event)" onmousedown="mouseDown(event)"
src="https://datasetstesting.000webhostapp.com/cdnimages/clickbutton.png" muted width="200"
height="200">
<!-- Java Scripts below-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://datasetstesting.000webhostapp.com/cdnimages/query.min.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire