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

Unified Diff: chrome/browser/ui/cocoa/toolbar/app_toolbar_button_icon.mm

Issue 2859903003: [Mac] App Menu Animated Icon (Closed)
Patch Set: Clean up Created 3 years, 8 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 side-by-side diff with in-line comments
Download patch
Index: chrome/browser/ui/cocoa/toolbar/app_toolbar_button_icon.mm
diff --git a/chrome/browser/ui/cocoa/toolbar/app_toolbar_button_icon.mm b/chrome/browser/ui/cocoa/toolbar/app_toolbar_button_icon.mm
new file mode 100644
index 0000000000000000000000000000000000000000..15a6fbbde4b3ecd164ff1e2e9f7cbae5413fc6e1
--- /dev/null
+++ b/chrome/browser/ui/cocoa/toolbar/app_toolbar_button_icon.mm
@@ -0,0 +1,180 @@
+// 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? Sh
+// 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());
+}

Powered by Google App Engine
This is Rietveld 408576698