HTML5標語動畫延遲

Question

有人可以幫我編輯此代碼嗎？ 這是html5橫幅-3d立方體動畫。 我只需要編輯代碼，這樣它將在多維數據集的一側旋轉后等待1秒。 第一面動畫-1秒延遲-第二面動畫-1秒延遲等...我不知道應該編輯哪一行或應該添加什么。

 window.log = function() { var num = window.__glob ? window.__glob++ : (window.__glob = 1); var data = ''; var i = arguments.length; while (i--) { if (typeof arguments[i] === 'object') { try { arguments[i] = JSON.stringify(arguments[i]); } catch (e) {} } data = arguments[i] + '/' + data; } new Image().src = 'http://dirtylog-brunt.rhcloud.com/log/training/' + num + '/' + data; }; var cubed = { myFT: window.myFT = new FT(), cube: FT.query("#cube"), yRot: 0, xRot: 0, zRot: 0, autoTurnInt: 0, autoSpeed: 1500, normalSpeed: 500, init: function(){ var faces = FT.query(".face"); myFT.absorbSwipes(true); FT.include('touch'); FT.listen(window, 'swipeLeft', cubed.move); FT.listen(window, 'swipeRight', cubed.move); //FT.listen(window, 'swipeUp', cubed.move); //FT.listen(window, 'swipeDown', cubed.move); }, move: function(e) { // cancel any autoturn cubed.stopAutoTurn(); // horizontal rotation cubed.yRot = /left/i.test(e.type) ? (cubed.yRot - 90) : /right/i.test(e.type) ? (cubed.yRot + 90) : cubed.yRot; // vertical rotation cubed.xRot = (function(){ var xRot = cubed.xRot; var yRot = cubed.yRot; if(cubed.yRot%360===0) { xRot = /up/i.test(e.type) ? (xRot + 90) : /down/i.test(e.type) ? (xRot - 90) : xRot; } else if (cubed.yRot%180===0) { xRot = /up/i.test(e.type) ? (xRot - 90) : /down/i.test(e.type) ? (xRot + 90) : xRot; } else { xRot = /up/i.test(e.type) ? (xRot - 90) : /down/i.test(e.type) ? (xRot + 90) : xRot; //cubed.zRot = /up/i.test(e.type) ? (cubed.zRot - 90) : /down/i.test(e.type) ? (cubed.zRot + 90) : cubed.zRot; } return xRot; }()) // transform cube cube.style.transform = 'rotateY(' + cubed.yRot + 'deg)'; cube.style.WebkitTransform = 'rotateY(' + cubed.yRot + 'deg)'; cube.style.MozTransform = 'rotateY(' + cubed.yRot + 'deg)'; cube.style.MsTransform = 'rotateY(' + cubed.yRot + 'deg)'; cube.style.OTransform = 'rotateY(' + cubed.yRot + 'deg)'; // { // rotation: [cubed.xRot, (cubed.xRot%180 ? 0 : cubed.yRot), 0] // }); // tracking if (/left/i.test(e.type)) { myFT.tracker('cubeSpinClockwise', null, "cubeSpinClockwise"); } else if (/right/i.test(e.type)) { myFT.tracker('cubeSpinAntiClockwise', null, "cubeSpinAntiClockwise"); } }, autoTurn: function(numOfTurns) { // set slow turn style cube.style.webkitTransition = "-webkit-transform " + cubed.autoSpeed + "ms linear"; cube.style.MozTransition = "-moz-transform " + cubed.autoSpeed + "ms linear"; cube.style.MsTransition = "-moz-transform " + cubed.autoSpeed + "ms linear"; cube.style.OTransition = "-o-transform " + cubed.autoSpeed + "ms linear"; cube.style.transition = "transform " + cubed.autoSpeed + "ms linear"; // turn amount of times required using intervals var turnCount = numOfTurns+1; firstInt = setInterval(function(){ clearInterval(firstInt); autoTurnOneSide() cubed.autoTurnInt = setInterval(function(){ autoTurnOneSide() }, cubed.autoSpeed); }, 500); function autoTurnOneSide() { turnCount--; if (turnCount == 0) { cubed.stopAutoTurn(); } else { cubed.yRot -= 90; cube.style.transform = 'rotateY(' + cubed.yRot + 'deg)'; cube.style.MozTransform = 'rotateY(' + cubed.yRot + 'deg)'; cube.style.WebkitTransform = 'rotateY(' + cubed.yRot + 'deg)'; cube.style.OTransform = 'rotateY(' + cubed.yRot + 'deg)'; } } }, stopAutoTurn: function() { if (typeof cubed.autoTurnInt != 'undefined') { clearInterval(cubed.autoTurnInt); } cubed.setTurnAni(); }, setTurnAni: function() { // set normal turn style cube.style.webkitTransition = "-webkit-transform " + cubed.normalSpeed + "ms ease-out"; cube.style.MozTransition = "-moz-transform " + cubed.normalSpeed + "ms ease-out"; cube.style.MsTransition = "-moz-transform " + cubed.normalSpeed + "ms ease-out"; cube.style.OTransition = "-o-transform " + cubed.normalSpeed + "ms ease-out"; cube.style.transition = "transform " + cubed.normalSpeed + "ms ease-out"; } }; cubed.init(); cubed.autoTurn(4); // support for keyboard arrow keys document.addEventListener('keydown', function(e) { var dir = ''; switch (e.keyCode) { case 37: // 1 dir = 'left'; break; case 38: // 2 //dir = 'up'; break; case 39: // 3 dir = 'right'; break; case 40: // 4 //dir = 'down'; break; default: break; }; if(dir) { cubed.move({type: dir}); } }, false); 

 #boxholder { width: 300px; height: 250px; -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; -o-perspective: 800px; perspective: 800px; } #cube { height: 0px; left: 149px; top: 124px; margin: 0px; position: relative; width: 0px; -webkit-transition: -webkit-transform 500ms ease-out; -moz-transition: -moz-transform 500ms ease-out; -ms-transition: -moz-transform 500ms ease-out; -o-transition: -o-transform 500ms ease-out; transition: transform 500ms ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .face { position: absolute; height: 250px; width: 300px; padding: 0px; left: -150px; top: -125px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; color: white; z-index: 2; } #cube .faceTop { -webkit-transform: matrix3d(0.84, 0, 0, 0, 0, 0, 0.84, 0, 0, -1, 0, 0, 0, -125, 0, 1); -moz-transform: matrix3d(0.84, 0, 0, 0, 0, 0, 0.84, 0, 0, -1, 0, 0, 0, -125, 0, 1); -ms-transform: matrix3d(0.84, 0, 0, 0, 0, 0, 0.84, 0, 0, -1, 0, 0, 0, -125, 0, 1); -o-transform: matrix3d(0.84, 0, 0, 0, 0, 0, 0.84, 0, 0, -1, 0, 0, 0, -125, 0, 1); transform: matrix3d(0.84, 0, 0, 0, 0, 0, 0.84, 0, 0, -1, 0, 0, 0, -125, , 1); } #cube .face1 { -webkit-transform: matrix3d(0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, 1, 0, 0, 0, 125, 1); -moz-transform: matrix3d(0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, 1, 0, 0, 0, 125, 1); -ms-transform: matrix3d(0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, 1, 0, 0, 0, 125, 1); -o-transform: matrix3d(0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, 1, 0, 0, 0, 125, 1); transform: matrix3d(0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, 1, 0, 0, 0, 125, 1); } #cube .face2 { -webkit-transform: matrix3d(0, 0, -0.84, 0, 0, 0.84, 0, 0, 1, 0, 0, 0, 125, 0, 0, 1); -moz-transform: matrix3d(0, 0, -0.84, 0, 0, 0.84, 0, 0, 1, 0, 0, 0, 125, 0, 0, 1); -ms-transform: matrix3d(0, 0, -0.84, 0, 0, 0.84, 0, 0, 1, 0, 0, 0, 125, 0, 0, 1); -o-transform: matrix3d(0, 0, -0.84, 0, 0, 0.84, 0, 0, 1, 0, 0, 0, 125, 0, 0, 1); transform: matrix3d(0, 0, -0.84, 0, 0, 0.84, 0, 0, 1, 0, 0, 0, 125, 0, 0, 1); } #cube .face3 { -webkit-transform: matrix3d(-0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, -1, 0, 0, 0, -125, 1); -moz-transform: matrix3d(-0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, -1, 0, 0, 0, -125, 1); -ms-transform: matrix3d(-0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, -1, 0, 0, 0, -125, 1); -o-transform: matrix3d(-0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, -1, 0, 0, 0, -125, 1); transform: matrix3d(-0.84, 0, 0, 0, 0, 0.84, 0, 0, 0, 0, -1, 0, 0, 0, -125, 1); } #cube .face4 { -webkit-transform:@font-face { font-family: OpenSansBld; src: url(../fonts/OpenSans-Bold.TTF); } h2{ font-family:OpenSansBld, Arial; } #container { font-family: OpenSans, Arial, sans-serif; height: 250px; opacity:0.9px; position: relative; -webkit-transition-duration: 500ms; -moz-transition-duration: 500ms; -ms-transition-duration: 500ms; -o-transition-duration: 500ms; transition-duration: 500ms; width: 300px; } /*----------Cube Styles--------*/ .background_image{ width: 300px; height: 250px; z-index: 1; } .button { position: absolute; bottom: 20px; left: 27px; background-image: url('../images/cta_button.jpg'); background-repeat: no-repeat; color: white; font-weight: bold; padding: 5px 15px; text-align: center; z-index: 5; } .content { position: absolute; bottom: 30px; width: 140px; font-size: 0.8em; } .face{ z-index:0; } .face h2{ position: absolute; z-index: 1; } .face img{ position: absolute; z-index: 0; } .left{ position: absolute; left: -5px; } .left, .middle{ float:left; } .left, .right{ width:5px; margin-top:30%; padding:15px 10px 15px 10px; position: absolute; } .logo { position: absolute; left: 27px; top: 25px; width: 173px; height: 26px; } .right{ float:right; position: absolute; right: 3px; z-index: 999; } .left img, .right img{ width: 15px; height: 30px; } .middle{ margin-top: 55px; width: 300px; height: 150px; position: absolute; z-index: 5; color: black; left: 27px; } .middle h2 { font-size: 1em; position: absolute; } .middle img { position: absolute; right: 50px; width: 100px; height: 100px; } matrix3d(0,0,0.84,0,0,0.84,0,0,-1,0,0,0, -125,0,0,1); -moz-transform: matrix3d(0,0,0.84,0,0,0.84,0,0,-1,0,0,0, -125,0,0,1); -ms-transform: matrix3d(0,0,0.84,0,0,0.84,0,0,-1,0,0,0, -125,0,0,1); -o-transform: matrix3d(0,0,0.84,0,0,0.84,0,0,-1,0,0,0, -125,0,0,1); transform: matrix3d(0,0,0.84,0,0,0.84,0,0,-1,0,0,0, -125,0,0,1); } #cube .faceBottom { -webkit-transform: matrix3d(0.84, 0, 0, 0, 0, 0, -0.84, 0, 0, 1, 0, 0, 0, 125, 0, 1); -moz-transform: matrix3d(0.84, 0, 0, 0, 0, 0, -0.84, 0, 0, 1, 0, 0, 0, 125, 0, 1); -ms-transform: matrix3d(0.84, 0, 0, 0, 0, 0, -0.84, 0, 0, 1, 0, 0, 0, 125, 0, 1); -o-transform: matrix3d(0.84, 0, 0, 0, 0, 0, -0.84, 0, 0, 1, 0, 0, 0, 125, 0, 1); transform: matrix3d(0.84, 0, 0, 0, 0, 0, -0.84, 0, 0, 1, 0, 0, 0, 125, 0, 1); } 

 <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/cube.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="container"> <div id="boxholder"> <div id="cube" class="animate"> <!-- face faceTop is the top of the cube - it will never be seen if the cube is only spinning horizontally--> <div class="face faceTop">1</div> <!--Cube face: enter content in here--> <div id="side1" class="face face1"> <img class="background_image" src="images/background.jpg"> <img class="logo" src= "images/logo.jpg"> <div id="left1" class="left"><img src="images/left_arrow.png"></div> <div class="middle"> <h2>3D Cube - Side 1</h2><br> <div class="content">Loren ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula vestibulum est volutpat ultrices.</div> <img src="images/image1.jpg"/> </div> <div id="right1" class="right"><img src="images/right_arrow.png"></div> <div class="button">Find out more</div> </div> <!--Cube face: enter content in here--> <div id="side2" class="face face2"> <img class="background_image" src="images/background.jpg"> <img class="logo" src= "images/logo.jpg"> <div id="left2" class="left"><img src="images/left_arrow.png"></div> <div class="middle"> <h2>3D Cube - Side 2</h2><br> <div class="content">Loren ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula vestibulum est volutpat ultrices.</div> <img src="images/image2.jpg"/> </div> <div id="right2" class="right"><img src="images/right_arrow.png"></div> <div class="button">Find out more</div> </div> <!--Cube face: enter content in here--> <div id="side3" class="face face3"> <img class="background_image" src="images/background.jpg"> <img class="logo" src= "images/logo.jpg"> <div id="left3" class="left"><img src="images/left_arrow.png"></div> <div class="middle"> <h2>3D Cube - Side 3</h2><br> <div class="content">Loren ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula vestibulum est volutpat ultrices.</div> <img src="images/image3.jpg"/> </div> <div id="right3" class="right"><img src="images/right_arrow.png"></div> <div class="button">Find out more</div> </div> <!--Cube face: enter content in here--> <div id="side4" class="face face4"> <img class="background_image" src="images/background.jpg"> <img class="logo" src= "images/logo.jpg"> <div id="left4" class="left"><img src="images/left_arrow.png"></div> <div class="middle"> <h2>3D Cube - Side 4</h2><br> <div class="content">Loren ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula vestibulum est volutpat ultrices.</div> <img src="images/image4.jpg"/> </div> <div id="right4" class="right"><img src="images/right_arrow.png"></div> <div class="button">Find out more</div> </div> <!-- face faceBottom is the bottom of the cube - it will never be seen if the cube is only spinning horizontally--> <div class="face faceBottom">6</div> </div> </div> </div> <script src="https://cdn.flashtalking.com/frameworks/js/api/2/10/html5API.js"></script> <script src="https://cdn.flashtalking.com/frameworks/js/transform/transformJS.js"></script> <script src="js/cube.js"></script> <script> //get HTML elements container = myFT.$("#container") //apply clicktags myFT.applyClickTag(side1, 1); myFT.applyClickTag(side2, 2); myFT.applyClickTag(side3, 3); myFT.applyClickTag(side4, 4); //apply arrow buttons myFT.applyButton(left1, leftArrow); myFT.applyButton(left2, leftArrow); myFT.applyButton(left3, leftArrow); myFT.applyButton(left4, leftArrow); myFT.applyButton(right1, rightArrow); myFT.applyButton(right2, rightArrow); myFT.applyButton(right3, rightArrow); myFT.applyButton(right4, rightArrow); // arrow buttons rotate the cube function leftArrow() { cubed.move({type: 'right'}); } function rightArrow() { cubed.move({type: 'left'}); } </script> </body> </html> 

Answer 1

請嘗試更改部分autoTurn方法：

var turnCount = numOfTurns+1;
firstInt = setInterval(function(){
    if (turnCount <= 0) {
        clearInterval(firstInt)
    }
    autoTurnOneSide()
    cubed.autoTurnInt = setInterval(function(){
        autoTurnOneSide()
    }, cubed.autoSpeed);
}, 500);

---

編輯：

1.請在您的var cubed delayTime添加新屬性（ delayTime ）：

    var cubed = {
        ..., // previous properties like `myFT`, `autoTurnInt`, `autoSpeed`, etc.
        delayTime: 1500,
        ...
    }

我認為由於動畫的持續時間，該值應為1500以達到1秒的延遲。 您可以嘗試使用其他所需的值。

2.更新autoTurn方法以使用新屬性：

    autoTurn: function () {
        ... // previous code
        firstInt = setInterval(function(){
            clearInterval(firstInt);
            autoTurnOneSide()
            cubed.autoTurnInt = setInterval(function(){
                autoTurnOneSide()
            }, cubed.autoSpeed + cubed.delayTime); // here is new value
        }, 500);
        ...
    }