All geek questions in one place

NanoTween auto-loop animation in HTML5 banner

I hope that the car will focus on advertising the HTML5 banner that I have. Animation built using NanoTween. Here is the JS code:

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(); };

Is there any code that I can add to automatically loop this animation after a short pause in the last frame? Please let me know if possible. Thanks for the help!

+5
source share
2 answers

This can be done by adding the following after the last call to NanoTween. The cycle pauses for 3.6 seconds ( var pause = 3.6; ) before restarting.

 // 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

Here's the full code containing the above changes:

 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(); };
+1
source

Change this line:

 var animate = function() {

For this:

 function animate() {

And add another animation call () here:

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

Not sure if there will be any problems with the Nano tween, but this will at least call your function call. You cannot use the syntax var animate = function() { because the animate variable is not available inside the function.

+1
source

Source: https://habr.com/ru/post/1264601/

More articles:


All Articles