我如何运行 animation 两个，只有在 animation 一个完成之后？
[英]How do i run animation two, only after animation one has completed?
问题描述
我知道这个问题已经回答了，但大多数都在 jquery 中。 目前function一和function二同时运行。 但是如何更改此代码，以便 function 两个仅在 function 一个完成到达屏幕顶部并再次返回之后运行？
<html> <head> <title>JavaScript Animation</title> </head> <body> <script> function start() { animation(); animationone(); } function animation() { obj = document.getElementById("jbtext"); obj.style.position = "absolute"; obj.style.bottom = "0px"; w = document.body.clientHeight; goUp = true; animateText(); } var obj, w, goUp; function animateText() { var pos = parseInt(obj.style.bottom, 10); (goUp)? pos++: pos--; obj.style.bottom = pos + "px"; if (pos < 0) { goUp = true; } if (pos > w) { goUp = false; } if (pos < 0) { return; } setTimeout(animateText, 10); } document.addEventListener("DOMContentLoaded", start, false); function animationone() { obja = document.getElementById("jbtexta"); obja.style.position = "absolute"; obja.style.left = "10px"; obja.style.bottom = "10px"; wtwo = document.body.clientWidth; goRight = true; animatesecond(); } var obja, wtwo, goRight; function animatesecond() { var position = parseInt(obja.style.left, 10); (goRight)? position++: position--; obja.style.left = position + "px"; if (position > wtwo) { goRight = false; } if (position < 0) { goRight = true; } if (position < 0) { return; } setTimeout(animatesecond, 10); } </script> <p id="jbtext"> first function</p> <p id="jbtexta"> second function</p> </body> </html>
3 个解决方案
解决方案1
1 2019-11-04 21:14:09
您可以在 javascript 中使用承诺。 Promise 是一段代码，它将异步运行并在稍后的时间点返回。 它通过调用 resolve 方法“返回”，该方法是 Promise 构造函数的参数。 然后，您可以将 Promise 链接在一起以完成您所需要的。
function animationOne() {
return new Promise(function(resolve) {
// ... do your logic for the first animation here here.
resolve(); // <-- call this when your animation is finished.
})
}
function animationTwo() {
return new Promise(function(resolve) {
// ... do your logic for animation two here.
resolve(); // <-- call this when your animation is finished.
})
}
animationOne().then(function() {
animationTwo();
})
解决方案2
0 2019-11-05 01:35:02
这只是彼得拉班卡回答的另一种方式。
我不喜欢使用 Promises。 相反，我使用async和await
function runFirst() {
//animation
}
async function waitThenRun() {
await runFirst();
//second animation
}
waitThenRun();
我只是不喜欢Promise的想法。 上面的代码运行waitThenRun() 。 function 然后运行runFirst() ，但等到它完成运行 function 的 rest。 在runFirst中使用setTimeout或其他延迟代码的方式意味着您应该使用Promise 。 （纯 JS）
解决方案3
0 2019-11-06 02:06:38
下面的脚本 AnimationOneAndTwo 怎么样？ 该脚本使用 setInterval 来“运行”动画。 要使用它，请使用工厂方法 createInstance 创建一个实例。 然后当结束第一个 animation 的条件或条件为 true 时，调用实例的下一个方法以启动第二个 animation。 然后当条件或结束第二个 animation 的条件为 true 时调用实例的 end 方法。 以下代码段包含 AnimationOneAndTwo 的定义及其在您的情况下的应用。 有关我如何创建 function 的更多详细信息，请参阅“ 如何在另一个之后运行 Animation：在 Stack Overflow 上对问题的答复”。
<html> <head> <title>JavaScript Animation</title> </head> <body> <script> /*** * AnimationOneAndTwo * Copyright 2019 John Frederick Chionglo (jfchionglo@yahoo.ca) ***/ function AnimationOneAndTwo(parms) { this.id = parms.id; } AnimationOneAndTwo.objs = []; AnimationOneAndTwo.createProcessLogic = function(parms) { var obj; obj = new AnimationOneAndTwo({id: parms.id}); AnimationOneAndTwo.objs[parms.id] = obj; if ("animationStepOne" in parms) {} else { throw new RangeError("animationStepOne not found in parms."); } obj["animationStepOne"] = parms.animationStepOne; if ("animationStepTwo" in parms) {} else { throw new RangeError("animationStepTwo not found in parms."); } obj["animationStepTwo"] = parms.animationStepTwo; if ("speed" in parms) { obj.msf_0 = parms.speed; } return obj; }; with (AnimationOneAndTwo) { prototype.ap = window; prototype.dc = window.document; prototype.np = 6; prototype.nt = 4; prototype.ni = 7; prototype.no = 3; prototype.nn = 1; prototype.nr = 1; (function(ia, pa) { var str, j; for (j=0; j<ia.length; j++) { str = ' prototype.' + 'iE_in_' + ia[j] + ' = function() {\n'; str += ' this.s_in_' + ia[j] + ' = ( this.m_' + pa[j] + ' < 1? true: false );\n'; str += '};\n'; eval(str); } })([1], [0]); (function(ia, pa) { var str, j; for (j=0; j<ia.length; j++) { str = ' prototype.' + 'iE_in_' + ia[j] + ' = function() {\n'; str += ' this.s_in_' + ia[j] + ' = ( this.m_' + pa[j] + ' < 1? false: true );\n'; str += '};\n'; eval(str); } })([0,2,3,4,5,6], [0,2,0,2,5,4]); (function(ia, pa) { var str, j; for (j=0; j<ia.length; j++) { str = ' prototype.' + 'fE_in_' + ia[j] + ' = function() {\n'; str += ' this.m_' + pa[j] + ' -= 1;\n'; str += '};\n'; eval(str); } })([3,4,5,6], [0,2,5,4]); (function(oa, pa, ka) { var str, j; for (j=0; j<oa.length; j++) { str = ' prototype.' + 'fE_ou_' + oa[j] + ' = function() {\n'; str += ' this.m_' + pa[j] + ' += 1;\n'; str += '};\n'; eval(str); } })([0,1,2], [1,3,2]); (function(ta, ia) { var str, j, k, h; for (j=0; j<ta.length; j++) { str = ' prototype.' + 'iE_T_' + ta[j] + ' = function() {\n'; for (h=0; h<ia[j].length; h++) { k = ia[j][h]; str += ' this.iE_in_' + k + '();\n'; } if (ia[j].length<1) { str += ' this.s_t_' + ta[j] + ' = true;\n'; } else { str += ' this.s_t_' + ta[j] + ' = this.s_in_' + ia[j][0]; for (k=1; k<ia[j].length; k++) str += ' && this.s_in_' + ia[j][k]; } str += ';\n'; str += '};\n'; eval(str); } })([0,1,2,3], [[0], [1, 2], [3, 6], [4, 5]]); (function(ta, ia, oa) { var str, j, k, h; for (j=0; j<ta.length; j++) { str = ' prototype.' + 'fE_T_' + ta[j] + ' = function() {\n'; for (h=0; h<ia[j].length; h++) { k = ia[j][h]; str += ' this.fE_in_' + k + '();\n'; } for (h=0; h<oa[j].length; h++) { k = oa[j][h]; str += ' this.fE_ou_' + k + '();\n'; } str += '};\n'; eval(str); } })([0,1,2,3], [[], [], [3, 6], [4, 5]], [[], [], [2], []]); (function(parms) { var str, j, k, h, i; var ta = parms.ta; var pad = parms.pad; var pat = parms.pat; var tar = parms.tar; var tad = parms.tad; var tav = parms.tav; for (i=0; i<ta.length; i++) { j = ta[i]; str = ' prototype.' + ' pEv_T_' + j + ' = function() {\n'; str += ' this.fE_T_' + j + '();\n'; for (h=0; h<tar[j].length; h++) { k = tar[j][h]; str += ' this.iE_T_' + k + '();\n'; } str += ' };\n'; eval(str); } })({ ta: [0,1,2,3], tar: [[0, 1, 2], [0, 1, 2, 3], [0, 1, 2, 3], [1, 3]] }); prototype.pEv_T_0 = function() { this.fE_T_0(); this.iE_T_0(); this.iE_T_1(); this.iE_T_2(); this.animationStepOne(); }; prototype.pEv_T_1 = function() { this.fE_T_1(); this.iE_T_0(); this.iE_T_1(); this.iE_T_2(); this.iE_T_3(); this.animationStepTwo(); }; prototype.ipn = function() { this.iE_T_0(); this.iE_T_1(); this.iE_T_2(); this.iE_T_3(); }; prototype.im = function() { var j, h, pa; for (j=0; j<this.np; j++) { eval('this.m_' + j + ' = 0'); } pa = [1,2,3]; for (h=0; h<pa.length; h++) { j = pa[h]; eval('this.m_' + j + ' = ' + 0); } pa = [0,4,5]; for (h=0; h<pa.length; h++) { j = pa[h]; eval('this.m_' + j + ' = ' + 1); } }; prototype.ai_0 = undefined; prototype.msf_0 = 10; prototype.mss_0 = 1500; prototype.ms_0 = prototype.msf_0; prototype.sp_0 = function() { if (this.ai_0) { this.ap.clearInterval(this.ai_0); this.ai_0 = undefined; } }; prototype.st_0 = function() { if (this.ai_0) { this.sp_0(); } this.ai_0 = this.ap.setInterval('AnimationOneAndTwo.objs[' + this.id + '].rn_0()', this.ms_0); }; prototype.rn_0 = function() { var t; var et = []; if (this.s_t_0) { this.pEv_T_0(); } else if (this.s_t_1) { this.pEv_T_1(); } else { if (this.ai_0) { this.sp_0(); } } }; prototype.start = function() { with (this) { if (ai_0) { sp_0(); } im(); ipn(); st_0(); } }; prototype.next = function() { if (this.s_t_2) { this.pEv_T_2(); } else if (this.s_t_3) { this.pEv_T_3(); } }; prototype.end = function() { if (this.s_t_2) { this.pEv_T_2(); } if (this.s_t_3) { this.pEv_T_3(); } }; } var aotobj; function start() { animation(); animationone(); aotobj = AnimationOneAndTwo.createProcessLogic({ id: 12345, animationStepOne: animateText, animationStepTwo: animatesecond }); aotobj.start(); } function animation() { obj = document.getElementById("jbtext"); obj.style.position = "absolute"; obj.style.bottom = "0px"; w = document.body.clientHeight; goUp = true; // animateText(); } var obj, w, goUp; function animateText() { var pos = parseInt(obj.style.bottom, 10); (goUp)? pos++: pos--; obj.style.bottom = pos + "px"; if (pos < 0) { goUp = true; } if (pos > w) { goUp = false; } if (pos < 0) { aotobj.next(); return; } // setTimeout(animateText, 10); } document.addEventListener("DOMContentLoaded", start, false); function animationone() { obja = document.getElementById("jbtexta"); obja.style.position = "absolute"; obja.style.left = "10px"; obja.style.bottom = "10px"; wtwo = document.body.clientWidth; goRight = true; // animatesecond(); } var obja, wtwo, goRight; function animatesecond() { var position = parseInt(obja.style.left, 10); (goRight)? position++: position--; obja.style.left = position + "px"; if (position > wtwo) { goRight = false; } if (position < 0) { goRight = true; } if (position < 0) { // AnimationOneAndTwo.objs[12345].end(); aotobj.end(); return; } // setTimeout(animatesecond, 10); } </script> <p id="jbtext"> first function</p> <p id="jbtexta"> second function</p> </body> </html>
动画完成后如何让CSS3动画保持其位置？
[英]How to get a CSS3 animation to maintain its location after the animation has completed?
如何在$（document）.ready（）完成后强制Selenium运行测试？
[英]How can I force Selenium to run tests only after $(document).ready() has completed?
我如何在for循环后直到for循环完成其交互之前不运行代码？
[英]How do I get the code after the for-loop to not run until the for-loop has completed its interations?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.