Автоматическая петля анимации NanoTween в рекламном баннере HTML5

Question

Я надеюсь, что авто будет зацикливаться на рекламе баннера HTML5, который у меня есть. Анимация построена с использованием NanoTween. Вот код JS:

var container = getElement("id","container"); 

var items = { 
c1: getElement("id", "copy_1"), 
c2: getElement("id", "copy_2"), 
c3: getElement("id", "copy_3"), 
c4: getElement("id", "copy_4"), 
c5: getElement("id", "copy_5"), 
c6: getElement("id", "copy_6"), 
button: getElement("id", "button"), 
elipseOverlay: getElement("id", "elipseOverlay"), 
elipseOverlay2: getElement("id", "elipseOverlay2"), 
elipse: getElement("id", "elipse"), 
elipse2: getElement("id", "elipse2"), 
elipseContainer: getElement("id", "elipseContainer"), 
bar: getElement("id", "bar"), 
magnaclick: getElement("id", "magnaclick"), 
shirt: getElement("id", "shirt") 
}; 

function init() { 
setTimeout(function() { 
    startAnimation(); 
}, 5); 
}; 

// 
function startAnimation() { 
container.style.visibility = "visible"; 

var delay = 0; 
var quickerSpeed = 0.3; 
var mediumSpeed = 1.7; 
var quickSpeed = 0.5; 

var easeInQuad = "cubic-bezier(0.250, 0.985, 0.340, 0.985)"; 
var easeOutQuad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)"; 
var linear = 'linear'; 
var pause = 3.6; 
var loop = 0; 
var loops = 1; 

var magnaClickFps = 15; 
var shirtFps = 10; 
var magnaClickFrames = 5; 
var shirtFrames = 5; 


var magnaclick = function() { 
    for (var i=1; i<=magnaClickFrames; i++) { 
     (function(idx){ 
      setTimeout(function(){ 
       items.magnaclick.className = 'sprite2 magnaclick-'+idx; 
      },(idx-1)*(1000/magnaClickFps)); 
     })(i); 
    } 
}; 

var shirt = function() { 
    for (var i=2; i<=shirtFrames; i++) { 
     (function(idx){ 
      setTimeout(function(){ 
       items.shirt.style = ''; 
       items.shirt.className = 'sprite2 shirt-'+idx; 
      },(idx-1)*(1000/shirtFps)); 
     })(i); 
    } 
}; 

var animate = function() { 

    loop++; 

    // reset 
    NanoTween.to(items.c1, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay}); 
    NanoTween.to(items.c2, 0, { opacity: 0, ease:easeInQuad, delay: delay}); 
    NanoTween.to(items.c3, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay}); 
    NanoTween.to(items.c4, 0, { opacity: 0, ease:easeInQuad, delay: delay}); 
    NanoTween.to(items.c5, 0, { transform: 'translate3d(-150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay}); 
    NanoTween.to(items.c6, 0, { transform: 'translate3d(150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay}); 
    NanoTween.to(items.button, 0, { opacity: 1, ease:easeInQuad, delay: delay}); 

    // initial delay 
    delay += 0.2; 

    // circle 1st half 
    setTimeout(function(){ 
     items.elipseOverlay2.className += ' in'; 
     items.elipse2.className += ' in'; 
    },delay*1000); 

    // circle second half 
    setTimeout(function(){ 
     items.elipseOverlay.className += ' in'; 
     items.elipse.className += ' in'; 
    },(delay+=.2)*1000); 

    // cicrcle bar 
    setTimeout(function(){ 
     items.bar.className += ' in'; 
    },(delay+=.2)*1000); 

    delay += quickerSpeed; 

    // no more zoom in 
    NanoTween.to(items.c1, quickerSpeed, { opacity: 1, scale: 1, ease:easeInQuad, delay: delay}); 
    //NanoTween.to(items.c1, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay}); 
    delay += 2*quickerSpeed; 

    // fussing with buttons fade in 
    NanoTween.to(items.c2, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay}); 
    //NanoTween.to(items.c2, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay}); 

    // pause after frame 1 
    delay += quickSpeed + 1.2; 

    // frame 1 fade out 
    NanoTween.to(items.elipseContainer, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
    NanoTween.to(items.c1, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
    NanoTween.to(items.c2, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
    NanoTween.to(items.bar, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
    NanoTween.to(items.button, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
    delay += quickerSpeed; 

    // magnaclick animation 
    //setTimeout(magnaclick, delay*1000); 
    //delay += ((1000/magnaClickFps)*magnaClickFrames/1000); 

    //magnaclick last farme static 
    items.magnaclick.className = 'sprite2 magnaclick-5'; 
    NanoTween.to(items.magnaclick, 1, { opacity: 1, ease:easeOutQuad, delay: delay - 0.5}); 
    NanoTween.to(items.magnaclick, quickSpeed, { transform: 'translate(0px, 10px)', ease:easeInQuad, delay: delay - 0.5}); 

    // new zoom in 
    NanoTween.to(items.c3, quickerSpeed, { opacity: 1, scale: 1, ease:easeInQuad, delay: delay}); 
    //NanoTween.to(items.c3, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay}); 
    delay += quickerSpeed + 0.2; // + pause 

    // magnetic buttons fade in 
    NanoTween.to(items.c4, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay}); 
    //NanoTween.to(items.c4, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay}); 

    // pause 
    delay += quickSpeed + 0.5; 

    // copy fades out 
    NanoTween.to(items.c3, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
    NanoTween.to(items.c4, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
    // shirt fades in 
    NanoTween.to(items.shirt, mediumSpeed, { opacity: 1, ease:easeInQuad, delay: delay}); 

    delay += quickSpeed; 
    setTimeout(shirt, delay*1000); 

    delay += ((1000/shirtFps)*shirtFrames/1000); 
    NanoTween.to(items.c5, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 1, ease:easeOutQuad, delay: delay}); 
    delay += quickSpeed; 
    NanoTween.to(items.c6, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 2, ease:easeOutQuad, delay: delay}); 



    // 
    //if (loop<loops) { 
    // delay += +quickerSpeed + pause; 
    // NanoTween.to(items.i3, quickerSpeed, { transform: 'translate3d(-150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay }); 
    // NanoTween.to(items.c3, quickerSpeed, { transform: 'translate3d(150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay }); 
    // 
    // setTimeout(animate, quickerSpeed*1000); 
    //} 
}; 

animate(); 

} 

function getElement(element, id) { 
var mc; 
switch(element){ 
    case "id": 
     mc = document.getElementById(id); 
     break; 

    case "class": 
     mc = document.getElementsByClassName(id); 
     break; 
} 

return mc; 
} 


window.onload = function(){ 
init(); 
}; 

Есть код, который можно добавить автоматически цикл этой анимации после короткой паузы в последнем кадре? Пожалуйста, дайте мне знать, если это возможно. Спасибо за помощь!

Answer 1

Это можно сделать, добавив следующее после последнего вызова NanoTween. Цикл приостанавливается на 3.6 секунды (var pause = 3.6;) перед перезапуском.

// the last Tween ran for this duration, so we need to include to get the total duration 
delay += quickerSpeed; 

setTimeout(function() { 
    delay = 0; // reset animation total duration counter 
    animate(); // begin again 
}, (delay + pause) * 1000); // Convert delay & pause to milliseconds & restart once time has elapsed 

Вот полный код, включающий эти изменения:

var container = getElement("id","container"); 

var items = { 
    c1: getElement("id", "copy_1"), 
    c2: getElement("id", "copy_2"), 
    c3: getElement("id", "copy_3"), 
    c4: getElement("id", "copy_4"), 
    c5: getElement("id", "copy_5"), 
    c6: getElement("id", "copy_6"), 
    button: getElement("id", "button"), 
    elipseOverlay: getElement("id", "elipseOverlay"), 
    elipseOverlay2: getElement("id", "elipseOverlay2"), 
    elipse: getElement("id", "elipse"), 
    elipse2: getElement("id", "elipse2"), 
    elipseContainer: getElement("id", "elipseContainer"), 
    bar: getElement("id", "bar"), 
    magnaclick: getElement("id", "magnaclick"), 
    shirt: getElement("id", "shirt") 
}; 

function init() { 
    setTimeout(function() { 
     startAnimation(); 
    }, 5); 
}; 

// 
function startAnimation() { 
    container.style.visibility = "visible"; 

    var delay = 0; 
    var quickerSpeed = 0.3; 
    var mediumSpeed = 1.7; 
    var quickSpeed = 0.5; 

    var easeInQuad = "cubic-bezier(0.250, 0.985, 0.340, 0.985)"; 
    var easeOutQuad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)"; 
    var linear = 'linear'; 
    var pause = 3.6; 
    var loop = 0; 
    var loops = 5; 

    var magnaClickFps = 15; 
    var shirtFps = 10; 
    var magnaClickFrames = 5; 
    var shirtFrames = 5; 


    var magnaclick = function() { 
     for (var i=1; i<=magnaClickFrames; i++) { 
      (function(idx){ 
       setTimeout(function(){ 
        items.magnaclick.className = 'sprite2 magnaclick-'+idx; 
       },(idx-1)*(1000/magnaClickFps)); 
      })(i); 
     } 
    }; 

    var shirt = function() { 
     for (var i=2; i<=shirtFrames; i++) { 
      (function(idx){ 
       setTimeout(function(){ 
        items.shirt.style = ''; 
        items.shirt.className = 'sprite2 shirt-'+idx; 
       },(idx-1)*(1000/shirtFps)); 
      })(i); 
     } 
    }; 

    var animate = function() { 

     loop++; 

     // reset 
     NanoTween.to(items.c1, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay}); 
     NanoTween.to(items.c2, 0, { opacity: 0, ease:easeInQuad, delay: delay}); 
     NanoTween.to(items.c3, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay}); 
     NanoTween.to(items.c4, 0, { opacity: 0, ease:easeInQuad, delay: delay}); 
     NanoTween.to(items.c5, 0, { transform: 'translate3d(-150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay}); 
     NanoTween.to(items.c6, 0, { transform: 'translate3d(150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay}); 
     NanoTween.to(items.button, 0, { opacity: 1, ease:easeInQuad, delay: delay}); 

     // initial delay 
     delay += 0.2; 

     // circle 1st half 
     setTimeout(function(){ 
      items.elipseOverlay2.className += ' in'; 
      items.elipse2.className += ' in'; 
     },delay*1000); 

     // circle second half 
     setTimeout(function(){ 
      items.elipseOverlay.className += ' in'; 
      items.elipse.className += ' in'; 
     },(delay+=.2)*1000); 

     // cicrcle bar 
     setTimeout(function(){ 
      items.bar.className += ' in'; 
     },(delay+=.2)*1000); 

     delay += quickerSpeed; 

     // no more zoom in 
     NanoTween.to(items.c1, quickerSpeed, { opacity: 1, scale: 1, ease:easeInQuad, delay: delay}); 
     //NanoTween.to(items.c1, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay}); 
     delay += 2*quickerSpeed; 

     // fussing with buttons fade in 
     NanoTween.to(items.c2, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay}); 
     //NanoTween.to(items.c2, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay}); 

     // pause after frame 1 
     delay += quickSpeed + 1.2; 

     // frame 1 fade out 
     NanoTween.to(items.elipseContainer, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
     NanoTween.to(items.c1, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
     NanoTween.to(items.c2, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
     NanoTween.to(items.bar, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
     NanoTween.to(items.button, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
     delay += quickerSpeed; 

     // magnaclick animation 
     //setTimeout(magnaclick, delay*1000); 
     //delay += ((1000/magnaClickFps)*magnaClickFrames/1000); 

      //magnaclick last frame static 
      items.magnaclick.className = 'sprite2 magnaclick-5'; 
      NanoTween.to(items.magnaclick, 1, { opacity: 1, ease:easeOutQuad, delay: delay - 0.5}); 
      NanoTween.to(items.magnaclick, quickSpeed, { transform: 'translate(0px, 10px)', ease:easeInQuad, delay: delay - 0.5}); 

     // new zoom in 
     NanoTween.to(items.c3, quickerSpeed, { opacity: 1, scale: 1, ease:easeInQuad, delay: delay}); 
     //NanoTween.to(items.c3, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay}); 
     delay += quickerSpeed + 0.2; // + pause 

     // magnetic buttons fade in 
     NanoTween.to(items.c4, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay}); 
      //NanoTween.to(items.c4, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay}); 

     // pause 
     delay += quickSpeed + 0.5; 

     // copy fades out 
     NanoTween.to(items.c3, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
     NanoTween.to(items.c4, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay}); 
     // shirt fades in 
     NanoTween.to(items.shirt, mediumSpeed, { opacity: 1, ease:easeInQuad, delay: delay}); 

     delay += quickSpeed; 
     setTimeout(shirt, delay*1000); 

     delay += ((1000/shirtFps)*shirtFrames/1000); 
     NanoTween.to(items.c5, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 1, ease:easeOutQuad, delay: delay}); 
     delay += quickSpeed; 
     NanoTween.to(items.c6, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 2, ease:easeOutQuad, delay: delay}) 

     // the last Tween ran for this duration, so we need to include to get the total duration 
     delay += quickerSpeed; 

     setTimeout(function() { 
      delay = 0; 
      animate(); 
     }, (delay + pause) * 1000); // delay & pause are in seconds 

     // 
     //if (loop<loops) { 
     // delay += +quickerSpeed + pause; 
     // NanoTween.to(items.i3, quickerSpeed, { transform: 'translate3d(-150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay }); 
     // NanoTween.to(items.c3, quickerSpeed, { transform: 'translate3d(150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay }); 
     // 
     // setTimeout(animate, quickerSpeed*1000); 
     //} 
    }; 

    animate(); 
} 

function getElement(element, id) { 
    var mc; 
    switch(element){ 
     case "id": 
      mc = document.getElementById(id); 
      break; 

     case "class": 
      mc = document.getElementsByClassName(id); 
      break; 
    } 

    return mc; 
} 


window.onload = function(){ 
    init(); 
}; 

Answer 2

Изменить эту строку:

var animate = function() { 

Для этого:

function animate() { 

И добавить еще один вызов для анимации() здесь:

NanoTween.to(items.c6, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 2, ease:easeOutQuad, delay: delay}); 
animate() 

Не уверен, что если будет какой-то проблемы с Nano tween, но это, по крайней мере, вызовет вашу функцию. Вы не можете использовать синтаксис var animate = function() {, потому что переменная animate недоступна внутри функции.