Add overscroll edge effect animations for Android.

content/browser/android/edge_effect.cc

+// Copyright (c) 2013 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.
+
+#include "content/browser/android/edge_effect.h"
+
+#include "cc/layers/layer.h"
+#include "ui/gfx/screen.h"
+#include "ui/gfx/size_f.h"
+
+namespace content {
+
+namespace {
+
+enum State {
+  STATE_IDLE = 0,
+  STATE_PULL,
+  STATE_ABSORB,
+  STATE_RECEDE,
+  STATE_PULL_DECAY
+};
+
+// Time it will take the effect to fully recede in ms
+static const int RECEDE_TIME = 1000;
+
+// Time it will take before a pulled glow begins receding in ms
+static const int PULL_TIME = 167;
+
+// Time it will take in ms for a pulled glow to decay before release
+static const int PULL_DECAY_TIME = 1000;
+
+static const float MAX_ALPHA = 1.f;
+static const float HELD_EDGE_SCALE_Y = .5f;
+
+static const float MAX_GLOW_HEIGHT = 4.f;
+
+// Note: The Android version computes the aspect ratio from the source texture;
+// because we use rescaled images, this is precomputed from the original Android
+// textures.
+static const float GLOW_IMAGE_ASPECT_RATIO_INVERSE = 0.25f;
+
+static const float PULL_GLOW_BEGIN = 1.f;
+static const float PULL_EDGE_BEGIN = 0.6f;
+
+// Minimum velocity that will be absorbed
+static const float MIN_VELOCITY = 25.f;
+
+static const float EPSILON = 0.001f;
+
+// How much dragging should effect the height of the edge image.
+// Number determined by user testing.
+static const int PULL_DISTANCE_EDGE_FACTOR = 7;
+
+// How much dragging should effect the height of the glow image.
+// Number determined by user testing.
+static const int PULL_DISTANCE_GLOW_FACTOR = 7;
+static const float PULL_DISTANCE_ALPHA_GLOW_FACTOR = 1.1f;
+
+static const int VELOCITY_EDGE_FACTOR = 8;
+static const int VELOCITY_GLOW_FACTOR = 16;
+
+template <typename T>
+static T Lerp(T a, T b, T t) {
+  return a + (b - a) * t;
+}
+
+template <typename T>
+T Clamp(T value, T low, T high) {
+   return value < low ? low : (value > high ? high : value);
+}
+
+static float Damp(float input, float factor) {
+  float result;
+  if (factor == 1.0f) {
+    result = (float)(1.0f - (1.0f - input) * (1.0f - input));
+  } else {
+    result = (float)(1.0f - std::pow((1.0f - input), 2 * factor));
+  }
+  return result;
+}
+
+int Depth(const cc::Layer* layer) {
+  int count = 0;
+  while (layer != NULL) {
+    ++count;
+    layer = layer->parent();
+  }
+  return count;
+}
+
+static void AttachLayer(scoped_refptr<cc::Layer>& child, cc::Layer* parent) {
+  if (!parent || !child)
+    return;
+
+  if (child->parent() != parent) {
+    child->RemoveFromParent();
+    parent->AddChild(child);
+  }
+}
+
+static void DetachLayer(scoped_refptr<cc::Layer>& layer) {
+  if (!layer || !layer->parent())
+    return;
+
+  layer->SetIsDrawable(false);
+  layer->RemoveFromParent();
+}
+
+} // namespace
+
+EdgeEffect::EdgeEffect(scoped_refptr<cc::Layer> edge,
+                       scoped_refptr<cc::Layer> glow)
+  : edge_(edge)
+  , glow_(glow)
+  , edge_alpha_(0)
+  , edge_scale_y_(0)
+  , glow_alpha_(0)
+  , glow_scale_y_(0)
+  , edge_alpha_start_(0)
+  , edge_alpha_finish_(0)
+  , edge_scale_y_start_(0)
+  , edge_scale_y_finish_(0)
+  , glow_alpha_start_(0)
+  , glow_alpha_finish_(0)
+  , glow_scale_y_start_(0)
+  , glow_scale_y_finish_(0)
+  , state_(STATE_IDLE)
+  , pull_distance_(0)
+  , base_attachment_depth_(0) {
+  DCHECK(edge_);
+  DCHECK(glow_);
+  base_attachment_depth_ = CurrentAttachmentDepth();
+}
+
+EdgeEffect::~EdgeEffect() {
+  Finish();
+}
+
+bool EdgeEffect::IsFinished() const {
+  return state_ == STATE_IDLE;
+}
+
+void EdgeEffect::Finish() {
+  Detach();
+  state_ = STATE_IDLE;
+}
+
+void EdgeEffect::Pull(base::TimeTicks current_time, float delta_distance) {
+  if (state_ == STATE_PULL_DECAY && current_time - start_time_ < duration_) {
+    return;
+  }
+
+  if (state_ != STATE_PULL) {
+    glow_scale_y_ = PULL_GLOW_BEGIN;
+  }
+  state_ = STATE_PULL;
+
+  start_time_ = current_time;
+  duration_ = base::TimeDelta::FromMilliseconds(PULL_TIME);
+
+  float abs_delta_distance = std::abs(delta_distance);
+  pull_distance_ += delta_distance;
+  float distance = std::abs(pull_distance_);
+
+  edge_alpha_ = edge_alpha_start_ = Clamp(distance, PULL_EDGE_BEGIN, MAX_ALPHA);
+  edge_scale_y_ = edge_scale_y_start_
+      = Clamp(distance * PULL_DISTANCE_EDGE_FACTOR, HELD_EDGE_SCALE_Y, 1.f);
+
+  glow_alpha_ = glow_alpha_start_
+      = std::min(MAX_ALPHA,
+                 glow_alpha_ +
+                     abs_delta_distance * PULL_DISTANCE_ALPHA_GLOW_FACTOR);
+
+  float glow_change = abs_delta_distance;
+  if (delta_distance > 0 && pull_distance_ < 0) {
+    glow_change = -glow_change;
+  }
+  if (pull_distance_ == 0) {
+    glow_scale_y_ = 0;
+  }
+
+  // Do not allow glow to get larger than MAX_GLOW_HEIGHT.
+  glow_scale_y_ = glow_scale_y_start_
+      = Clamp(glow_scale_y_ + glow_change * PULL_DISTANCE_GLOW_FACTOR,
+              0.f, MAX_GLOW_HEIGHT);
+
+  edge_alpha_finish_ = edge_alpha_;
+  edge_scale_y_finish_ = edge_scale_y_;
+  glow_alpha_finish_ = glow_alpha_;
+  glow_scale_y_finish_ = glow_scale_y_;
+}
+
+void EdgeEffect::Release(base::TimeTicks current_time) {
+  pull_distance_ = 0;
+
+  if (state_ != STATE_PULL && state_ != STATE_PULL_DECAY) {
+    return;
+  }
+
+  state_ = STATE_RECEDE;
+  edge_alpha_start_ = edge_alpha_;
+  edge_scale_y_start_ = edge_scale_y_;
+  glow_alpha_start_ = glow_alpha_;
+  glow_scale_y_start_ = glow_scale_y_;
+
+  edge_alpha_finish_ = 0.f;
+  edge_scale_y_finish_ = 0.f;
+  glow_alpha_finish_ = 0.f;
+  glow_scale_y_finish_ = 0.f;
+
+  start_time_ = current_time;
+  duration_ = base::TimeDelta::FromMilliseconds(RECEDE_TIME);
+}
+
+void EdgeEffect::Absorb(base::TimeTicks current_time, float velocity) {
+  state_ = STATE_ABSORB;
+  velocity = std::max(MIN_VELOCITY, std::abs(velocity));
+
+  start_time_ = current_time;
+  // This should never be less than 1 millisecond.
+  duration_ = base::TimeDelta::FromMilliseconds(0.25f + (velocity * 0.03f));
+
+  // The edge should always be at least partially visible, regardless
+  // of velocity.
+  edge_alpha_start_ = 0.f;
+  edge_scale_y_ = edge_scale_y_start_ = 0.f;
+  // The glow depends more on the velocity, and therefore starts out
+  // nearly invisible.
+  glow_alpha_start_ = 0.5f;
+  glow_scale_y_start_ = 0.f;
+
+  // Factor the velocity by 8. Testing on device shows this works best to
+  // reflect the strength of the user's scrolling.
+  edge_alpha_finish_ = Clamp(velocity * VELOCITY_EDGE_FACTOR, 0.f, 1.f);
+  // Edge should never get larger than the size of its asset.
+  edge_scale_y_finish_ = Clamp(velocity * VELOCITY_EDGE_FACTOR,
+                               HELD_EDGE_SCALE_Y, 1.f);
+
+  // Growth for the size of the glow should be quadratic to properly
+  // respond
+  // to a user's scrolling speed. The faster the scrolling speed, the more
+  // intense the effect should be for both the size and the saturation.
+  glow_scale_y_finish_
+      = std::min(0.025f + (velocity * (velocity / 100) * 0.00015f), 1.75f);
+  // Alpha should change for the glow as well as size.
+  glow_alpha_finish_
+      = Clamp(glow_alpha_start_,
+              velocity * VELOCITY_GLOW_FACTOR * .00001f, MAX_ALPHA);
+}
+
+bool EdgeEffect::Update(base::TimeTicks current_time) {
+  const float dt = (current_time - start_time_).InMilliseconds();
+  const float t = std::min(dt / duration_.InMilliseconds(), 1.f);
+  const float interp = Damp(t, 1.f);
+
+  edge_alpha_ = Lerp(edge_alpha_start_, edge_alpha_finish_, interp);
+  edge_scale_y_ = Lerp(edge_scale_y_start_, edge_scale_y_finish_, interp);
+  glow_alpha_ = Lerp(glow_alpha_start_, glow_alpha_finish_, interp);
+  glow_scale_y_ = Lerp(glow_scale_y_start_, glow_scale_y_finish_, interp);
+
+  if (t >= 1.f - EPSILON) {
+    switch (state_) {
+      case STATE_ABSORB:
+        state_ = STATE_RECEDE;
+        start_time_ = current_time;
+        duration_ = base::TimeDelta::FromMilliseconds(RECEDE_TIME);
+
+        edge_alpha_start_ = edge_alpha_;
+        edge_scale_y_start_ = edge_scale_y_;
+        glow_alpha_start_ = glow_alpha_;
+        glow_scale_y_start_ = glow_scale_y_;
+
+      // After absorb, the glow and edge should fade to nothing.
+        edge_alpha_finish_ = 0.f;
+        edge_scale_y_finish_ = 0.f;
+        glow_alpha_finish_ = 0.f;
+        glow_scale_y_finish_ = 0.f;
+        break;
+      case STATE_PULL:
+        state_ = STATE_PULL_DECAY;
+        start_time_ = current_time;
+        duration_ = base::TimeDelta::FromMilliseconds(PULL_DECAY_TIME);
+
+        edge_alpha_start_ = edge_alpha_;
+        edge_scale_y_start_ = edge_scale_y_;
+        glow_alpha_start_ = glow_alpha_;
+        glow_scale_y_start_ = glow_scale_y_;
+
+        // After pull, the glow and edge should fade to nothing.
+        edge_alpha_finish_ = 0.f;
+        edge_scale_y_finish_ = 0.f;
+        glow_alpha_finish_ = 0.f;
+        glow_scale_y_finish_ = 0.f;
+        break;
+      case STATE_PULL_DECAY:
+        {
+          // When receding, we want edge to decrease more slowly
+          // than the glow.
+          float factor = glow_scale_y_finish_ != 0 ?
+              1 / (glow_scale_y_finish_ * glow_scale_y_finish_) :
+              std::numeric_limits<float>::max();
+          edge_scale_y_ = edge_scale_y_start_ +
+              (edge_scale_y_finish_ - edge_scale_y_start_) * interp * factor;
+          state_ = STATE_RECEDE;
+        }
+        break;
+      case STATE_RECEDE:
+        state_ = STATE_IDLE;
+        break;
+      default:
+        break;
+    }
+  }
+
+  if (state_ == STATE_RECEDE && glow_scale_y_ <= 0 && edge_scale_y_ <= 0) {
+    state_ = STATE_IDLE;
+  }
+
+  return !IsFinished();
+}
+
+namespace {
+static gfx::Transform ComputeTransform(EdgeEffect::Edge edge,
+                                       const gfx::SizeF& size, int height) {
+  switch (edge) {
+    default:
+    case EdgeEffect::EDGE_TOP:
+      return gfx::Transform(1, 0, 0, 1, 0, 0);
+    case EdgeEffect::EDGE_LEFT:
+      return gfx::Transform(0, 1, -1, 0,
+                            (-size.width() + height) / 2 ,
+                            (size.width() - height) / 2);
+    case EdgeEffect::EDGE_BOTTOM:
+      return gfx::Transform(-1, 0, 0, -1, 0, size.height() - height);
+    case EdgeEffect::EDGE_RIGHT:
+      return gfx::Transform(0, -1, 1, 0,
+                            (-size.width() - height) / 2 + size.height(),
+                            (size.width() - height) / 2);
+  };
+}
+
+static void UpdateLayer(cc::Layer* layer,
+                        EdgeEffect::Edge edge,
+                        const gfx::SizeF& size,
+                        int height,
+                        float opacity) {
+  layer->SetIsDrawable(true);
+  layer->SetTransform(ComputeTransform(edge, size, height));
+  layer->SetBounds(gfx::Size(size.width(), height));
+  layer->SetOpacity(Clamp(opacity, 0.f, 1.f));
+}
+}
+
+void EdgeEffect::Draw(cc::Layer* parent, const gfx::SizeF& size, Edge edge) {
+  DCHECK(parent);
+
+  if (IsFinished()) {
+    Detach();
+    return;
+  }
+
+  // If additional levels have been added to the layer tree after the animation
+  // started, disable the animation to prevent clipping or transparency issues.
+  if (base_attachment_depth_ != CurrentAttachmentDepth()) {
+    Finish();
+    return;
+  }
+
+  Attach(parent);
+
+  const float dpi_scale =
+      gfx::Screen::GetNativeScreen()->GetPrimaryDisplay().device_scale_factor();
+
+  // Glow
+  {
+    gfx::Size glow_image_bounds;
+    float dummy_scale_x, dummy_scale_y;
+    glow_->CalculateContentsScale(1.f, false, &dummy_scale_x, &dummy_scale_y,
+                                       &glow_image_bounds);
+    const int glow_height = glow_image_bounds.height();
+    const int glow_bottom = (int)(std::min(
+        glow_height * glow_scale_y_ * GLOW_IMAGE_ASPECT_RATIO_INVERSE * 0.6f,
+        glow_height * MAX_GLOW_HEIGHT) * dpi_scale + 0.5f);
+    UpdateLayer(glow_.get(), edge, size, glow_bottom, glow_alpha_);
+  }
+
+  // Edge
+  {
+    gfx::Size edge_image_bounds;
+    float dummy_scale_x, dummy_scale_y;
+    edge_->CalculateContentsScale(1.f, false, &dummy_scale_x, &dummy_scale_y,
+                                       &edge_image_bounds);
+    const int edge_height = edge_image_bounds.height();
+    const int edge_bottom = (int)(edge_height * edge_scale_y_ * dpi_scale);
+    UpdateLayer(edge_.get(), edge, size, edge_bottom, edge_alpha_);
+  }
+}
+
+void EdgeEffect::Attach(cc::Layer* parent) {
+  AttachLayer(edge_, parent);
+  AttachLayer(glow_, parent);
+  base_attachment_depth_ = CurrentAttachmentDepth();
+}
+
+void EdgeEffect::Detach() {
+  DetachLayer(edge_);
+  DetachLayer(glow_);
+  base_attachment_depth_ = CurrentAttachmentDepth();
+}
+
+int EdgeEffect::CurrentAttachmentDepth() const {
+  return Depth(edge_.get());
+}
+
+
+}  // namespace content