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
+const int RECEDE_TIME = 1000;

[Sami, 2013/04/24 13:15:55]

nit: Constants like this should be of the form const int kRecedeTime = 1000;

[jdduke (slow), 2013/04/24 15:23:44]

Hmm.  Typically, yes, though I'm somewhat hesitant to make that change; all of
these constants come directly from constants in the Android EdgeEffect.java
class.  The idea was that sharing the names might (hopefully) ease maintenance
burdens in the future.  I'm happy to adapt them to Chromium style if you think
that best.

+
+// Time it will take before a pulled glow begins receding in ms
+const int PULL_TIME = 167;
+
+// Time it will take in ms for a pulled glow to decay before release
+const int PULL_DECAY_TIME = 1000;
+
+const float MAX_ALPHA = 1.f;
+const float HELD_EDGE_SCALE_Y = .5f;
+
+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.
+const float GLOW_IMAGE_ASPECT_RATIO_INVERSE = 0.25f;
+
+const float PULL_GLOW_BEGIN = 1.f;
+const float PULL_EDGE_BEGIN = 0.6f;
+
+// Minimum velocity that will be absorbed
+const float MIN_VELOCITY = 25.f;
+
+const float EPSILON = 0.001f;
+
+// How much dragging should effect the height of the edge image.
+// Number determined by user testing.
+const int PULL_DISTANCE_EDGE_FACTOR = 7;
+
+// How much dragging should effect the height of the glow image.
+// Number determined by user testing.
+const int PULL_DISTANCE_GLOW_FACTOR = 7;
+const float PULL_DISTANCE_ALPHA_GLOW_FACTOR = 1.1f;
+
+const int VELOCITY_EDGE_FACTOR = 8;
+const int VELOCITY_GLOW_FACTOR = 16;
+
+template <typename T>
+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);
+}
+
+template <typename T>
+T Damp(T input, T factor) {
+  T result;
+  if (factor == 1) {
+    result = 1 - (1 - input) * (1 - input);
+  } else {
+    result = 1 - std::pow(1 - input, 2 * factor);
+  }
+  return result;
+}
+
+void AttachLayer(scoped_refptr<cc::Layer>& child, cc::Layer* parent) {
+  if (!parent || !child)
+    return;
+
+  if (child->parent() != parent) {
+    child->RemoveFromParent();
+    parent->AddChild(child);
+  }
+}
+
+void DetachLayer(scoped_refptr<cc::Layer>& layer) {
+  if (!layer)
+    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) {
+  DCHECK(edge_);
+  DCHECK(glow_);
+}
+
+EdgeEffect::~EdgeEffect() {
+  Finish();
+}
+
+bool EdgeEffect::IsFinished() const {
+  return state_ == STATE_IDLE;
+}
+
+void EdgeEffect::Finish() {
+  Detach();
+  pull_distance_ = 0;
+  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) {
+  if (IsFinished())
+    return false;
+
+  const double dt = (current_time - start_time_).InMilliseconds();
+  const double t = std::min(dt / duration_.InMilliseconds(), 1.);
+  const float interp = static_cast<float>(Damp(t, 1.));
+
+  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:
+        Finish();
+        break;
+      default:
+        break;
+    }
+  }
+
+  if (state_ == STATE_RECEDE && glow_scale_y_ <= 0 && edge_scale_y_ <= 0)
+    Finish();
+
+  return !IsFinished();
+}
+
+namespace {
+gfx::Transform ComputeTransform(EdgeEffect::Edge edge,
+                                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);
+  };
+}
+
+void UpdateLayer(cc::Layer* layer,
+                 EdgeEffect::Edge edge,
+                 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));
+}
+}

[Sami, 2013/04/24 13:15:55]

nit: "}  // namespace" so it's clear what this brace is for.

[jdduke (slow), 2013/04/24 15:23:44]

Done.

+
+void EdgeEffect::Draw(cc::Layer* parent, gfx::SizeF size, Edge edge) {
+  if (IsFinished())
+    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 = static_cast<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 = static_cast<int>(
+        edge_height * edge_scale_y_ * dpi_scale);
+    UpdateLayer(edge_.get(), edge, size, edge_bottom, edge_alpha_);
+  }
+}
+
+void EdgeEffect::Attach(cc::Layer* parent) {
+  DCHECK(parent);
+  AttachLayer(edge_, parent);
+  AttachLayer(glow_, parent);
+}
+
+void EdgeEffect::Detach() {
+  DetachLayer(edge_);
+  DetachLayer(glow_);
+}
+
+}  // namespace content