capture_mode: implement animation for countdown UI animation.

Please refer to https://carbon.googleplex.com/cros-ux/pages/screen-capture/motion#647b61a3-343c-448d-8c9b-f289d357c615
for the spec (search for "Screen record countdown").

Not covered in this CL:
- stop-recording shelf item animation

Bug: 1126669
Change-Id: I747f7df5f51677ef263921f5f00aa56f540b023b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2463646Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Xiaoqian Dai <xdai@chromium.org>
Cr-Commit-Position: refs/heads/master@{#818529}

ash/capture_mode/capture_label_view.h

@@ -5,7 +5,10 @@
 #ifndef ASH_CAPTURE_MODE_CAPTURE_LABEL_VIEW_H_
 #define ASH_CAPTURE_MODE_CAPTURE_LABEL_VIEW_H_
 
+#include <vector>
+
 #include "ash/ash_export.h"
+#include "base/memory/weak_ptr.h"
 #include "ui/views/controls/button/button.h"
 #include "ui/views/view.h"
 
@@ -14,6 +17,10 @@ class LabelButton;
 class Label;
 }  // namespace views
 
+namespace ui {
+class CallbackLayerAnimationObserver;
+}
+
 namespace ash {
 
 class CaptureModeSession;
@@ -31,10 +38,6 @@ class ASH_EXPORT CaptureLabelView : public views::View,
   CaptureLabelView& operator=(const CaptureLabelView&) = delete;
   ~CaptureLabelView() override;
 
-  // Function to be called to set a short time interval for countdown in tests
-  // so that we don't have to wait over 3 seconds to start video recording.
-  static void SetUseDelayForTesting(bool use_delay);
-
   // Update icon and text according to current capture source and type.
   void UpdateIconAndText();
 
@@ -57,9 +60,16 @@ class ASH_EXPORT CaptureLabelView : public views::View,
   void ButtonPressed(views::Button* sender, const ui::Event& event) override;
 
  private:
-  static constexpr int kCountDownSeconds = 3;
+  // Start performing countdown to number |timout_count_down_| animation.
+  void ScheduleCountDownAnimation();
+  // Called when each number's countdown animation is completed.
+  bool OnCountDownAnimationCompleted(
+      const ui::CallbackLayerAnimationObserver& observer);
 
-  void CountDown();
+  // Starts the layer animation sequences for the countdown label.
+  void StartLabelLayerAnimationSequences();
+  // Starts the layer animation sequences for the entire widget if applicable.
+  void StartWidgetLayerAnimationSequences();
 
   // The label button that displays an icon and a text message. Can be user
   // interactable. When clicking/tapping on the button, start perform image or
@@ -69,16 +79,18 @@ class ASH_EXPORT CaptureLabelView : public views::View,
   // The label that displays a text message. Not user interactable.
   views::Label* label_ = nullptr;
 
-  // Count down timer.
-  base::RepeatingTimer count_down_timer_;
-  int timeout_count_down_ = kCountDownSeconds;
+  int timeout_count_down_;
 
   // Callback function to be called after countdown if finished.
   base::OnceClosure countdown_finished_callback_;
+  // Observe the countdown animation.
+  std::unique_ptr<ui::CallbackLayerAnimationObserver> animation_observer_;
 
   // Pointer to the current capture mode session. Not nullptr during this
   // lifecycle.
   CaptureModeSession* capture_mode_session_;
+
+  base::WeakPtrFactory<CaptureLabelView> weak_factory_{this};
 };
 
 }  // namespace ash

ash/capture_mode/capture_mode_unittests.cc

@@ -4,7 +4,6 @@
 
 #include <memory>
 
-#include "ash/capture_mode/capture_label_view.h"
 #include "ash/capture_mode/capture_mode_bar_view.h"
 #include "ash/capture_mode/capture_mode_close_button.h"
 #include "ash/capture_mode/capture_mode_controller.h"
@@ -26,6 +25,7 @@
 #include "ash/wm/window_state.h"
 #include "base/run_loop.h"
 #include "base/test/scoped_feature_list.h"
+#include "ui/compositor/scoped_animation_duration_scale_mode.h"
 #include "ui/events/keycodes/keyboard_codes_posix.h"
 #include "ui/events/test/event_generator.h"
 #include "ui/gfx/geometry/insets.h"
@@ -262,6 +262,10 @@ TEST_F(CaptureModeTest, ChangeTypeAndSourceFromUI) {
 }
 
 TEST_F(CaptureModeTest, VideoRecordingUiBehavior) {
+  // We need a non-zero duration to avoid infinite loop on countdown.
+  ui::ScopedAnimationDurationScaleMode animatin_scale(
+      ui::ScopedAnimationDurationScaleMode::NON_ZERO_DURATION);
+
   auto* controller = CaptureModeController::Get();
   // Start Capture Mode in a fullscreen video recording mode.
   controller->SetSource(CaptureModeSource::kFullscreen);
@@ -270,7 +274,6 @@ TEST_F(CaptureModeTest, VideoRecordingUiBehavior) {
   EXPECT_TRUE(controller->IsActive());
   EXPECT_FALSE(controller->is_recording_in_progress());
   EXPECT_FALSE(IsCursorCompositingEnabled());
-  CaptureLabelView::SetUseDelayForTesting(true);
 
   // Hit Enter to begin recording.
   auto* event_generator = GetEventGenerator();

ui/gfx/animation/tween.cc

@@ -42,6 +42,9 @@ double Tween::CalculateValue(Tween::Type type, double state) {
     case EASE_IN_OUT_2:
       return gfx::CubicBezier(0.33, 0, 0.67, 1).Solve(state);
 
+    case EASE_OUT_3:
+      return gfx::CubicBezier(0.6, 0, 0, 1).Solve(state);
+
     case LINEAR:
       return state;
 

ui/gfx/animation/tween.h

@@ -22,18 +22,19 @@ namespace gfx {
 class ANIMATION_EXPORT Tween {
  public:
   enum Type {
-    LINEAR,              // Linear.
-    EASE_OUT,            // Fast in, slow out (default).
-    EASE_OUT_2,          // Variant of EASE_OUT that ends slower than EASE_OUT.
-    EASE_IN,             // Slow in, fast out.
-    EASE_IN_2,           // Variant of EASE_IN that starts out slower than
-                         // EASE_IN.
-    EASE_IN_OUT,         // Slow in and out, fast in the middle.
-    EASE_IN_OUT_2,       // Variant of EASE_IN_OUT that starts and ends slower
-                         // than EASE_IN_OUT.
-    SMOOTH_IN_OUT,       // Smooth, consistent speeds in and out (sine wave).
-    FAST_OUT_SLOW_IN,    // Variant of EASE_IN_OUT which should be used in most
-                         // cases.
+    LINEAR,            // Linear.
+    EASE_OUT,          // Fast in, slow out (default).
+    EASE_OUT_2,        // Variant of EASE_OUT that ends slower than EASE_OUT.
+    EASE_OUT_3,        // Variant of EASE_OUT that ends slower than EASE_OUT_2.
+    EASE_IN,           // Slow in, fast out.
+    EASE_IN_2,         // Variant of EASE_IN that starts out slower than
+                       // EASE_IN.
+    EASE_IN_OUT,       // Slow in and out, fast in the middle.
+    EASE_IN_OUT_2,     // Variant of EASE_IN_OUT that starts and ends slower
+                       // than EASE_IN_OUT.
+    SMOOTH_IN_OUT,     // Smooth, consistent speeds in and out (sine wave).
+    FAST_OUT_SLOW_IN,  // Variant of EASE_IN_OUT which should be used in most
+                       // cases.
     FAST_OUT_SLOW_IN_2,  // Variant of FAST_OUT_SLOW_IN that starts out quicker.
     LINEAR_OUT_SLOW_IN,  // Variant of EASE_OUT which should be used for
                          // fading in from 0% or motion when entering a scene.