[Views] App Menu Animated Icon

chrome/browser/ui/views/toolbar/app_menu_animation.cc

+// Copyright 2017 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 "chrome/browser/ui/views/toolbar/app_menu_animation.h"
+
+#include "cc/paint/paint_flags.h"
+#include "chrome/browser/ui/views/toolbar/app_menu_button.h"
+#include "ui/gfx/animation/tween.h"
+#include "ui/gfx/canvas.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/gfx/color_utils.h"
+#include "ui/gfx/skia_util.h"
+
+namespace {
+
+// Duration of the open and close animations in ms.
+constexpr float kOpenDuration = 733.0f;
+constexpr float kCloseDuration = 283.0f;
+
+// Duration of the color animation in ms.
+constexpr float kColorDurationMs = 100.0f;
+
+// The % the top and bottom dots need to be offset from the middle.
+constexpr float kDotYOffset = 0.32f;
+
+// Value of the stroke when the icon is opened or closed.
+constexpr float kCloseStroke = 0.204f;
+constexpr float kOpenStroke = 0.136f;
+
+// Value of the width when the animation is fully opened.
+constexpr float kOpenWidth = 0.52f;
+
+// The delay of the color and dot animations in ms.
+constexpr float kColorDelayMs = 33.33f;
+constexpr float kDotDelayMs = 66.67f;
+
+// The % of time it takes for each dot to animate to its full width.
+constexpr float kTopWidthOpenInterval = 533.3f / kOpenDuration;
+constexpr float kMiddleWidthOpenInterval = 383.3f / kOpenDuration;
+constexpr float kBottomWidthOpenInterval = 400.0f / kOpenDuration;
+
+// The % of time it takes for each dot to animate to its final stroke.
+constexpr float kTopStrokeOpenInterval = 400.0f / kOpenDuration;
+constexpr float kMiddleStrokeOpenInterval = 283.3f / kOpenDuration;
+constexpr float kBottomStrokeOpenInterval = 266.7f / kOpenDuration;
+
+// The % of time it takes for each dot to animate its width and stroke.
+constexpr float kWidthStrokeCloseInterval = 150.0f / kCloseDuration;
+
+}  // namespace
+
+AppMenuAnimation::AppMenuDot::AppMenuDot(float delay,

[sky, 2017/04/11 20:52:00]

Use TimeDelta

[spqchan, 2017/04/12 19:42:10]

Done.

+                                         float width_open_interval,
+                                         float stroke_open_interval)
+    : delay_(delay),
+      width_open_interval_(width_open_interval),
+      stroke_open_interval_(stroke_open_interval) {}
+
+void AppMenuAnimation::AppMenuDot::Paint(gfx::PointF center_point,

[sky, 2017/04/11 20:52:00]

const &

[spqchan, 2017/04/12 19:42:10]

Done.

+                                         SkColor start_color,
+                                         SkColor severity_color,
+                                         gfx::Canvas* canvas,
+                                         const gfx::Rect& bounds,
+                                         gfx::SlideAnimation* animation) {

[sky, 2017/04/11 20:52:00]

const gfx::SlideAnimation* if possible.

[spqchan, 2017/04/12 19:42:10]

Done.

+  bool is_opening = animation->IsShowing();
+  float total_duration = is_opening ? kOpenDuration : kCloseDuration;
+  float width_duration =
+      is_opening ? width_open_interval_ : kWidthStrokeCloseInterval;
+  float stroke_duration =
+      is_opening ? stroke_open_interval_ : kWidthStrokeCloseInterval;
+
+  // Reverse the delay if the animation is closing.
+  float delay = is_opening ? delay_ : (kDotDelayMs * 2 - delay_);
+  float progress = animation->GetCurrentValue() - (delay / total_duration);
+
+  float width_progress = 0.0;
+  float stroke_progress = 0.0;
+  float color_progress = 0.0;
+
+  if (progress > 0) {
+    width_progress = std::min(1.0f, progress / width_duration);
+    stroke_progress = std::min(1.0f, progress / stroke_duration);
+
+    if (is_opening) {
+      float color_delay = kColorDelayMs / total_duration;
+      float color_duration = kColorDurationMs / total_duration;
+      if (progress > color_delay) {
+        color_progress =
+            std::min(1.0f, (progress - color_delay) / color_duration);
+      }
+    }
+  }
+
+  float dot_height =
+      gfx::Tween::FloatValueBetween(stroke_progress, kCloseStroke, kOpenStroke);
+  dot_height *= bounds.height();
+
+  float dot_width =
+      gfx::Tween::FloatValueBetween(width_progress, kCloseStroke, kOpenWidth);
+  dot_width *= bounds.width();
+
+  gfx::PointF point = center_point;
+  point.Offset(-dot_width / 2, -dot_height / 2);
+
+  SkColor color = is_opening ? gfx::Tween::ColorValueBetween(
+                                   color_progress, start_color, severity_color)
+                             : severity_color;
+
+  cc::PaintFlags flags;
+  flags.setColor(color);
+  flags.setStrokeWidth(bounds.height() * kCloseStroke);
+  flags.setStrokeCap(cc::PaintFlags::kRound_Cap);
+  flags.setStyle(cc::PaintFlags::kFill_Style);
+  flags.setAntiAlias(true);
+
+  gfx::SizeF dot_size = gfx::SizeF(dot_width, dot_height);
+  canvas->DrawRoundRect(gfx::RectF(point, dot_size), 2.0, flags);
+}
+
+AppMenuAnimation::AppMenuAnimation(AppMenuButton* owner,
+                                   bool should_animation_close)
+    : owner_(owner),
+      should_animation_close_(should_animation_close),
+      animation_(this),
+      bottom_dot_(0, kBottomWidthOpenInterval, kBottomStrokeOpenInterval),
+      middle_dot_(kDotDelayMs,
+                  kMiddleWidthOpenInterval,
+                  kMiddleStrokeOpenInterval),
+      top_dot_(kDotDelayMs * 2, kTopWidthOpenInterval, kTopStrokeOpenInterval),
+      start_color_(gfx::kPlaceholderColor),

[sky, 2017/04/11 20:52:00]

Can the real colors be passed in rather than set later on?

[spqchan, 2017/04/12 19:42:10]

No, the severity levels aren't set until after the app menu button is created.

+      severity_color_(gfx::kPlaceholderColor) {
+  animation_.SetSlideDuration(kOpenDuration);
+  animation_.SetTweenType(gfx::Tween::FAST_OUT_SLOW_IN);
+}
+
+void AppMenuAnimation::PaintAppMenu(gfx::Canvas* canvas,
+                                    const gfx::Rect& bounds) {
+  gfx::PointF middle_point = gfx::PointF(bounds.CenterPoint());
+  float y_offset = kDotYOffset * bounds.height();
+  gfx::PointF top_point = middle_point;
+  top_point.Offset(0, -y_offset);
+
+  gfx::PointF bottom_point = middle_point;
+  bottom_point.Offset(0, y_offset);
+
+  middle_dot_.Paint(middle_point, start_color_, severity_color_, canvas, bounds,
+                    &animation_);
+  top_dot_.Paint(top_point, start_color_, severity_color_, canvas, bounds,
+                 &animation_);
+  bottom_dot_.Paint(bottom_point, start_color_, severity_color_, canvas, bounds,
+                    &animation_);
+}
+
+void AppMenuAnimation::UpdateIconColor(SkColor start_color,
+                                       SkColor severity_color) {
+  start_color_ = start_color;
+  severity_color_ = severity_color;
+}
+
+void AppMenuAnimation::StartAnimation() {
+  if (!animation_.is_animating()) {
+    animation_.SetSlideDuration(kOpenDuration);
+    animation_.Show();
+  }
+}
+
+void AppMenuAnimation::AnimationEnded(const gfx::Animation* animation) {
+  if (should_animation_close_ && animation_.IsShowing()) {
+    animation_.SetSlideDuration(kCloseDuration);
+    animation_.Hide();
+  }
+
+  if (!animation_.IsShowing())
+    start_color_ = severity_color_;
+}
+
+void AppMenuAnimation::AnimationProgressed(const gfx::Animation* animation) {
+  owner_->SchedulePaint();
+}