Photo Editor: better mode transitions

chrome/browser/resources/file_manager/js/image_editor/image_view.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * The overlay displaying the image.
  * @param {HTMLElement} container The container element.
  * @param {Viewport} viewport The viewport.
  * @param {MetadataCache} metadataCache The metadataCache.
  */
@@ skipping 29 matching lines @@
   this.screenImage_ = null;
 
   this.localImageTransformFetcher_ = function(url, callback) {
     metadataCache.get(url, 'fetchedMedia', function(fetchedMedia) {
       callback(fetchedMedia.imageTransform);
     });
   };
 }
 
 /**
- * Duration of image editing transitions.
+ * Duration for transition between images.
  */
 ImageView.ANIMATION_DURATION = 180;
 
 /**
  * A timeout for use with setTimeout when one wants to wait until the animation
  * is done. Times 2 is added as a safe margin.
  */
 ImageView.ANIMATION_WAIT_INTERVAL = ImageView.ANIMATION_DURATION * 2;
 
 /**
+ * Duration of transition when loading the first image or unloading the last.
+ */
+ImageView.ZOOM_ANIMATION_DURATION = 350;
+
+/**
  * If the user flips though images faster than this interval we do not apply
  * the slide-in/slide-out transition.
  */
 ImageView.FAST_SCROLL_INTERVAL = 300;
 
 /**
  * Image load type: full resolution image loaded from cache.
  */
 ImageView.LOAD_TYPE_CACHED_FULL = 0;
 
@@ skipping 419 matching lines @@
   this.screenCache_.renameItem(this.contentID_, newUrl);
   this.contentID_ = newUrl;
 };
 
 /**
  * Unload content.
  *
  * @param {Rect} zoomToRect Target rectangle for zoom-out-effect.
  */
 ImageView.prototype.unload = function(zoomToRect) {
-  if (zoomToRect) {
-    this.setTransform(this.screenImage_, this.createZoomEffect(zoomToRect));
+  if (this.unloadTimer_) {
+    clearTimeout(this.unloadTimer_);
+    this.unloadTimer_ = null;
+  }
+  if (zoomToRect && this.screenImage_) {
+    var effect = this.createZoomEffect(zoomToRect);
+    this.setTransform(this.screenImage_, effect, effect.duration);
+    this.screenImage_.setAttribute('fade', true);
     this.unloadTimer_ = setTimeout(function() {
         this.unloadTimer_ = null;
         this.unload(null /* force unload */);
       }.bind(this),
-      ImageView.ANIMATION_WAIT_INTERVAL + 100);
+     effect.duration + 100 /* error margin */);
     return;
   }
-  if (this.unloadTimer_) {
-    clearTimeout(this.unloadTimer_);
-    this.unloadTimer_ = null;
-  }
   this.container_.textContent = '';
   this.contentCanvas_ = null;
   this.screenImage_ = null;
   this.videoElement_ = null;
 };
 
 /**
  *
  * @param {HTMLCanvasElement|HTMLVideoElement} content The image element.
  * @param {boolean} opt_reuseScreenCanvas True if it is OK to reuse the screen
@@ skipping 103 matching lines @@
     content, opt_effect, opt_width, opt_height, opt_preview) {
   var oldScreenImage = this.screenImage_;
 
   this.replaceContent_(
       content, !opt_effect, opt_width, opt_height, opt_preview);
 
   if (!opt_effect) return;
 
   var newScreenImage = this.screenImage_;
 
-  ImageUtil.setAttribute(newScreenImage, 'fade', true);
+  if (oldScreenImage)
+    ImageUtil.setAttribute(newScreenImage, 'fade', true);
   this.setTransform(newScreenImage, opt_effect);
   this.container_.appendChild(newScreenImage);
 
   setTimeout(function() {
-    ImageUtil.setAttribute(newScreenImage, 'fade', false);
-    this.setTransform(newScreenImage);
+    this.setTransform(newScreenImage, null, opt_effect && opt_effect.duration);
     if (oldScreenImage) {
+      ImageUtil.setAttribute(newScreenImage, 'fade', false);
       ImageUtil.setAttribute(oldScreenImage, 'fade', true);
       if (opt_effect.getReverse)
         this.setTransform(oldScreenImage, opt_effect.getReverse());
       else
         console.error('Cannot revert an effect.');
       setTimeout(function() {
         oldScreenImage.parentNode.removeChild(oldScreenImage);
       }, ImageView.ANIMATION_WAIT_INTERVAL);
     }
   }.bind(this), 0);
 };
 
 /**
  * @param {HTMLCanvasElement|HTMLVideoElement} element The element to transform.
  * @param {ImageView.Effect} opt_effect The effect to apply.
+ * @param {number} opt_duration Transition duration.

[dgozman, 2012/09/14 15:17:38]

number=

  */
-ImageView.prototype.setTransform = function(element, opt_effect) {
+ImageView.prototype.setTransform = function(element, opt_effect, opt_duration) {
   if (!opt_effect) opt_effect = new ImageView.Effect.None();
+  if (opt_duration == undefined)

[dgozman, 2012/09/14 15:17:38]

I'd use typeof(opt_duration) == "number"

+    element.style.webkitTransitionDuration = '';  // Use CSS-defined default.
+  else
+    element.style.webkitTransitionDuration = opt_duration + 'ms';
   element.style.webkitTransform = opt_effect.transform(element, this.viewport_);
 };
 
 /**
  * @param {Rect} screenRect Target rectangle in screen coordinates.
  * @return {ImageView.Effect.Zoom} Zoom effect object.
  */
 ImageView.prototype.createZoomEffect = function(screenRect) {
   return new ImageView.Effect.Zoom(
-      this.viewport_.screenToDeviceRect(screenRect));
+      this.viewport_.screenToDeviceRect(screenRect),
+      null /* use viewport */,
+      ImageView.ZOOM_ANIMATION_DURATION);
 };
 
 /**
  * Visualize crop or rotate operation. Hide the old image instantly, animate
  * the new image to visualize the operation.
  *
  * @param {HTMLCanvasElement} canvas New content canvas.
  * @param {Rect} imageCropRect The crop rectangle in image coordinates.
  *                             Null for rotation operations.
  * @param {number} rotate90 Rotation angle in 90 degree increments.
  */
 ImageView.prototype.replaceAndAnimate = function(
     canvas, imageCropRect, rotate90) {
   var oldScale = this.viewport_.getScale();
   var deviceCropRect = imageCropRect && this.viewport_.screenToDeviceRect(
         this.viewport_.imageToScreenRect(imageCropRect));
 
   var oldScreenImage = this.screenImage_;
   this.replaceContent_(canvas);
   var newScreenImage = this.screenImage_;
 
   // Display the new canvas, initially transformed.
   var deviceFullRect = this.viewport_.getDeviceClipped();
 
-  //Transform instantly.
-  newScreenImage.style.webkitTransitionDuration = '0ms';
   this.setTransform(newScreenImage, rotate90 ?
       new ImageView.Effect.Rotate(
           oldScale / this.viewport_.getScale(), -rotate90) :
-      new ImageView.Effect.Zoom(deviceCropRect, deviceFullRect));
+      new ImageView.Effect.Zoom(deviceCropRect, deviceFullRect),
+      0 /* Transform instantly*/);
 
   oldScreenImage.parentNode.appendChild(newScreenImage);
   oldScreenImage.parentNode.removeChild(oldScreenImage);
 
-  // Let the layout fire.
-  setTimeout(function() {
-    // Animated back to non-transformed state.
-    newScreenImage.style.webkitTransitionDuration = '';
-    this.setTransform(newScreenImage);
-  }.bind(this), 0);
+  // Let the layout fire, then animate back to non-transformed state.
+  setTimeout(this.setTransform.bind(this, newScreenImage), 0);
 };
 
 /**
  * Visualize "undo crop". Shrink the current image to the given crop rectangle
  * while fading in the new image.
  *
  * @param {HTMLCanvasElement} canvas New content canvas.
  * @param {Rect} imageCropRect The crop rectangle in image coordinates.
  */
 ImageView.prototype.animateAndReplace = function(canvas, imageCropRect) {
@@ skipping 167 matching lines @@
 
 /**
  * Zoom effect.
  *
  * Animates the original rectangle to the target rectangle. Both parameters
  * should be given in device coordinates (accounting for devicePixelRatio).
  *
  * @param {Rect} deviceTargetRect Target rectangle.
  * @param {Rect} opt_deviceOriginalRect Original rectangle. If omitted,
  *   the full viewport will be used at the time of |transform| call.
+ * @param {number} opt_duration Duration in ms.
  * @constructor
  */
-ImageView.Effect.Zoom = function(deviceTargetRect, opt_deviceOriginalRect) {
+ImageView.Effect.Zoom = function(
+    deviceTargetRect, opt_deviceOriginalRect, opt_duration) {
   this.target_ = deviceTargetRect;
   this.original_ = opt_deviceOriginalRect;
+  this.duration = opt_duration;
 };
 
 /**
  * @param {HTMLCanvasElement|HTMLVideoElement} element Element.
  * @param {Viewport} viewport Viewport.
  * @return {string} Transform string.
  */
 ImageView.Effect.Zoom.prototype.transform = function(element, viewport) {
   if (!this.original_)
     this.original_ = viewport.getDeviceClipped();
@@ skipping 26 matching lines @@
 
 /**
  * @param {HTMLCanvasElement|HTMLVideoElement} element Element.
  * @return {string} Transform string.
  */
 ImageView.Effect.Rotate.prototype.transform = function(element) {
   var ratio = ImageView.Effect.getPixelRatio_(element);
   return 'rotate(' + (this.rotate90_ * 90) + 'deg) ' +
          'scale(' + (this.scale_ / ratio) + ')';
 };