From 7fb238edbbbdb613db73d5759cc67a69fafedb63 Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 24 Aug 2023 12:02:28 +0200 Subject: [PATCH] wip #6194 @2:30 correctif timeline, animation runningman --- animations/RUNNINGMAN_BTN.json | 1 + js/quiz.animations.js | 9 +++++++-- js/quiz.screens.js | 8 +++++--- style/100-global.sass | 8 ++++++++ views/footer.blade.php | 2 ++ views/screens/intro.blade.php | 4 +++- 6 files changed, 26 insertions(+), 6 deletions(-) create mode 100644 animations/RUNNINGMAN_BTN.json diff --git a/animations/RUNNINGMAN_BTN.json b/animations/RUNNINGMAN_BTN.json new file mode 100644 index 0000000..a47adc5 --- /dev/null +++ b/animations/RUNNINGMAN_BTN.json @@ -0,0 +1 @@ +{"v":"5.9.0","fr":60,"ip":0,"op":32,"w":300,"h":300,"nm":"RUNNINGMAN_BTN","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"HEAD","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[0]},{"i":{"x":[0],"y":[1.372]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[3]},{"t":30,"s":[0]}],"ix":10},"p":{"a":0,"k":[11.475,7.9,0],"ix":2,"l":2},"a":{"a":0,"k":[11.825,7.9,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.68],[0.632,0],[0,0.68],[-0.631,0]],"o":[[0,0.68],[-0.631,0],[0,-0.68],[0.632,0]],"v":[[4.001,-10.769],[2.857,-9.538],[1.715,-10.769],[2.857,-12]],"c":true},"ix":2},"nm":"Tracé 9","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Fusionner les tracés 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"RIGHT_A","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[-19]},{"t":25,"s":[100]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[12.736,8.604,0],"to":[-0.381,-0.103,0],"ti":[0.381,0.103,0]},{"t":25,"s":[10.45,7.988,0]}],"ix":2,"l":2},"a":{"a":0,"k":[12.736,8.604,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.867,"y":1},"o":{"x":0.133,"y":0},"t":0,"s":[{"i":[[0,0],[-0.842,-0.849],[0,0]],"o":[[0,0],[0.842,0.848],[0,0]],"v":[[2.286,-5.846],[4.068,-2.754],[6.522,-7.532]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[-1.024,-0.596],[0,0]],"o":[[0,0],[0.943,0.549],[0,0]],"v":[[2.286,-5.846],[4.391,-2.998],[9.227,-3.598]],"c":false}]}],"ix":2},"nm":"Tracé 5","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Fusionner les tracés 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"LEFT_A","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[0]},{"t":25,"s":[-120]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[10.45,7.988,0],"to":[0.381,0.103,0],"ti":[-0.381,-0.103,0]},{"t":25,"s":[12.736,8.604,0]}],"ix":2,"l":2},"a":{"a":0,"k":[10.45,7.988,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.867,"y":1},"o":{"x":0.133,"y":0},"t":0,"s":[{"i":[[0,0],[0.567,-0.955],[0,0]],"o":[[0,0],[-0.567,0.955],[0,0]],"v":[[0,-6.462],[-3.308,-4.68],[-3.396,-0.007]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0.904,-0.725],[0,0]],"o":[[0,0],[-0.924,0.74],[0,0]],"v":[[0,-6.462],[-3.306,-5.305],[0.8,-2.011]],"c":false}]}],"ix":2},"nm":"Tracé 8","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Fusionner les tracés 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"BODY","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[0]},{"i":{"x":[0],"y":[1.557]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[2]},{"t":30,"s":[0]}],"ix":10},"p":{"s":true,"x":{"a":0,"k":149.25,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[151.75]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[158.75]},{"t":30,"s":[151.75]}],"ix":4}},"a":{"a":0,"k":[10.225,15.575,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":8,"s":[1000,1000,100]},{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":18,"s":[1000,980,100]},{"t":30,"s":[1000,1000,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.572,2.154],[2.286,-5.846]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.075,0.845],[0.03,-6.405]],"c":false}]}],"ix":2},"nm":"Tracé 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.572,2.154],[-1.143,0.923]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.075,0.845],[0.457,2.123]],"c":false}]}],"ix":2},"nm":"Tracé 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[2.286,-5.846],[0,-6.462]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.03,-6.418],[2.334,-5.815]],"c":false}]}],"ix":2},"nm":"Tracé 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.143,0.923],[0,-6.462]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.457,2.123],[2.322,-5.828]],"c":false}]}],"ix":2},"nm":"Tracé 6","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"LEFT_H","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":30,"s":[-60]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[9.307,15.373,0],"to":[0.286,0.205,0],"ti":[-0.286,-0.205,0]},{"t":30,"s":[11.022,16.604,0]}],"ix":2,"l":2},"a":{"a":0,"k":[9.307,15.373,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[1.368,-0.853],[0,0]],"o":[[0,0],[-1.368,0.853],[0,0]],"v":[[-1.143,0.923],[-2.557,6.872],[-8.55,7.971]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":8,"s":[{"i":[[0,0],[1.152,-0.754],[0,0]],"o":[[0,0],[-1.152,0.754],[0,0]],"v":[[-1.333,0.989],[-0.328,8.015],[-5.065,4.81]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":18,"s":[{"i":[[0,0],[0.112,-1.567],[0,0]],"o":[[0,0],[-0.098,1.373],[0,0]],"v":[[-1.143,0.923],[1.84,6.328],[-3.592,6.805]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0.165,-1.293],[0,0]],"o":[[0,0],[-0.137,1.076],[0,0]],"v":[[-1.431,0.425],[1.442,6.622],[-3.304,11.174]],"c":false}]}],"ix":2},"nm":"Tracé 7","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"RIGHT_H","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":30,"s":[60]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[11.022,16.604,0],"to":[-0.286,-0.205,0],"ti":[0.286,0.205,0]},{"t":30,"s":[9.307,15.373,0]}],"ix":2,"l":2},"a":{"a":0,"k":[11.022,16.604,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":0.552},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[0.821,0.814],[0,0]],"o":[[0,0],[-0.789,-0.781],[0,0]],"v":[[8.367,9.175],[6.867,2.787],[-0.228,2.254]],"c":false}]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":10,"s":[{"i":[[0,0],[0.8,1.125],[0,0]],"o":[[0,0],[-0.784,-1.102],[0,0]],"v":[[8.665,12.141],[5.634,6.441],[0.572,2.154]],"c":false}]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.162,"y":0.162},"t":14,"s":[{"i":[[0,0],[0.768,1.26],[0,0]],"o":[[0,0],[-0.856,-1.405],[0,0]],"v":[[7.326,12.403],[5.698,6.354],[0.206,2.265]],"c":false}]},{"i":{"x":0.667,"y":0.666},"o":{"x":0.333,"y":0.333},"t":18,"s":[{"i":[[0,0],[0.837,1.293],[0,0]],"o":[[0,0],[-0.735,-1.135],[0,0]],"v":[[6.73,13.128],[5.424,6.586],[0.88,2.09]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0.401},"t":26,"s":[{"i":[[0,0],[0.837,1.293],[0,0]],"o":[[0,0],[-0.735,-1.135],[0,0]],"v":[[5.458,12.627],[4.749,6.819],[0.572,2.154]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0.849,1.47],[0,0]],"o":[[0,0],[-0.696,-1.205],[0,0]],"v":[[2.978,12.094],[4.813,5.623],[0.572,2.154]],"c":false}]}],"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/js/quiz.animations.js b/js/quiz.animations.js index 6d92b17..3453e30 100644 --- a/js/quiz.animations.js +++ b/js/quiz.animations.js @@ -22,7 +22,7 @@ QuizAnimations.prototype = { // Load the animation "name" in container - load: function (name, container, replace) { + load: function (name, container, replace, loop = false) { let json = this.quiz.data.animations[name]; if (json) { for (const k in replace) { @@ -31,7 +31,7 @@ QuizAnimations.prototype = { lottie.loadAnimation({ container: $(container).get(0), renderer: 'svg', - loop: false, + loop: loop, autoplay: true, animationData: JSON.parse(json), }); @@ -62,6 +62,11 @@ QuizAnimations.prototype = { }, 500); } }, + + runningMan: function () { + $(".runningman").empty() + this.quiz.animations.load("RUNNINGMAN_BTN", ".active-screen .runningman", '', true); + } } diff --git a/js/quiz.screens.js b/js/quiz.screens.js index c680692..217cbf7 100644 --- a/js/quiz.screens.js +++ b/js/quiz.screens.js @@ -163,18 +163,20 @@ QuizScreens.prototype = { if($this.quiz.question.current() !== undefined) { if (parseInt($this.quiz.question.current().countdown_enable)) { $this.countdown() + setTimeout(() => { + $this.quiz.animations.runningMan() + $(".runningman").css("opacity", 1) + }, 350) } } } - }, 1.2) + }, 1.4) // Reset form to prevent browser letting a option selected after a refresh $this.resetForm(); $this.currentQuestionAnswers = []; $this.quiz.progressbar.update(); - - if (screen === 'outro') { $this.outro.show(); } diff --git a/style/100-global.sass b/style/100-global.sass index 3eafac5..4fe992e 100644 --- a/style/100-global.sass +++ b/style/100-global.sass @@ -89,6 +89,14 @@ body width: 15px height: 15px +.runningman + height: 34px + display: flex + position: absolute + right: 20px + opacity: 0 + transition: opacity .2s + .screen position: relative z-index: 1 diff --git a/views/footer.blade.php b/views/footer.blade.php index f630c6a..0133295 100644 --- a/views/footer.blade.php +++ b/views/footer.blade.php @@ -8,6 +8,8 @@ Validate answer space + + @isset($time) @endisset diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php index a75421c..89d8889 100644 --- a/views/screens/intro.blade.php +++ b/views/screens/intro.blade.php @@ -12,6 +12,8 @@ -- 2.39.5