如何使函数检查动画是否通过特定点 [英] How Do I make A Function To Check If an animation passes a certain point
本文介绍了如何使函数检查动画是否通过特定点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
好吧，所以我知道标题是废话了。我该如何检查障碍物是否经过某个点并因此而激活了功能？
这是我的代码到目前为止
function jump（）{jumpDetect = false; document.getElementById（ body）。classList.toggle（ body）; document.getElementById（ beak）。classList.toggle（ beak）; document.getElementById（ eyes）。classList.toggle（ eyes）; document.getElementById（ pupils）。classList.toggle（ pupils）; document.getElementById（ tail）。classList.toggle（ tail）; document.getElementById（ snood）。classList.toggle（ snood）; document.getElementById（ legRight）。classList.toggle（ legRight）; document.getElementById（ legLeft）。classList.toggle（ legLeft）; setTimeout（（）=> {document.getElementById（ body）。classList.toggle（ body）; document.getElementById（ beak）。classList.toggle（ beak）; document.getElementById（ eyes ）.classList.toggle（ eyes）; document.getElementById（ pupils）。classList.toggle（ pupils）; document.getElementById（ tail）。classList.toggle（ tail）;文档。 getElementById（ snood）。classList.toggle（ snood）; document.getElementById（ legRight）。classList.toggle（ legRight）; document.getElementById（ legLeft）。classList.toggle（ legLeft ）;}，0）; winDetection（）;} function winDetection（）{jumpDetect = true; console.log（jumpDetect）}
.body {padding： 30px 30px;高度：35像素；宽度：5像素；边界半径：50％；背景颜色：棕色；职位：相对顶部：0px；动画名称：土耳其； animation-duration：1s;}。beak {padding：1px 1px;宽度：1px；高度：1px； border-top：10px纯透明；左边框：25px实线＃ffc800;边框底部：5px透明的纯色；职位：相对左：40px；顶部：40px；动画名称：喙； animation-duration：1s;}。eyes {padding：10px 10px;宽度：10px；高度：10px；边界半径：50％；背景颜色：白色；职位：相对顶部：-80px；动画名称：眼睛； animation-duration：1s;}。学生{padding：5px 5px;宽度：3px；高度：3px；边界半径：50％；背景颜色：黑色；职位：相对顶部：-100px；动画名称：小学生； animation-duration：1s;}。snood {padding：5px 5px;宽度：1px；高度：10px；背景颜色：红色；边界半径：50％；职位：相对顶部：-254px；右：-38px;动画名称：snood; animation-duration：1s;}。legRight {padding：10px 1px;宽度：1px；高度：5px；背景颜色：黑色；职位：相对顶部：-219px；右：9px；变换：rotate（30deg）;动画名称：legRight; animation-duration：1s;}。legLeft {padding：10px 1px;宽度：1px；高度：5px；背景颜色：黑色；职位：相对顶部：-242px;左：3px；变换：rotate（30deg）;动画名称：legLeft; animation-duration：1s;}。obstacle {高度：100px;宽度：10px；背景颜色：黑色；动画：无限的3s障碍；职位：相对top：-460px；} body {background-color：lightblue;}
< html>< head< / head< body> < center> < br>< br>< br>< br> < div class = turkey> < div id = beak class =火鸡喙>< / div> < div id = body class = turkey body>< / div> < div id = eyes class = turkey eyes>< / div> < div id =学生 class =土耳其学生< / div> < style> .tail {width：20px;高度：150px；边界半径：50％；背景颜色：棕色；职位：相对顶部：-200px；右：59px；变换：rotate（-30deg）;动画名称：tail；动画时间：1秒； }< / style> < div id = tail class = turkey tail id = tailId>< / div> < div id = snood class = turkey snood>< / div> < div id = legRight class = turkey legRight>< / div> < div id = legLeft class = turkey legLeft>< / div> < / div> < style> @keyframes土耳其{0％{顶部：0像素； } 50％{top：-200px; } 100％{top：0px; }} @keyframes喙{0％{顶部：40像素； } 50％{top：-160px; } 100％{top：40px; }} @keyframes的眼睛{0％{顶部：-80px; } 50％{顶部：-280px; } 100％{顶部：-80px; }} @keyframes学生{0％{上：-100px; } 50％{顶部：-300px; } 100％{top：-100px}} @keyframes snood {0％{top：-254px; } 50％{top：-450px; } 100％{顶部：-254px; }} @keyframes legRight {0％{top：-219px; } 50％{顶部：-419px; } 100％{顶部：-219px; }} @keyframes legLeft {0％{top：-242px; } 50％{顶部：-442px; } 100％{顶部：-242px; }} @keyframes tail {0％{top：-200px; } 50％{top：-400px; } 100％{顶部：-200px; }}< / style> < style> .button {高度：100像素；宽度：100px；背景颜色：红色；边界半径：50％；职位：相对顶部：-210px；溢出=滚动; }< / style> < div class = button onclick = jump（）> < h1> JUMP< / h1> < / div> < div class = obstacle>< / div> < style> @keyframes障碍物{从{左起：1000px； }至{左：-870px; }}< / style> < / center>< / body>< / html>
顺便说一句，火鸡在其下喙。因此，要重申这个问题，我如何检测障碍物是否通过了火鸡并查看火鸡是否跳跃？谢谢
解决方案
您的代码真是一团糟。首先，不要混用html代码和css代码。每个都有它的位置。等等...
[edit]
奇怪的是，这个旧帖子似乎引起了新的兴趣...
随着我对JS的了解有所进步，我决定刷新此代码。
//检查浏览器正确的'animationend'nameconst EndAnimationEvent =（（）=> {// IIFE（立即调用函数表达式）let el = document.createElement（'fakeelement'），aKeys = {animation：' animationend'//标准事件名称，OAnimation：'oAnimationEnd'// Opera，MozAnimation：'animationend'// Mozilla，WebkitAnimation：'webkitAnimationEnd'// Safari，msAnimation：'msAnimationEnd'// MsIE};为（在aKeys）{//检查是否（el.style [k]！== und定义）{//正确的属性返回aKeys [k]; //浏览器用法}}}）（）; const myTurkey = document.getElementById（’the-turkey’），myButton = document.getElementById（’my-button’）; myButton.onclick =（）=> {myTurkey.classList.add（'jump'）; } myTurkey.addEventListener（EndAnimationEvent，（）=> {myTurkey.classList.remove（'jump'）;}）;
body {background-color：lightblue; } * {边距：0;填充：0;边界：0; }＃the-turkey {位置：相对；宽度：160px;高度：160像素；边距：220px自动0自动; animation-duration：1s;}＃the-turkey.jump {animation-name：turkey;}＃the-turkey> div {position：absolute; display：block;}＃corpus {top：0;左：40px;宽度：65px;边界半径：50％；背景颜色：棕色；高度：95像素；}＃beak {左：100像素；顶部：20px；填充：1px 1px;宽度：1px；高度：1px； border-top：10px纯透明；左边框：25px实线＃ffc800; border-bottom：5px solid transparent;}＃eyes {width：26px;高度：30px；边界半径：50％；背景颜色：白色；职位：相对顶部：11px； left：77px;}＃学生{宽度：13px;高度：13px；边界半径：50％；背景颜色：黑色；职位：相对顶部：20px； left：86px;}＃snood {width：11px;高度：20px；背景颜色：红色；边界半径：50％；职位：相对顶部：33px； right：45px;}＃tail {width：20px;高度：150px；边界半径：50％；背景色：深红色；职位：相对顶部：-55px；左：5px；变换：rotate（-30deg）;}＃legRight，＃legLeft {宽度：3px;高度：22px；背景颜色：黑色；职位：相对顶部：90px；变换：rotate（30deg）;}＃legRight {左：58px; } #legLeft {左：68px; } @keyframes土耳其{0％{顶部：0像素； } 50％{top：-200px; } 100％{top：0px; }}＃my-button {margin：10px auto 0 auto;高度：100px；宽度：100px；背景颜色：红色；边界半径：50％；溢出：隐藏；光标：指针；}＃my-button> h2 {文本对齐：居中；宽度：100％;页边距：35px;光标：指针；}。obstacle {高度：100像素；宽度：10px；背景颜色：黑色；动画：无限的3s障碍；职位：相对顶部：-250像素；} @关键帧障碍物{从{左起：100％； }至{左：-870px; }}
< div id = the-turkey > < div id = corpus>< / div> < div id = beak>< / div> < div id = eyes>< / div> < div id = pupils>< / div> < div id = snood>< / div> < div id = tail>< / div> < div id = legRight>< / div> < div id = legLeft>< / div>< / div>< div id = my-button> < h2> JUMP< / h2>< / div>< div class = obstacle>< / div>
>
否则，这是之前使用过的JS ...
var
myButton = document.getElementById（'my-button'）
my_Turkey = document.getElementById（'turkey'），
DetectAnimationEnding ='webkitAnimationEnd oAnimationEnd oanimationend msAnimationEnd animationend'.split （''）
;
DetectAnimationEnding
.forEach（function（AnimEndEvent）{
my_Turkey.addEventListener（AnimEndEvent，function（）{
my_Turkey.className =;
}）;
}）;
myButton.onclick = function（）{
my_Turkey.className = jump;
}
Ok so I know the title is nonsense buT how do i check if the obstacle passes a certain point and active a function because of It?
Here is my code so far
function jump() {
jumpDetect = false;
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
setTimeout(() => {
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
}, 0);
winDetection();
}
function winDetection() {
jumpDetect = true;
console.log(jumpDetect)
}
.body {
padding: 30px 30px;
height: 35px;
width: 5px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 0px;
animation-name: turkey;
animation-duration: 1s;
}
.beak {
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
position: relative;
left: 40px;
top: 40px;
animation-name: beak;
animation-duration: 1s;
}
.eyes {
padding: 10px 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
position: relative;
top: -80px;
animation-name: eyes;
animation-duration: 1s;
}
.pupils {
padding: 5px 5px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: black;
position: relative;
top: -100px;
animation-name: pupils;
animation-duration: 1s;
}
.snood {
padding: 5px 5px;
width: 1px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
top: -254px;
right: -38px;
animation-name: snood;
animation-duration: 1s;
}
.legRight {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -219px;
right: 9px;
transform: rotate(30deg);
animation-name: legRight;
animation-duration: 1s;
}
.legLeft {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -242px;
left: 3px;
transform: rotate(30deg);
animation-name: legLeft;
animation-duration: 1s;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 3s infinite;
position: relative;
top: -460px;
}
body {
background-color: lightblue;
}
<html>
<head>
</head>
<body>
<center>
<br><br><br><br><br><br>
<div class="turkey">
<div id="beak" class="turkey beak"></div>
<div id="body" class="turkey body"></div>
<div id="eyes" class="turkey eyes"></div>
<div id="pupils" class="turkey pupils"></div>
<style>
.tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -200px;
right: 59px;
transform: rotate(-30deg);
animation-name: tail;
animation-duration: 1s;
}
</style>
<div id="tail" class="turkey tail" id="tailId"></div>
<div id="snood" class="turkey snood"></div>
<div id="legRight" class="turkey legRight"></div>
<div id="legLeft" class="turkey legLeft"></div>
</div>
<style>
@keyframes turkey {
0% {
top: 0px;
}
50% {
top: -200px;
}
100% {
top: 0px;
}
}
@keyframes beak {
0% {
top: 40px;
}
50% {
top: -160px;
}
100% {
top: 40px;
}
}
@keyframes eyes {
0% {
top: -80px;
}
50% {
top: -280px;
}
100% {
top: -80px;
}
}
@keyframes pupils {
0% {
top: -100px;
}
50% {
top: -300px;
}
100% {
top: -100px
}
}
@keyframes snood {
0% {
top: -254px;
}
50% {
top: -450px;
}
100% {
top: -254px;
}
}
@keyframes legRight {
0% {
top: -219px;
}
50% {
top: -419px;
}
100% {
top: -219px;
}
}
@keyframes legLeft {
0% {
top: -242px;
}
50% {
top: -442px;
}
100% {
top: -242px;
}
}
@keyframes tail {
0% {
top: -200px;
}
50% {
top: -400px;
}
100% {
top: -200px;
}
}
</style>
<style>
.button {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
position: relative;
top: -210px;
overflow=scroll;
}
</style>
<div class="button" onclick="jump()">
<h1>JUMP</h1>
</div>
<div class="obstacle"></div>
<style>
@keyframes obstacle {
from {
left: 1000px;
}
to {
left: -870px;
}
}
</style>
</center>
</body>
</html>
Btw a snood is the turkey's thing under its beak. So to restate the question, How do i detect if the obstacle passes the turkey and see if the turkey jumps or not? Thanks
解决方案
your code is a real mess. First, do not mix the html code and the css code. Each has its place. and more ... argh!
[edit]
Strangely, this old post seems to arouse new interest ...
As my knowledge in JS has progressed a bit, I decided to refresh this code.
// check for browser correct 'animationend' name
const EndAnimationEvent = (()=>{ // IIFE (Immediately Invoked Function Expression)
let el = document.createElement('fakeelement')
, aKeys ={ animation : 'animationend' // standard event name
, OAnimation : 'oAnimationEnd' // Opera
, MozAnimation : 'animationend' // Mozilla
, WebkitAnimation: 'webkitAnimationEnd' // Safari
, msAnimation : 'msAnimationEnd' // MsIE
};
for (let k in aKeys) { // check for
if (el.style[k] !== undefined) { // correct propertie
return aKeys[k]; // browser usage
} } })();
const myTurkey = document.getElementById('the-turkey')
, myButton = document.getElementById('my-button')
;
myButton.onclick = ()=>
{
myTurkey.classList.add('jump');
}
myTurkey.addEventListener( EndAnimationEvent, ()=>
{
myTurkey.classList.remove('jump');
});
body { background-color: lightblue; }
* { margin: 0; padding: 0; border: 0; }
#the-turkey {
position: relative;
width : 160px;
height: 160px;
margin: 220px auto 0 auto;
animation-duration: 1s;
}
#the-turkey.jump {
animation-name: turkey;
}
#the-turkey > div {
position: absolute;
display: block;
}
#corpus {
top: 0;
left :40px;
width : 65px;
border-radius: 50%;
background-color: brown;
height: 95px;
}
#beak {
left: 100px;
top: 20px;
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
}
#eyes {
width:26px;
height: 30px;
border-radius: 50%;
background-color: white;
position: relative;
top: 11px;
left:77px;
}
#pupils {
width: 13px;
height: 13px;
border-radius: 50%;
background-color: black;
position: relative;
top: 20px;
left:86px;
}
#snood {
width: 11px;
height: 20px;
background-color: red;
border-radius: 50%;
position: relative;
top: 33px;
right:45px;
}
#tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: crimson;
position: relative;
top: -55px;
left: 5px;
transform: rotate(-30deg);
}
#legRight,
#legLeft {
width: 3px;
height: 22px;
background-color: black;
position: relative;
top: 90px;
transform: rotate(30deg);
}
#legRight { left: 58px; }
#legLeft { left: 68px; }
@keyframes turkey {
0% { top: 0px; }
50% { top: -200px; }
100% { top: 0px; }
}
#my-button {
margin: 10px auto 0 auto;
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
#my-button>h2 {
text-align: center;
width: 100%;
margin-top: 35px;
cursor: pointer;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 3s infinite;
position: relative;
top: -250px;
}
@keyframes obstacle {
from { left: 100%; }
to { left: -870px; }
}
<div id="the-turkey">
<div id="corpus"></div>
<div id="beak" ></div>
<div id="eyes" ></div>
<div id="pupils"></div>
<div id="snood" ></div>
<div id="tail" ></div>
<div id="legRight" ></div>
<div id="legLeft" ></div>
</div>
<div id="my-button" >
<h2>JUMP</h2>
</div>
<div class="obstacle"></div>
Otherwise, here is the JS used before ...
var
myButton = document.getElementById('my-button')
my_Turkey = document.getElementById('the-turkey'),
DetectAnimationEnding = 'webkitAnimationEnd oAnimationEnd oanimationend msAnimationEnd animationend'.split(' ')
;
DetectAnimationEnding
.forEach(function( AnimEndEvent ) {
my_Turkey.addEventListener( AnimEndEvent, function() {
my_Turkey.className = "";
});
});
myButton.onclick = function () {
my_Turkey.className = "jump";
}
这篇关于如何使函数检查动画是否通过特定点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
