Add an animation to pane entrance/exit

doc/cascadia/profiles.schema.json

@@ -510,6 +510,11 @@
           "description": "When set to `true`, the color and font formatting of selected text is also copied to your clipboard. When set to `false`, only plain text is copied to your clipboard. An array of specific formats can also be used. Supported array values include `html` and `rtf`. Plain text is always copied.",
           "$ref": "#/definitions/CopyFormat"
         },
+        "disableAnimations": {
+          "default": false,
+          "description": "When set to `true`, visual animations will be disabled across the application.",
+          "type": "boolean"
+        },
         "largePasteWarning": {
           "default": true,
           "description": "When set to true, trying to paste text with more than 5 KiB of characters will display a warning asking you whether to continue or not with the paste.",

src/cascadia/TerminalApp/GlobalAppSettings.cpp

@@ -36,6 +36,7 @@ static constexpr std::string_view ConfirmCloseAllKey{ "confirmCloseAllTabs" };
 static constexpr std::string_view SnapToGridOnResizeKey{ "snapToGridOnResize" };
 static constexpr std::string_view EnableStartupTaskKey{ "startOnUserLogin" };
 static constexpr std::string_view AlwaysOnTopKey{ "alwaysOnTop" };
+static constexpr std::string_view DisableAnimationsKey{ "disableAnimations" };
 
 static constexpr std::string_view DebugFeaturesKey{ "debugFeatures" };
 
@@ -180,6 +181,8 @@ void GlobalAppSettings::LayerJson(const Json::Value& json)
 
     JsonUtils::GetValueForKey(json, AlwaysOnTopKey, _AlwaysOnTop);
 
+    JsonUtils::GetValueForKey(json, DisableAnimationsKey, _DisableAnimations);
+
     // This is a helper lambda to get the keybindings and commands out of both
     // and array of objects. We'll use this twice, once on the legacy
     // `keybindings` key, and again on the newer `bindings` key.

src/cascadia/TerminalApp/GlobalAppSettings.h

@@ -82,6 +82,7 @@ class TerminalApp::GlobalAppSettings final
     GETSET_PROPERTY(bool, DebugFeaturesEnabled); // default value set in constructor
     GETSET_PROPERTY(bool, StartOnUserLogin, false);
     GETSET_PROPERTY(bool, AlwaysOnTop, false);
+    GETSET_PROPERTY(bool, DisableAnimations, false);
 
 private:
     std::optional<std::wstring> _unparsedDefaultProfile;

src/cascadia/TerminalApp/Pane.cpp

@@ -42,6 +42,10 @@ Pane::Pane(const GUID& profile, const TermControl& control, const bool lastFocus
         _SetupResources();
     }
 
+    // Use the unfocused border color as the pane background, so an actual color
+    // appears behind panes as we animate them sliding in.
+    _root.Background(s_unfocusedBorderBrush);
+
     // Register an event with the control to have it inform us when it gains focus.
     _gotFocusRevoker = control.GotFocus(winrt::auto_revoke, { this, &Pane::_ControlGotFocusHandler });
 
@@ -903,6 +907,143 @@ void Pane::_ApplySplitDefinitions()
     }
 }
 
+// Method Description:
+// - Create a pair of animations when a new control enters this pane. This
+//   should _ONLY_ be called in _Split, AFTER the first and second child panes
+//   have been set up.
+void Pane::_SetupEntranceAnimation()
+{
+    const bool splitWidth = _splitState == SplitState::Vertical;
+    const auto totalSize = splitWidth ? _root.ActualWidth() : _root.ActualHeight();
+    // If we don't have a size yet, it's likely that we're in startup, or we're
+    // being executed as a sequence of actions. In that case, just skip the
+    // animation.
+    if (totalSize <= 0)
+    {
+        return;
+    }
+
+    const auto [firstSize, secondSize] = _CalcChildrenSizes(::base::saturated_cast<float>(totalSize));
+
+    // WARNING: Don't do this! This won't work
+    // Duration duration{ std::chrono::milliseconds{ 200 } };
+    // Instead, make a duration from a TimeSpan from the time in millis
+    //
+    // 100ms was chosen because it's quick enough that it doesn't break your
+    // flow, but not too quick to see
+    Duration duration = DurationHelper::FromTimeSpan(winrt::Windows::Foundation::TimeSpan(std::chrono::milliseconds(200)));
+
+    // This is safe to capture this, because it's only being called in the
+    // context of this method (not on another thread)
+    auto setupAnimation = [&](const auto& size, const bool isFirstChild) {
+        auto child = isFirstChild ? _firstChild : _secondChild;
+        auto childGrid = child->_root;
+        auto control = child->_control;
+        // Build up our animation:
+        // * it'll take as long as our duration (200ms)
+        // * it'll change the value of our property from 0 to secondSize
+        // * it'll animate that value using a quadratic function (like f(t) = t^2)
+        // * IMPORTANT! We'll manually tell the animation that "yes we know what
+        //   we're doing, we want an animation here."
+        Media::Animation::DoubleAnimation animation{};
+        animation.Duration(duration);
+        if (isFirstChild)
+        {
+            // If we're animating the first pane, the size should decrease, form the
+            // full size down to the given size.
+            animation.From(totalSize);
+            animation.To(size);
+        }
+        else
+        {
+            // Otherwise, we want to show the pane getting larger, so animate
+            // from 0 to the requested size.
+            animation.From(0.0);
+            animation.To(size);
+        }
+        animation.EasingFunction(Media::Animation::QuadraticEase{});
+        animation.EnableDependentAnimation(true);
+
+        // Now we're going to set up the Storyboard. This is a unit that uses the
+        // Animation from above, and actually applies it to a property.
+        // * we'll set it up for the same duration as the animation we have
+        // * Apply the animation to the grid of the new pane we're adding to the tree.
+        // * apply the animation to the Width or Height property.
+        Media::Animation::Storyboard s;
+        s.Duration(duration);
+        s.Children().Append(animation);
+        s.SetTarget(animation, childGrid);
+        s.SetTargetProperty(animation, splitWidth ? L"Width" : L"Height");
+
+        // BE TRICKY:
+        // We're animating the width or height of our child pane's grid.
+        //
+        // We DON'T want to change the size of the control itself, because the
+        // terminal has to reflow the buffer every time the control changes size. So
+        // what we're going to do there is manually set the control's size to how
+        // big we _actually know_ the control will be.
+        //
+        // We're also going to be changing alignment of our child pane and the
+        // control. This way, we'll be able to have the control stick to the inside
+        // of the child pane's grid (the side that's moving), while we also have the
+        // pane's grid stick to "outside" of the grid (the side that's not moving)
+        if (splitWidth)
+        {
+            // If we're animating the first child, then stick to the top/left of
+            // the parent pane, otherwise use the bottom/right. This is always
+            // the "outside" of the parent pane.
+            childGrid.HorizontalAlignment(isFirstChild ? HorizontalAlignment::Left : HorizontalAlignment::Right);
+            control.HorizontalAlignment(HorizontalAlignment::Left);
+            control.Width(isFirstChild ? totalSize : size);
+        }
+        else
+        {
+            // If we're animating the first child, then stick to the top/left of
+            // the parent pane, otherwise use the bottom/right. This is always
+            // the "outside" of the parent pane.
+            childGrid.VerticalAlignment(isFirstChild ? VerticalAlignment::Top : VerticalAlignment::Bottom);
+            control.VerticalAlignment(VerticalAlignment::Top);
+            control.Height(isFirstChild ? totalSize : size);
+        }
+
+        // Start the animation.
+        s.Begin();
+
+        std::weak_ptr<Pane> weakThis{ shared_from_this() };
+        // When the animation is completed, undo the trickiness from before, to
+        // restore the controls to the behavior they'd usually have.
+        animation.Completed([weakThis, isFirstChild, splitWidth](auto&&, auto&&) {
+            if (auto pane{ weakThis.lock() })
+            {
+                auto child = isFirstChild ? pane->_firstChild : pane->_secondChild;
+                auto childGrid = child->_root;
+                if (auto control = child->_control)
+                {
+                    if (splitWidth)
+                    {
+                        control.Width(NAN);
+                        childGrid.Width(NAN);
+                        childGrid.HorizontalAlignment(HorizontalAlignment::Stretch);
+                        control.HorizontalAlignment(HorizontalAlignment::Stretch);
+                    }
+                    else
+                    {
+                        control.Height(NAN);
+                        childGrid.Height(NAN);
+                        childGrid.VerticalAlignment(VerticalAlignment::Stretch);
+                        control.VerticalAlignment(VerticalAlignment::Stretch);
+                    }
+                }
+            }
+        });
+    };
+
+    // TODO: GH#7365 - animating the first child right now doesn't _really_ do
+    // anything. We could do better though.
+    setupAnimation(firstSize, true);
+    setupAnimation(secondSize, false);
+}
+
 // Method Description:
 // - Determines whether the pane can be split
 // Arguments:
@@ -1177,6 +1318,8 @@ std::pair<std::shared_ptr<Pane>, std::shared_ptr<Pane>> Pane::_Split(SplitState
 
     _lastActive = false;
 
+    _SetupEntranceAnimation();
+
     return { _firstChild, _secondChild };
 }
 

src/cascadia/TerminalApp/Pane.h

@@ -119,6 +119,7 @@ class Pane : public std::enable_shared_from_this<Pane>
 
     void _CreateRowColDefinitions();
     void _ApplySplitDefinitions();
+    void _SetupEntranceAnimation();
     void _UpdateBorders();
 
     bool _Resize(const winrt::TerminalApp::Direction& direction);

src/cascadia/TerminalApp/TerminalPage.cpp

@@ -2041,6 +2041,11 @@ namespace winrt::TerminalApp::implementation
         // the alwaysOnTop setting will be lost.
         _isAlwaysOnTop = _settings->GlobalSettings().AlwaysOnTop();
         _alwaysOnTopChangedHandlers(*this, nullptr);
+
+        // Settings AllowDependentAnimations will affect whether animations are
+        // enabled application-wide, so we don't need to check it each time we
+        // want to create an animation.
+        WUX::Media::Animation::Timeline::AllowDependentAnimations(!_settings->GlobalSettings().DisableAnimations());
     }
 
     // This is a helper to aid in sorting commands by their `Name`s, alphabetically.

src/cascadia/TerminalApp/defaults.json

@@ -24,6 +24,7 @@
     "startOnUserLogin":  false,
     "theme": "system",
     "snapToGridOnResize": true,
+    "disableAnimations": false,
 
     "profiles":
     [

src/cascadia/TerminalApp/pch.h

@@ -37,6 +37,7 @@
 #include <winrt/Windows.UI.Xaml.Controls.Primitives.h>
 #include <winrt/Windows.UI.Xaml.Data.h>
 #include <winrt/Windows.ui.xaml.media.h>
+#include <winrt/Windows.UI.Xaml.Media.Animation.h>
 #include <winrt/Windows.ui.xaml.input.h>
 #include <winrt/Windows.UI.Xaml.Hosting.h>
 #include "winrt/Windows.UI.Xaml.Markup.h"