[Mac] App Menu Animated Icon

chrome/browser/ui/cocoa/toolbar/app_toolbar_button_icon.mm

+// Copyright 2017 The Chromium Authors. All rights reserved.

[Robert Sesek, 2017/05/03 22:44:29]

Are other platforms going to use the same spec? Should this code be shared (%
the Cocoa bits)?

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "chrome/browser/ui/cocoa/toolbar/app_toolbar_button_icon.h"
+
+#include "base/memory/ptr_util.h"
+#import "chrome/browser/ui/cocoa/toolbar/app_toolbar_button.h"
+#include "skia/ext/skia_utils_mac.h"
+#include "ui/gfx/animation/slide_animation.h"
+#include "ui/gfx/animation/tween.h"
+
+namespace {
+
+// Duration of the open and close animations in ms.
+constexpr float kOpenDurationMs = 733.0f;
+constexpr float kCloseDurationMs = 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 / kOpenDurationMs;
+constexpr float kMiddleWidthOpenInterval = 383.3f / kOpenDurationMs;
+constexpr float kBottomWidthOpenInterval = 400.0f / kOpenDurationMs;
+
+// The % of time it takes for each dot to animate to its final stroke.
+constexpr float kTopStrokeOpenInterval = 400.0f / kOpenDurationMs;
+constexpr float kMiddleStrokeOpenInterval = 283.3f / kOpenDurationMs;
+constexpr float kBottomStrokeOpenInterval = 266.7f / kOpenDurationMs;
+
+// The % of time it takes for each dot to animate its width and stroke
+// when the animation closes.
+constexpr float kWidthStrokeCloseInterval = 150.0f / kCloseDurationMs;
+
+// The radius of each dot.
+constexpr float kDotRadius = 8.0f;
+
+// The size of the icon.
+constexpr float kIconSize = 16.0f;
+
+}  // namespace
+
+AppMenuDot::AppMenuDot(base::TimeDelta delay,
+                       float width_open_interval,
+                       float stroke_open_interval)
+    : delay_(delay),
+      width_open_interval_(width_open_interval),
+      stroke_open_interval_(stroke_open_interval) {}
+
+void AppMenuDot::DrawDot(NSPoint center_pt,
+                         NSSize imageSize,
+                         SkColor start_color,
+                         SkColor target_color,
+                         const gfx::SlideAnimation* animation) {
+  bool is_opening = animation->IsShowing();
+  float total_duration = is_opening ? kOpenDurationMs : kCloseDurationMs;
+  float width_duration =
+      is_opening ? width_open_interval_ : kWidthStrokeCloseInterval;
+  float stroke_duration =
+      is_opening ? stroke_open_interval_ : kWidthStrokeCloseInterval;
+
+  // When the animation is closing, each dot uses the remainder of the full
+  // delay period (2 * kDotDelayMs). The results should be (0->2x, 1x->1x,
+  // 2x->0).
+  base::TimeDelta delay =
+      is_opening ? delay_
+                 : base::TimeDelta::FromMilliseconds(kDotDelayMs * 2) - delay_;
+  float progress =
+      animation->GetCurrentValue() - (delay.InMillisecondsF() / 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_interval = kColorDelayMs / total_duration;
+      float color_duration_interval = kColorDurationMs / total_duration;
+      if (progress > color_delay_interval) {
+        color_progress = std::min(
+            1.0f, (progress - color_delay_interval) / color_duration_interval);
+      }
+    }
+  }
+
+  float dot_height =
+      gfx::Tween::FloatValueBetween(stroke_progress, kCloseStroke, kOpenStroke);
+  dot_height *= imageSize.height;
+
+  float dot_width =
+      gfx::Tween::FloatValueBetween(width_progress, kCloseStroke, kOpenWidth);
+  dot_width *= imageSize.width;
+
+  SkColor color = is_opening ? gfx::Tween::ColorValueBetween(
+                                   color_progress, start_color, target_color)
+                             : target_color;
+
+  NSRect rect =
+      NSMakeRect(center_pt.x - dot_width / 2.0f,
+                 center_pt.y - dot_height / 2.0f, dot_width, dot_height);
+
+  [skia::SkColorToSRGBNSColor(color) set];
+  [[NSBezierPath bezierPathWithRoundedRect:rect
+                                   xRadius:kDotRadius
+                                   yRadius:kDotRadius] fill];
+}
+
+AppToolbarButtonIcon::AppToolbarButtonIcon(AppToolbarButton* owner,
+                                           SkColor start_color)
+    : animation_(base::MakeUnique<gfx::SlideAnimation>(this)),
+      bottom_dot_(base::TimeDelta(),
+                  kBottomWidthOpenInterval,
+                  kBottomStrokeOpenInterval),
+      center_dot_(base::TimeDelta::FromMilliseconds(kDotDelayMs),
+                  kMiddleWidthOpenInterval,
+                  kMiddleStrokeOpenInterval),
+      top_dot_(base::TimeDelta::FromMilliseconds(kDotDelayMs * 2),
+               kTopWidthOpenInterval,
+               kTopStrokeOpenInterval),
+      start_color_(start_color),
+      target_color_(start_color),
+      owner_(owner) {
+  DCHECK(owner_);
+}
+
+AppToolbarButtonIcon::~AppToolbarButtonIcon() {}
+
+void AppToolbarButtonIcon::StartAnimation() {
+  if (!animation_->is_animating()) {
+    animation_->SetSlideDuration(kOpenDurationMs);
+    animation_->Show();
+  }
+}
+
+void AppToolbarButtonIcon::AnimationEnded(const gfx::Animation* animation) {
+  if (animation_->IsShowing()) {
+    animation_->SetSlideDuration(kCloseDurationMs);
+    animation_->Hide();
+  } else {
+    start_color_ = target_color_;
+  }
+}
+
+void AppToolbarButtonIcon::AnimationProgressed(
+    const gfx::Animation* animation) {
+  [owner_ setNeedsDisplay:YES];
+}
+
+void AppToolbarButtonIcon::DrawIcon(NSRect frame) {
+  NSSize size = NSMakeSize(kIconSize, kIconSize);
+  NSPoint center_pt =
+      NSMakePoint(NSWidth(frame) / 2.0f, NSHeight(frame) / 2.0f);
+
+  float y_offset = kDotYOffset * size.height;
+
+  center_dot_.DrawDot(center_pt, size, start_color_, target_color_,
+                      animation_.get());
+  top_dot_.DrawDot(NSMakePoint(center_pt.x, center_pt.y - y_offset), size,
+                   start_color_, target_color_, animation_.get());
+  bottom_dot_.DrawDot(NSMakePoint(center_pt.x, center_pt.y + y_offset), size,
+                      start_color_, target_color_, animation_.get());
+}