fix(progressCircular): update animation to spec (#10017)

Previous animation did not properly animate the circle stroke

* Use persistent SVG path for all animations
* Change `stroke-dashoffset` to match spec on every requested frame
* Rotate object -90 degrees every iteration
* Correct overall counter clockwise animation timing in SCSS

Instead of creating a new SVG path every frame, we will instead simply
animate the `stroke-dashoffset` parameter. This allows us to match spec
while also increasing performance by simplifying logic per frame.

Fixes #9879

Author: clshortfuse

src/components/progressCircular/js/progressCircularDirective.js

@@ -62,7 +62,6 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
             $window.webkitCancelRequestAnimationFrame ||
             angular.noop;
 
-  var DEGREE_IN_RADIANS = $window.Math.PI / 180;
   var MODE_DETERMINATE = 'determinate';
   var MODE_INDETERMINATE = 'indeterminate';
   var DISABLED_CLASS = '_md-progress-circular-disabled';
@@ -103,7 +102,7 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
     var path = angular.element(node.querySelector('path'));
     var startIndeterminate = $mdProgressCircular.startIndeterminate;
     var endIndeterminate = $mdProgressCircular.endIndeterminate;
-    var rotationIndeterminate = 0;
+    var iterationCount = 0;
     var lastAnimationId = 0;
     var lastDrawFrame;
     var interval;
@@ -196,40 +195,52 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
         .css('transform-origin', transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin);
 
       element.css(dimensions);
-      path.css('stroke-width',  strokeWidth + 'px');
 
-      renderCircle(value, value);
+      path.attr('stroke-width', strokeWidth);
+      path.attr('stroke-linecap', 'square');
+      if (scope.mdMode == MODE_INDETERMINATE) {
+        path.attr('d', getSvgArc(diameter, true));
+        path.attr('stroke-dasharray', diameter * $window.Math.PI * 0.75);
+        path.attr('stroke-dashoffset', getDashLength(diameter, 1, 75));
+      } else {
+        path.attr('d', getSvgArc(diameter, false));
+        path.attr('stroke-dasharray', diameter * $window.Math.PI);
+        path.attr('stroke-dashoffset', getDashLength(diameter, 0, 100));
+        renderCircle(value, value);
+      }
+
     });
 
-    function renderCircle(animateFrom, animateTo, easing, duration, rotation) {
+    function renderCircle(animateFrom, animateTo, easing, duration, iterationCount, maxValue) {
       var id = ++lastAnimationId;
       var startTime = $mdUtil.now();
       var changeInValue = animateTo - animateFrom;
       var diameter = getSize(scope.mdDiameter);
-      var pathDiameter = diameter - getStroke(diameter);
       var ease = easing || $mdProgressCircular.easeFn;
       var animationDuration = duration || $mdProgressCircular.duration;
+      var rotation = -90 * (iterationCount || 0);
+      var dashLimit = maxValue || 100;
 
       // No need to animate it if the values are the same
       if (animateTo === animateFrom) {
-        path.attr('d', getSvgArc(animateTo, diameter, pathDiameter, rotation));
+        renderFrame(animateTo);
       } else {
         lastDrawFrame = rAF(function animation() {
           var currentTime = $window.Math.max(0, $window.Math.min($mdUtil.now() - startTime, animationDuration));
 
-          path.attr('d', getSvgArc(
-            ease(currentTime, animateFrom, changeInValue, animationDuration),
-            diameter,
-            pathDiameter,
-            rotation
-          ));
+          renderFrame(ease(currentTime, animateFrom, changeInValue, animationDuration));
 
           // Do not allow overlapping animations
           if (id === lastAnimationId && currentTime < animationDuration) {
             lastDrawFrame = rAF(animation);
           }
         });
       }
+
+      function renderFrame(value) {
+        path.attr('stroke-dashoffset', getDashLength(diameter, value, dashLimit));
+        path.attr('transform','rotate(' + (rotation) + ' ' + diameter/2 + ' ' + diameter/2 + ')');
+      }
     }
 
     function animateIndeterminate() {
@@ -238,24 +249,22 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
         endIndeterminate,
         $mdProgressCircular.easeFnIndeterminate,
         $mdProgressCircular.durationIndeterminate,
-        rotationIndeterminate
+        iterationCount,
+        75
       );
 
-      // The % 100 technically isn't necessary, but it keeps the rotation
-      // under 100, instead of becoming a crazy large number.
-      rotationIndeterminate = (rotationIndeterminate + endIndeterminate) % 100;
+      // The %4 technically isn't necessary, but it keeps the rotation
+      // under 360, instead of becoming a crazy large number.
+      iterationCount = ++iterationCount % 4;
 
-      var temp = startIndeterminate;
-      startIndeterminate = -endIndeterminate;
-      endIndeterminate = -temp;
     }
 
     function startIndeterminateAnimation() {
       if (!interval) {
         // Note that this interval isn't supposed to trigger a digest.
         interval = $interval(
           animateIndeterminate,
-          $mdProgressCircular.durationIndeterminate + 50,
+          $mdProgressCircular.durationIndeterminate,
           0,
           false
         );
@@ -278,55 +287,32 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
   }
 
   /**
-   * Generates an arc following the SVG arc syntax.
+   * Returns SVG path data for progress circle
    * Syntax spec: https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
    *
-   * @param {number} current Current value between 0 and 100.
    * @param {number} diameter Diameter of the container.
-   * @param {number} pathDiameter Diameter of the path element.
-   * @param {number=0} rotation The point at which the semicircle should start rendering.
-   * Used for doing the indeterminate animation.
+   * @param {boolean} indeterminate Use if progress circle will be used for indeterminate
    *
    * @returns {string} String representation of an SVG arc.
    */
-  function getSvgArc(current, diameter, pathDiameter, rotation) {
-    // The angle can't be exactly 360, because the arc becomes hidden.
-    var maximumAngle = 359.99 / 100;
-    var startPoint = rotation || 0;
+  function getSvgArc(diameter, indeterminate) {
     var radius = diameter / 2;
-    var pathRadius = pathDiameter / 2;
-
-    var startAngle = startPoint * maximumAngle;
-    var endAngle = current * maximumAngle;
-    var start = polarToCartesian(radius, pathRadius, startAngle);
-    var end = polarToCartesian(radius, pathRadius, endAngle + startAngle);
-    var arcSweep = endAngle < 0 ? 0 : 1;
-    var largeArcFlag;
-
-    if (endAngle < 0) {
-      largeArcFlag = endAngle >= -180 ? 0 : 1;
-    } else {
-      largeArcFlag = endAngle <= 180 ? 0 : 1;
-    }
-
-    return 'M' + start + 'A' + pathRadius + ',' + pathRadius +
-      ' 0 ' + largeArcFlag + ',' + arcSweep + ' ' + end;
+    return 'M' + radius + ',0'
+         + 'A' + radius + ',' + radius + ' 0 1 1 0,' + radius // 75% circle
+         + (indeterminate ? '' : 'A' + radius + ',' + radius + ' 0 0 1 ' + radius + ',0');
   }
 
   /**
-   * Converts Polar coordinates to Cartesian.
+   * Return stroke length for progress circle
    *
-   * @param {number} radius Radius of the container.
-   * @param {number} pathRadius Radius of the path element
-   * @param {number} angleInDegress Angle at which to place the point.
+   * @param {number} diameter Diameter of the container.
+   * @param {number} value Percentage of circle (between 0 and 100)
+   * @param {number} limit Max percentage for circle
    *
-   * @returns {string} Cartesian coordinates in the format of `x,y`.
+   * @returns {number} Stroke length for progres circle
    */
-  function polarToCartesian(radius, pathRadius, angleInDegrees) {
-    var angleInRadians = (angleInDegrees - 90) * DEGREE_IN_RADIANS;
-
-    return (radius + (pathRadius * $window.Math.cos(angleInRadians))) +
-      ',' + (radius + (pathRadius * $window.Math.sin(angleInRadians)));
+  function getDashLength(diameter, value, limit) {
+    return diameter * $window.Math.PI * ( (3 * (limit || 100) / 100) - (value/100) );
   }
 
   /**
@@ -363,4 +349,5 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
   function getStroke(diameter) {
     return $mdProgressCircular.strokeWidth / 100 * diameter;
   }
+
 }

src/components/progressCircular/js/progressCircularProvider.js

@@ -46,9 +46,9 @@ function MdProgressCircularProvider() {
     duration: 100,
     easeFn: linearEase,
 
-    durationIndeterminate: 500,
-    startIndeterminate: 3,
-    endIndeterminate: 80,
+    durationIndeterminate: 1333,
+    startIndeterminate: 1,
+    endIndeterminate: 149,
     easeFnIndeterminate: materialEase,
 
     easingPresets: {

src/components/progressCircular/progress-circular.scss

@@ -1,4 +1,4 @@
-$progress-circular-indeterminate-duration: 2.9s !default;
+$progress-circular-indeterminate-duration: 1568.63ms !default;
 
 @keyframes indeterminate-rotate {
     0%       { transform: rotate(0deg); }

src/components/progressCircular/progress-circular.spec.js

@@ -95,7 +95,7 @@ describe('mdProgressCircular', function() {
       '<md-progress-circular md-diameter="' + diameter + '"></md-progress-circular>'
     ).find('path').eq(0);
 
-    expect(path.css('stroke-width')).toBe(diameter / ratio + 'px');
+    expect(parseFloat(path.attr('stroke-width'))).toBe(diameter / ratio);
   });
 
   it('should hide the element if is disabled', function() {