Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(175)

Side by Side Diff: content/browser/android/edge_effect.cc

Issue 14268004: Add overscroll edge effect animations for Android. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Use LazyInstance for overscroll resources Created 7 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « content/browser/android/edge_effect.h ('k') | content/browser/android/overscroll_glow.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 // Copyright (c) 2013 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file.
4
5 #include "content/browser/android/edge_effect.h"
6
7 #include "cc/layers/layer.h"
8 #include "ui/gfx/screen.h"
9
10 namespace content {
11
12 namespace {
13
14 enum State {
15 STATE_IDLE = 0,
16 STATE_PULL,
17 STATE_ABSORB,
18 STATE_RECEDE,
19 STATE_PULL_DECAY
20 };
21
22 // Time it will take the effect to fully recede in ms
23 const int kRecedeTime = 1000;
24
25 // Time it will take before a pulled glow begins receding in ms
26 const int kPullTime = 167;
27
28 // Time it will take in ms for a pulled glow to decay before release
29 const int kPullDecayTime = 1000;
30
31 const float kMaxAlpha = 1.f;
32 const float kHeldEdgeScaleY = .5f;
33
34 const float kMaxGlowHeight = 4.f;
35
36 // Note: The Android version computes the aspect ratio from the source texture;
37 // because we use rescaled images, this is precomputed from the original Android
38 // textures.
39 const float kGlowImageAspectRatioInverse = 0.25f;
40
41 const float kPullGlowBegin = 1.f;
42 const float kPullEdgeBegin = 0.6f;
43
44 // Minimum velocity that will be absorbed
45 const float kMinVelocity = 100.f;
46
47 const float kEpsilon = 0.001f;
48
49 // How much dragging should effect the height of the edge image.
50 // Number determined by user testing.
51 const int kPullDistanceEdgeFactor = 7;
52
53 // How much dragging should effect the height of the glow image.
54 // Number determined by user testing.
55 const int kPullDistanceGlowFactor = 7;
56 const float kPullDistanceAlphaGlowFactor = 1.1f;
57
58 const int kVelocityEdgeFactor = 8;
59 const int kVelocityGlowFactor = 16;
60
61 template <typename T>
62 T Lerp(T a, T b, T t) {
63 return a + (b - a) * t;
64 }
65
66 template <typename T>
67 T Clamp(T value, T low, T high) {
68 return value < low ? low : (value > high ? high : value);
69 }
70
71 template <typename T>
72 T Damp(T input, T factor) {
73 T result;
74 if (factor == 1) {
75 result = 1 - (1 - input) * (1 - input);
76 } else {
77 result = 1 - std::pow(1 - input, 2 * factor);
78 }
79 return result;
80 }
81
82 gfx::Transform ComputeTransform(EdgeEffect::Edge edge,
83 gfx::SizeF size, int height) {
84 switch (edge) {
85 default:
86 case EdgeEffect::EDGE_TOP:
87 return gfx::Transform(1, 0, 0, 1, 0, 0);
88 case EdgeEffect::EDGE_LEFT:
89 return gfx::Transform(0, 1, -1, 0,
90 (-size.width() + height) / 2 ,
91 (size.width() - height) / 2);
92 case EdgeEffect::EDGE_BOTTOM:
93 return gfx::Transform(-1, 0, 0, -1, 0, size.height() - height);
94 case EdgeEffect::EDGE_RIGHT:
95 return gfx::Transform(0, -1, 1, 0,
96 (-size.width() - height) / 2 + size.height(),
97 (size.width() - height) / 2);
98 };
99 }
100
101 void DisableLayer(cc::Layer* layer) {
102 DCHECK(layer);
103 layer->SetIsDrawable(false);
104 layer->SetTransform(gfx::Transform());
105 layer->SetOpacity(1.f);
106 }
107
108 void UpdateLayer(cc::Layer* layer,
109 EdgeEffect::Edge edge,
110 gfx::SizeF size,
111 int height,
112 float opacity) {
113 DCHECK(layer);
114 layer->SetIsDrawable(true);
115 layer->SetTransform(ComputeTransform(edge, size, height));
116 layer->SetBounds(gfx::Size(size.width(), height));
117 layer->SetOpacity(Clamp(opacity, 0.f, 1.f));
118 }
119
120 } // namespace
121
122 EdgeEffect::EdgeEffect(scoped_refptr<cc::Layer> edge,
123 scoped_refptr<cc::Layer> glow)
124 : edge_(edge)
125 , glow_(glow)
126 , edge_alpha_(0)
127 , edge_scale_y_(0)
128 , glow_alpha_(0)
129 , glow_scale_y_(0)
130 , edge_alpha_start_(0)
131 , edge_alpha_finish_(0)
132 , edge_scale_y_start_(0)
133 , edge_scale_y_finish_(0)
134 , glow_alpha_start_(0)
135 , glow_alpha_finish_(0)
136 , glow_scale_y_start_(0)
137 , glow_scale_y_finish_(0)
138 , state_(STATE_IDLE)
139 , pull_distance_(0)
140 , dpi_scale_(1) {
141 // Prevent the provided layers from drawing until the effect is activated.
142 DisableLayer(edge_);
143 DisableLayer(glow_);
144
145 dpi_scale_ =
146 gfx::Screen::GetNativeScreen()->GetPrimaryDisplay().device_scale_factor();
147 }
148
149 EdgeEffect::~EdgeEffect() { }
150
151 bool EdgeEffect::IsFinished() const {
152 return state_ == STATE_IDLE;
153 }
154
155 void EdgeEffect::Finish() {
156 DisableLayer(edge_);
157 DisableLayer(glow_);
158 pull_distance_ = 0;
159 state_ = STATE_IDLE;
160 }
161
162 void EdgeEffect::Pull(base::TimeTicks current_time, float delta_distance) {
163 if (state_ == STATE_PULL_DECAY && current_time - start_time_ < duration_) {
164 return;
165 }
166 if (state_ != STATE_PULL) {
167 glow_scale_y_ = kPullGlowBegin;
168 }
169 state_ = STATE_PULL;
170
171 start_time_ = current_time;
172 duration_ = base::TimeDelta::FromMilliseconds(kPullTime);
173
174 delta_distance *= dpi_scale_;
175 float abs_delta_distance = std::abs(delta_distance);
176 pull_distance_ += delta_distance;
177 float distance = std::abs(pull_distance_);
178
179 edge_alpha_ = edge_alpha_start_ = Clamp(distance, kPullEdgeBegin, kMaxAlpha);
180 edge_scale_y_ = edge_scale_y_start_
181 = Clamp(distance * kPullDistanceEdgeFactor, kHeldEdgeScaleY, 1.f);
182
183 glow_alpha_ = glow_alpha_start_ =
184 std::min(kMaxAlpha,
185 glow_alpha_ + abs_delta_distance * kPullDistanceAlphaGlowFactor);
186
187 float glow_change = abs_delta_distance;
188 if (delta_distance > 0 && pull_distance_ < 0)
189 glow_change = -glow_change;
190 if (pull_distance_ == 0)
191 glow_scale_y_ = 0;
192
193 // Do not allow glow to get larger than kMaxGlowHeight.
194 glow_scale_y_ = glow_scale_y_start_ =
195 Clamp(glow_scale_y_ + glow_change * kPullDistanceGlowFactor,
196 0.f, kMaxGlowHeight);
197
198 edge_alpha_finish_ = edge_alpha_;
199 edge_scale_y_finish_ = edge_scale_y_;
200 glow_alpha_finish_ = glow_alpha_;
201 glow_scale_y_finish_ = glow_scale_y_;
202 }
203
204 void EdgeEffect::Release(base::TimeTicks current_time) {
205 pull_distance_ = 0;
206
207 if (state_ != STATE_PULL && state_ != STATE_PULL_DECAY)
208 return;
209
210 state_ = STATE_RECEDE;
211 edge_alpha_start_ = edge_alpha_;
212 edge_scale_y_start_ = edge_scale_y_;
213 glow_alpha_start_ = glow_alpha_;
214 glow_scale_y_start_ = glow_scale_y_;
215
216 edge_alpha_finish_ = 0.f;
217 edge_scale_y_finish_ = 0.f;
218 glow_alpha_finish_ = 0.f;
219 glow_scale_y_finish_ = 0.f;
220
221 start_time_ = current_time;
222 duration_ = base::TimeDelta::FromMilliseconds(kRecedeTime);
223 }
224
225 void EdgeEffect::Absorb(base::TimeTicks current_time, float velocity) {
226 state_ = STATE_ABSORB;
227 velocity = dpi_scale_ * std::max(kMinVelocity, std::abs(velocity));
228
229 start_time_ = current_time;
230 // This should never be less than 1 millisecond.
231 duration_ = base::TimeDelta::FromMilliseconds(0.1f + (velocity * 0.03f));
232
233 // The edge should always be at least partially visible, regardless
234 // of velocity.
235 edge_alpha_start_ = 0.f;
236 edge_scale_y_ = edge_scale_y_start_ = 0.f;
237 // The glow depends more on the velocity, and therefore starts out
238 // nearly invisible.
239 glow_alpha_start_ = 0.5f;
240 glow_scale_y_start_ = 0.f;
241
242 // Factor the velocity by 8. Testing on device shows this works best to
243 // reflect the strength of the user's scrolling.
244 edge_alpha_finish_ = Clamp(velocity * kVelocityEdgeFactor, 0.f, 1.f);
245 // Edge should never get larger than the size of its asset.
246 edge_scale_y_finish_ = Clamp(velocity * kVelocityEdgeFactor,
247 kHeldEdgeScaleY, 1.f);
248
249 // Growth for the size of the glow should be quadratic to properly
250 // respond
251 // to a user's scrolling speed. The faster the scrolling speed, the more
252 // intense the effect should be for both the size and the saturation.
253 glow_scale_y_finish_ =
254 std::min(0.025f + (velocity * (velocity / 100) * 0.00015f), 1.75f);
255 // Alpha should change for the glow as well as size.
256 glow_alpha_finish_ =
257 Clamp(glow_alpha_start_,
258 velocity * kVelocityGlowFactor * .00001f, kMaxAlpha);
259 }
260
261 bool EdgeEffect::Update(base::TimeTicks current_time) {
262 if (IsFinished())
263 return false;
264
265 const double dt = (current_time - start_time_).InMilliseconds();
266 const double t = std::min(dt / duration_.InMilliseconds(), 1.);
267 const float interp = static_cast<float>(Damp(t, 1.));
268
269 edge_alpha_ = Lerp(edge_alpha_start_, edge_alpha_finish_, interp);
270 edge_scale_y_ = Lerp(edge_scale_y_start_, edge_scale_y_finish_, interp);
271 glow_alpha_ = Lerp(glow_alpha_start_, glow_alpha_finish_, interp);
272 glow_scale_y_ = Lerp(glow_scale_y_start_, glow_scale_y_finish_, interp);
273
274 if (t >= 1.f - kEpsilon) {
275 switch (state_) {
276 case STATE_ABSORB:
277 state_ = STATE_RECEDE;
278 start_time_ = current_time;
279 duration_ = base::TimeDelta::FromMilliseconds(kRecedeTime);
280
281 edge_alpha_start_ = edge_alpha_;
282 edge_scale_y_start_ = edge_scale_y_;
283 glow_alpha_start_ = glow_alpha_;
284 glow_scale_y_start_ = glow_scale_y_;
285
286 // After absorb, the glow and edge should fade to nothing.
287 edge_alpha_finish_ = 0.f;
288 edge_scale_y_finish_ = 0.f;
289 glow_alpha_finish_ = 0.f;
290 glow_scale_y_finish_ = 0.f;
291 break;
292 case STATE_PULL:
293 state_ = STATE_PULL_DECAY;
294 start_time_ = current_time;
295 duration_ = base::TimeDelta::FromMilliseconds(kPullDecayTime);
296
297 edge_alpha_start_ = edge_alpha_;
298 edge_scale_y_start_ = edge_scale_y_;
299 glow_alpha_start_ = glow_alpha_;
300 glow_scale_y_start_ = glow_scale_y_;
301
302 // After pull, the glow and edge should fade to nothing.
303 edge_alpha_finish_ = 0.f;
304 edge_scale_y_finish_ = 0.f;
305 glow_alpha_finish_ = 0.f;
306 glow_scale_y_finish_ = 0.f;
307 break;
308 case STATE_PULL_DECAY:
309 {
310 // When receding, we want edge to decrease more slowly
311 // than the glow.
312 float factor = glow_scale_y_finish_ != 0 ?
313 1 / (glow_scale_y_finish_ * glow_scale_y_finish_) :
314 std::numeric_limits<float>::max();
315 edge_scale_y_ = edge_scale_y_start_ +
316 (edge_scale_y_finish_ - edge_scale_y_start_) * interp * factor;
317 state_ = STATE_RECEDE;
318 }
319 break;
320 case STATE_RECEDE:
321 Finish();
322 break;
323 default:
324 break;
325 }
326 }
327
328 if (state_ == STATE_RECEDE && glow_scale_y_ <= 0 && edge_scale_y_ <= 0)
329 Finish();
330
331 return !IsFinished();
332 }
333
334 void EdgeEffect::ApplyToLayers(gfx::SizeF size, Edge edge) {
335 if (IsFinished())
336 return;
337
338 // An empty effect size, while meaningless, is also relatively harmless, and
339 // will simply prevent any drawing of the layers.
340 if (size.IsEmpty()) {
341 DisableLayer(edge_);
342 DisableLayer(glow_);
343 return;
344 }
345
346 float dummy_scale_x, dummy_scale_y;
347
348 // Glow
349 gfx::Size glow_image_bounds;
350 glow_->CalculateContentsScale(1.f, 1.f, 1.f, false,
351 &dummy_scale_x, &dummy_scale_y,
352 &glow_image_bounds);
353 const int glow_height = glow_image_bounds.height();
354 const int glow_bottom = static_cast<int>(std::min(
355 glow_height * glow_scale_y_ * kGlowImageAspectRatioInverse * 0.6f,
356 glow_height * kMaxGlowHeight) * dpi_scale_ + 0.5f);
357 UpdateLayer(glow_, edge, size, glow_bottom, glow_alpha_);
358
359 // Edge
360 gfx::Size edge_image_bounds;
361 edge_->CalculateContentsScale(1.f, 1.f, 1.f, false,
362 &dummy_scale_x, &dummy_scale_y,
363 &edge_image_bounds);
364 const int edge_height = edge_image_bounds.height();
365 const int edge_bottom = static_cast<int>(
366 edge_height * edge_scale_y_ * dpi_scale_);
367 UpdateLayer(edge_, edge, size, edge_bottom, edge_alpha_);
368 }
369
370 } // namespace content
OLDNEW
« no previous file with comments | « content/browser/android/edge_effect.h ('k') | content/browser/android/overscroll_glow.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698