Introduced animation state and testing it to determine rendering when at rest

src/openseadragon.js

@@ -1424,9 +1424,25 @@ function OpenSeadragon( options ){
          * @property {Number} ALWAYS Apply subpixel rounding for transparency during animation and when animation is over.
          */
         SUBPIXEL_ROUNDING_OCCURRENCES: {
-            NEVER:          0,
+            NEVER:        0,
-            ONLY_AT_REST:   1,
+            ONLY_AT_REST: 1,
-            ALWAYS:         2
+            ALWAYS:       2
+        },
+
+        /**
+         * An enumeration of animation states.
+         * @static
+         * @type {Object}
+         * @property {Number} AT_REST Indicates there are no more animations running and the image is at rest.
+         * @property {Number} ANIMATION_STARTED Indicates the image is in motion and it just started.
+         * @property {Number} ANIMATING Indicates the image was in motion and is still in motion.
+         * @property {Number} ANIMATION_FINISHED Indicates the image was in motion and is not in motion anymore.
+         */
+         ANIMATION_STATES: {
+            AT_REST:            0,
+            ANIMATION_STARTED:  1,
+            ANIMATING:          2,
+            ANIMATION_FINISHED: 3
         },
 
         /**

src/tiledimage.js

@@ -2210,8 +2210,10 @@ function drawTiles( tiledImage, lastDrawn ) {
     if (isSubPixelRoundingRuleAlways(subPixelRoundingRule)) {
         shouldRoundPositionAndSize = true;
     } else if (isSubPixelRoundingRuleOnlyAtRest(subPixelRoundingRule)) {
-        var isAnimating = tiledImage.viewer && tiledImage.viewer.isAnimating();
+        shouldRoundPositionAndSize = tiledImage.viewer && (
-        shouldRoundPositionAndSize = !isAnimating;
+            tiledImage.viewer.getAnimationState() === $.ANIMATION_STATES.ANIMATION_FINISHED ||
+            tiledImage.viewer.getAnimationState() === $.ANIMATION_STATES.AT_REST // Testing AT_REST here is for the very first render after loading.
+        );
     }
 
     for (var i = lastDrawn.length - 1; i >= 0; i--) {

src/viewer.js

@@ -203,6 +203,7 @@ $.Viewer = function( options ) {
         fsBoundsDelta:     new $.Point( 1, 1 ),
         prevContainerSize: null,
         animating:         false,
+        animationState:    $.ANIMATION_STATES.AT_REST,
         forceRedraw:       false,
         mouseInside:       false,
         group:             null,
@@ -713,6 +714,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
         }
 
         THIS[ this.hash ].animating = false;
+        THIS[ this.hash ].animationState = $.ANIMATION_STATES.AT_REST;
+
         this.world.removeAll();
         this.imageLoader.clear();
 
@@ -2353,6 +2356,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
     isAnimating: function () {
         return THIS[ this.hash ].animating;
     },
+
+    getAnimationState: function () {
+        return THIS[ this.hash ].animationState;
+    },
 });
 
 
@@ -3502,6 +3509,8 @@ function updateOnce( viewer ) {
     var currentAnimating = THIS[ viewer.hash ].animating;
 
     if ( !currentAnimating && animated ) {
+        THIS[ viewer.hash ].animationState = $.ANIMATION_STATES.ANIMATION_STARTED;
+
         /**
          * Raised when any spring animation starts (zoom, pan, etc.).
          *
@@ -3515,7 +3524,18 @@ function updateOnce( viewer ) {
         abortControlsAutoHide( viewer );
     }
 
-    if ( animated || THIS[ viewer.hash ].forceRedraw || viewer.world.needsDraw() ) {
+    var lastAnimation = false;
+
+    if (currentAnimating) {
+        if (animated) {
+            THIS[ viewer.hash ].animationState = $.ANIMATION_STATES.ANIMATING;
+        } else {
+            THIS[ viewer.hash ].animationState = $.ANIMATION_STATES.ANIMATION_FINISHED;
+            lastAnimation = true;
+        }
+    }
+
+    if ( animated || lastAnimation || THIS[ viewer.hash ].forceRedraw || viewer.world.needsDraw() ) {
         drawWorld( viewer );
         viewer._drawOverlays();
         if( viewer.navigator ){
@@ -3540,6 +3560,8 @@ function updateOnce( viewer ) {
     }
 
     if ( currentAnimating && !animated ) {
+        THIS[ viewer.hash ].animationState = $.ANIMATION_STATES.AT_REST;
+
         /**
          * Raised when any spring animation ends (zoom, pan, etc.).
          *
@@ -3558,13 +3580,6 @@ function updateOnce( viewer ) {
 
     THIS[ viewer.hash ].animating = animated;
 
-    // Intentionally use currentAnimating as the value at the current frame,
-    // regardless of THIS[ viewer.hash ].animating being updated.
-    if (currentAnimating && !animated) {
-        // Ensure a draw occurs once animation is over.
-        drawWorld( viewer );
-    }
-
     //viewer.profiler.endUpdate();
 }