Issue metadata
Sign in to add a comment
|
Improve enter/exit tab switcher transition |
||||||||||||||||||||||
Issue description## Reference videos: https://07351807934332135430.googlegroups.com/attach/1b6edb51344e4/TabGrid_BehindBar.mp4?part=0.1&view=1&vt=ANaJVrFtFeevha7X0N_ft9Ww8J28ZF5ivo4E6uW5yoR-sbjaxdImVkKprKJ5LZpxZlrNiosy5KCaWW3fina2Lq5_ez-c7zFITaYU2_G263gF7nGtPmPug5E https://07351807934332135430.googlegroups.com/attach/1b6edb51344e4/TabGrid_Zoom.mp4?part=0.2&view=1&vt=ANaJVrHr9WdMh8o7YLNZbq-BIMrcwplvWSo4nsmmw3JfD8KzMzBWBeJsTmNbEM97vIbK93kBnFkVnLibhHMvwsE5b9BwmKWLp4M0nF1734F9m4ZpvV1wFQI --- ## Specs from Martijn's email to me: A. Zoom in when active Tab is inside of view Thumbnail Pressed (mask) { Width to 375 - 300 ms Height to 812 - 300 ms } Thumbnail Pressed Header { Opacity to 0 - 70 ms Width to 375 - 300 ms Height to 812 - 300 ms X to 0 - 300ms Y to 0 - 300ms } Thumbnails not Pressed { Scale to 0.95 - 300 ms Opacity to 0 - 200 ms } Bottom toolbar { Opacity to 0 - 200 ms } Top toolbar { Opacity to 0 - 200ms } B. Zoom out when active Tab is inside of view Thumbnail (mask) { Width to 168 - 300 ms Height to 202 - 300 ms } Thumbnail Header { Opacity to 100% - 150 ms (Delay 200 ms) Width to 168 - 300 ms Height to 32 - 300 ms } Thumbnails not Zoomed Out { Scale to 1 - 500 ms Opacity to 1 - 300 ms (Delay 60 ms) } Bottom toolbar { Opacity to 100% - 300 ms } Top toolbar { Opacity to 100% - 300ms } C. Zoom in tab with overlapping top toolbar (see video) Toolbar top { Y to -25 - 300 ms Opacity to 0 - 300 ms } Statusbar { Y to -7 - 300 ms Opacity to 0 - 300ms } Thumbnail Pressed (mask) { Width to 375 - 300 ms Height to 812 - 300 ms } Thumbnail Pressed Header { Opacity to 0 - 70 ms Width to 375 - 300 ms Height to 812 - 300 ms X to 0 - 300ms Y to 0 - 300ms } Thumbnails not Pressed { Scale to 0.95 - 300 ms Opacity to 0 - 200 ms } Bottom toolbar { Opacity to 0 - 200 ms } Top toolbar { Opacity to 0 - 200ms } D. Zoom out to tab with overlapping top toolbar Toolbar top { Y to 0 - 300 ms Opacity to 0 - 50 ms } Statusbar { Y to 18 (default Statusbar position) - 300 ms Opacity to 100% - 300 ms } Thumbnail (mask) { Width to 168 - 300 ms Height to 202 - 300 ms } Thumbnail Header { Opacity to 100% - 150 ms (Delay 200 ms) Width to 168 - 300 ms Height to 32 - 300 ms } Thumbnails not Zoomed Out { Scale to 1 - 500 ms Opacity to 1 - 300 ms (Delay 60 ms) } Bottom toolbar { Opacity to 100% - 300 ms } Top toolbar { Opacity to 100% - 300ms } --- Regarding the pseudo-programmatic animation DSL above, Martijn made it up :) I just thought that was neat.
,
Jun 12 2018
As discussed with @pschaffner offline: Everthing specced here should be a guide for other animations: - Open new tab from tab switcher - Selecting an already openend tab - Pressing DONE from the tab switcher.
,
Jun 12 2018
,
Jun 13 2018
Issue 851964 has been merged into this issue.
,
Jun 13 2018
Issue 820410 has been merged into this issue. Issue 823568 has been merged into this issue. Issue 825902 has been merged into this issue.
,
Jun 13 2018
,
Jun 13 2018
,
Jun 26 2018
,
Jun 27 2018
,
Jul 4
The NextAction date has arrived: 2018-07-04
,
Jul 4
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/f0479032fee8b7eeb32b111f438554315c1ae602 commit f0479032fee8b7eeb32b111f438554315c1ae602 Author: Mark Cogan <marq@google.com> Date: Wed Jul 04 16:05:03 2018 [iOS] Revamp tab grid transition animations. Video of updated animations: https://drive.google.com/file/d/1ihIjMdIJaYjke9l8nb-2dHL_e4iMc8vk/view?usp=sharing This CL updates the transition animations to and from the tab grid as described in the referenced bug. Instead of the entire grid zooming in and out, the updated transition only zooms the active tab/cell, keeping other animations in the grid more subtle. To support the updated animations, the GridTransitionLayout and GridTransitionItem classes have some new properties (and GridCell has some additions to support them): - GridTransitioLayout now has an expandedRect property which defines the rect that the selected tab should occupy when expanded. - GridTransitioLayout now has a selectionItem property to define an item that show the selection state of the selected tab/cell while being separate from the selectedItem itself. This allows the selection ring to be animated (or not) independently of the selected item. - GridSelectionItem defines an auxillaryView (a subview of the item's |cell|) that may be animated; GridCell esposes its top bar for this purpose. The animations performed by GridTransitionAnimation are changed to use UIViewPropertyAnimators. This requires significant changes inside that class, but it also simplifies some parts of its API: - The property animator(s) used by GridTransitionAnimation are exposed as a single |animator| property; internally it's a PropertyAnimatorGroup, but it's exposed as an id<UIViewImplicitlyAnimating>, which is sufficient for animations to be run. - There is no longer a GridTransitionAnimationDelegate. Completion handlers may be added to the animator property by interested party. - Duration is set on the GridTransitionAnimation when it's initialized, not when it's animated. - Partial animations (that is, property animations that are either delayed relative to the whole animation, or which run for a shorter duration than the whole animation) are build using keyframe animations, as recommended by Apple. Since this involves triple-nesting blocks, a helper method is added to GridTransitionAnimation for this; it may be cleaner in the long term to add this to PropertyAnimatorGroup. - The TabGridViewController no longer applies a translation to its toolbars as it appears/disappears; instead it fades the toolbars in and out. - The GridToVisibleTab and TabToGrid animators use the BVC's named content area guide to determine the expandedRect of the animation; assuming the snapshots are all up to date, this will be a pixel-perfect match. - The GridToVisibleTab and TabToGrid animators (for now) don't animate the BVC in/out at all; it simply appears (or disappears) at the end (or beginning) of the animation. See the follow-up steps section, below, for more information. Other small changes: - Makes the grid cell contents background the same as the cell header background so it looks correct when the cell header is faded out in animations. - Removes all reference to the "regular" and "expanded" tab grids, since that's no longer a meaningful distinction. - Tightens up and clarifies (hopefully) the comments describing all of the parts of the animations. Follow-Up Steps: The major piece of follow-up for this CL is to have the BVC's contents animate alongside this transition so that the toolbars can be faded out and there can be a cross-fade to the web contents (which makes it cleaner when the snapshot doesn't match the final web content). Bug: 850507 Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet Change-Id: I14dd4aa97bec4e42ddff4ae903d6c4ce0931650b Reviewed-on: https://chromium-review.googlesource.com/1118547 Commit-Queue: Mark Cogan <marq@chromium.org> Reviewed-by: edchin <edchin@chromium.org> Cr-Commit-Position: refs/heads/master@{#572595} [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/grid/grid_cell.h [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/grid/grid_cell.mm [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/grid/grid_view_controller.mm [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/tab_grid_view_controller.mm [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/transitions/BUILD.gn [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/transitions/grid_to_visible_tab_animator.mm [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_animation.h [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_animation.mm [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_layout.h [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_layout.mm [modify] https://crrev.com/f0479032fee8b7eeb32b111f438554315c1ae602/ios/chrome/browser/ui/tab_grid/transitions/tab_to_grid_animator.mm
,
Jul 10
,
Jul 16
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/97f68bf94d38477c41740395a7be86063a2f8c5c commit 97f68bf94d38477c41740395a7be86063a2f8c5c Author: Mark Cogan <marq@google.com> Date: Mon Jul 16 10:13:26 2018 [iOS] Clean up tab grid transition API In preparation for further fine-tuning, this CL cleans up some of the API and implementation details of the tab grid transition animations. - The transition layout and transition animations no longer assume (or depend on) the cells being actual UICollectionViewCells. And, since they now can be, the non-active grid cells in the animation are just UIView snapshots. - The interface into specific subviews and properties needed for animating the active cell is now defined in a protocol. - GridCell now has two subclasses for the specialized cells used in the transitions; one which just shows the selection ring, and once which can transition from 'cell' to 'tab' appearance. Bug: 850507 Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet Change-Id: I7fabc2ab5c522573727b40116789b3080a15a515 Reviewed-on: https://chromium-review.googlesource.com/1135135 Reviewed-by: edchin <edchin@chromium.org> Commit-Queue: Mark Cogan <marq@chromium.org> Cr-Commit-Position: refs/heads/master@{#575215} [modify] https://crrev.com/97f68bf94d38477c41740395a7be86063a2f8c5c/ios/chrome/browser/ui/tab_grid/grid/grid_cell.h [modify] https://crrev.com/97f68bf94d38477c41740395a7be86063a2f8c5c/ios/chrome/browser/ui/tab_grid/grid/grid_cell.mm [modify] https://crrev.com/97f68bf94d38477c41740395a7be86063a2f8c5c/ios/chrome/browser/ui/tab_grid/grid/grid_view_controller.mm [modify] https://crrev.com/97f68bf94d38477c41740395a7be86063a2f8c5c/ios/chrome/browser/ui/tab_grid/transitions/BUILD.gn [add] https://crrev.com/97f68bf94d38477c41740395a7be86063a2f8c5c/ios/chrome/browser/ui/tab_grid/transitions/grid_to_tab_transition_view.h [modify] https://crrev.com/97f68bf94d38477c41740395a7be86063a2f8c5c/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_animation.mm [modify] https://crrev.com/97f68bf94d38477c41740395a7be86063a2f8c5c/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_layout.h [modify] https://crrev.com/97f68bf94d38477c41740395a7be86063a2f8c5c/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_layout.mm
,
Jul 16
Issue 862743 has been merged into this issue.
,
Jul 17
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/602d2720f0c353b05c3f6615b3e78ea1bd5d7255 commit 602d2720f0c353b05c3f6615b3e78ea1bd5d7255 Author: Mark Cogan <marq@google.com> Date: Tue Jul 17 09:19:11 2018 [iOS] Merge tab grid transitions with tab views. This CL updates the tab grid transitions to cleanly match the presented tab views. The basic abstraction for this transition is the GridToTabTransitionView protocol which defines a set of 'cell' and 'tab' views, and methods to lay them out. The general idea is that a view conforming to this protocol can either be in 'cell' mode (where it exactly matches a tab grid cell), or in 'tab' mode (where it exactly matches an open tab). Most of the work is done by the GridTransitionCell subclass of GridCell, which positions and scales the "tab" and "cell" views it is supplied with so they animate smoothly. All of this positioning/scaling logic is internal to that class and nothing else depends on it. Providing the transition cell with the tab views is handled in the transition animator, mostly leveraging the content area layout guide. This doesn't require any direct integration with the tab view (that is, the BVC) beyond that layout guide. Approaches I abandoned: - letting -layoutSubviews position the tab/grid views. The problem with this approach (which is much cleaner from an API perspective) is that the timing of the layout passes is unpredictable, it it resulted in changes being made that weren't fully animated (for example, subviews would be scaled and positioned without animation, and then the superview would scale with an animation). - using layout constraints for GridTransitionCell's tab views. This is probably the correct thing to do long-term; mostly this was a decision made under time constraints, but since ultimately animating constraint changes depends on -layoutSubviews being called at the right times, I did have some concerns given the difficulties described above. It's unfortunate that grid_cell.mm is mixing constraint- and frame-based layout, but it is confined to that single file. Bug: 851460 , 850507 , 862343 Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet Change-Id: If6d55f14aa05e705143547b61773fdb34796ad2d Reviewed-on: https://chromium-review.googlesource.com/1136647 Commit-Queue: Mark Cogan <marq@chromium.org> Reviewed-by: Gauthier Ambard <gambard@chromium.org> Cr-Commit-Position: refs/heads/master@{#575590} [modify] https://crrev.com/602d2720f0c353b05c3f6615b3e78ea1bd5d7255/ios/chrome/browser/ui/tab_grid/grid/grid_cell.mm [modify] https://crrev.com/602d2720f0c353b05c3f6615b3e78ea1bd5d7255/ios/chrome/browser/ui/tab_grid/tab_grid_view_controller.mm [modify] https://crrev.com/602d2720f0c353b05c3f6615b3e78ea1bd5d7255/ios/chrome/browser/ui/tab_grid/transitions/grid_to_tab_transition_view.h [modify] https://crrev.com/602d2720f0c353b05c3f6615b3e78ea1bd5d7255/ios/chrome/browser/ui/tab_grid/transitions/grid_to_visible_tab_animator.mm [modify] https://crrev.com/602d2720f0c353b05c3f6615b3e78ea1bd5d7255/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_animation.mm [modify] https://crrev.com/602d2720f0c353b05c3f6615b3e78ea1bd5d7255/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_layout.h [modify] https://crrev.com/602d2720f0c353b05c3f6615b3e78ea1bd5d7255/ios/chrome/browser/ui/tab_grid/transitions/grid_transition_layout.mm [modify] https://crrev.com/602d2720f0c353b05c3f6615b3e78ea1bd5d7255/ios/chrome/browser/ui/tab_grid/transitions/tab_to_grid_animator.mm
,
Jul 17
|
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by kkhorimoto@chromium.org
, Jun 7 2018