如何使函数检查动画是否通过特定点

本文介绍了如何使函数检查动画是否通过特定点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

好吧，所以我知道标题是废话了。我该如何检查障碍物是否经过某个点并因此而激活了功能？

这是我的代码到目前为止

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"; }