From: nael <nael@cubedesigners.com>
Date: Wed, 13 Feb 2019 12:49:44 +0000 (+0100)
Subject: wait #2593 @0.30 donuts effect
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=104b56f31e0ebbe22361727799428f87594f5956;p=Animations.git

wait #2593 @0.30 donuts effect
---

diff --git a/Circle-Animation/main.js b/Circle-Animation/main.js
index e1c7c04..25a7d54 100644
--- a/Circle-Animation/main.js
+++ b/Circle-Animation/main.js
@@ -3,13 +3,12 @@ let paperWidth = window.innerWidth;
 
 const color = "#fff";
 const stroke = "none";
-
 let paper = Raphael('canvas', paperWidth,paperHeight);
 let paperRadius ;
 
 $(function () {
 
-    let delayValue = 2;
+    let delayValue = 0;
     // circle size
     let circleOption = 2;
 
@@ -20,7 +19,6 @@ $(function () {
         paperRadius = Math.min(paperWidth, paperHeight) /2;
     }
 
-
 // circle direction
     let circleStart = 90;
 
@@ -36,31 +34,45 @@ $(function () {
 
     updateAngle();
 
+    console.log("Le rayon est: "+paperRadius);
+
     TweenMax.to(window,5,{angle: angleEnd ,onUpdate:updateAngle, delay: delayValue });
 });
 
+// choose percent radius of the donut circle
+let donutRadius = 0.50;
+
 function updateAngle() {
     paper.clear();
-    sector(paper,paperWidth/2, paperHeight/2,paperRadius, window.angle, window.angleEnd,{fill: color,stroke: stroke});
+    sector(paper,paperWidth/2, paperHeight/2,paperRadius, donutRadius ,window.angle, window.angleEnd,{fill: color,stroke: stroke});
 }
 
 function calcHypotenuse(a, b) {
     return(Math.sqrt((a * a) + (b * b)));
-
 }
-function sector(paper,cx, cy, r, startAngle, endAngle, params) {
+function sector(paper,cx, cy, r, pct, startAngle, endAngle, params) {
     if(window.circleDirection===1){
-        var sa=startAngle;
+        let sa=startAngle;
         startAngle=endAngle;
         endAngle=sa;
     }
-
+    // init radian
     let rad= Math.PI/180;
+    // first circle (bigger)
     let x1 = cx + r * Math.cos(-startAngle * rad),
         x2 = cx + r * Math.cos(-endAngle * rad),
         y1 = cy + r * Math.sin(-startAngle * rad),
         y2 = cy + r * Math.sin(-endAngle * rad);
-    var long= +(endAngle - startAngle > 180);
 
-    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0,long, 0, x2, y2, "z"]).attr(params);
-}
\ No newline at end of file
+    // second circle / donut section
+    let r1 = r * pct;
+    let
+        x3 = cx + r1 * Math.cos(-endAngle * rad),
+        y3 = cy + r1 * Math.sin(-endAngle * rad),
+        x4 = cx + r1 * Math.cos(-startAngle * rad),
+        y4 = cy + r1 * Math.sin(-startAngle * rad);
+
+    let long= +(endAngle - startAngle > 180);
+
+   return paper.path(["M", x4,y4, "L", x1,y1, "A", r,r, 0,long, 0, x2,y2, "L", x3,y3, "A", r1,r1,0, long, 1, x4,y4,"z"]).attr(params);
+}